HTMLのinputタグ数が変わる場合のjavascript処理

このQ&Aのポイント
  • HTML上に複数のinputタグがある場合、その値をJavascriptで配列として受け取る方法について説明します。
  • inputが1つしかない場合でも、配列で処理する方法についても解説します。
  • inputタグの数に関わらず、動的に配列で値を受け取るための記述方法を説明します。
回答を見る
  • ベストアンサー

HTMLのinputタグ数が変わる場合のjavascript処理

HTML上にinputタグが複数あって、その値をJavascriptで配列として受け取るコーディングをしています。 例えばこんな感じで・・・ 【サンプル1】 <form method="post" action="***.cgi" name="form1" onsubmit="return valueCheck(this);"> <input type="hidden" name="wData" value="aaa"> <input type="hidden" name="wData" value="bbb"> </form> function valueCheck(wForm) { document.write('wData='+wForm.wData[0].value); document.write('wData='+wForm.wData[1].value); } ただ、inputが1つしかない時もあるのですが、そのときの値が配列で受け取れません。 下記のように修正すると動くので、配列じゃないただの値だと判断されているようです。 【サンプル2】 <form method="post" action="***.cgi" name="form1" onsubmit="return valueCheck(this);"> <input type="hidden" name="wData" value="aaa"> </form> function valueCheck(wForm) { document.write('wData='+wForm.wData.value); } inputの値がいくつあるのかは都度変わるので、1つの時でも配列で処理したいのですが どのように記述すればいいのでしょうか。

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

onSubmitでdocument.writeするとソースが書き換わっちゃうので まずいでしょう。一応alertしておきます。 以下のようにすれば全体をナメてデータを取得することができます。 <script language="javascript"> function valueCheck(wForm) { flg=false for(var i=0;i<wForm.length;i++){ if(wForm[i].name=="wData"){ alert('wData='+wForm[i].value); flg=true; } } return flg; } </script> <form method="post" action="***.cgi" name="form1" onsubmit="return valueCheck(this)"> <input type="text" name="wData" value="aaa"> <input type="text" name="wData" value="bbb"> <input type="submit" value="send"> </form>

gaogao30
質問者

お礼

ご回答ありがとうございます。 なるほど。そういうことだったんですね。

関連するQ&A

  • HTMLのinputタグ数が変わる場合のjavascript処理

    パターンA ~HTML~ <input type='text' name='a[]'> <input type='text' name='a[]'> ~JavaScript~ var n = document.form1.elements["a"][0].value ; var n = document.form1.elements["a"][1].value ; パターンB ~HTML~ <input type='text' name='a[]'> ~JavaScript~ var n = document.form1.elements["a"][0].value ; ---(1) パターンAではエラーが出ないのですが、パターンBでは(1)のところでエラーになってしまいます。 【elements["a"][0]】の部分を【elements["a"]】とすればエラーは出ません。 どうやら、inputタグが1つしかない場合は、Javascriptでは配列として認識しないようです。 できれば、inputタグが1つの場合でも複数の場合でも、同じJavascriptコードを使いたいのですが、何か良い方法はありますか?

  • input type="image" 複数の画像がある場合のSubmit

    いつもお世話になります。 早速ですが質問です。 function Check(){ if(document.form.text.value==""){ alert('入力してください'); return false; } return true; } <form name="form" action="./form.cgi" method="post" onSubmit="return Check();"> <input type="text" name="text"> <input type="image" src="img/back.gif" name="btn01" alt="戻る"> <input type="image" src="img/next.gif" name="btn02" alt="進む"> </form> とあります。 テキストボックスの値が空の場合は【進む】を押したときにエラーを出し、 【戻る】を押したときは値の入力に関係なくページを移動したいです。 どなた様かよろしくお願いします。

  • javascriptにてHTMLのhiddenエリアのvalueを変更したい

    javascriptにてHTMLのHIDDENエリアのVALUEをフォームの値が変わるごとに更新していきたいのですが、やり方がいまいちわかりません。 <input type = "text" value="10" id="aaa" onchange=aaa();/> <input type = "text" value="20" id="bbb" onchange=aaa();/> <input type = "hidden" name="abc" value="aaa"/> <script> function aaa(){ document.abc.value = document.getElementById("aaa").value+document.getElementById("bbb").value ; } </script> このような感じで考えていますが、進みません。どなたかご教授お願いいたします。

  • inputタグのhiddenの使い分けについて

    <form action="add.php" method="post"> <input type="hidden" name="check_name" value="{$name}"> このhiddenのinputは、ユーザーには情報を見せずに、postでいろんな情報をいっぱい渡したい場合に使われるものなのでしょうか。 また、value="{$name}"のように{}があるのですが、これは変数コンピュータに認識してもらうための決まりごとですよね。しかし、それが無い場合もあったりします。いれるべき場合とそうでない場合の区別はありますか。 よろしくお願いします。

    • ベストアンサー
    • PHP
  • リクエストパラメータの値によってJavaScriptでスタイルを変更する場合

    いつも参考にさせて頂いてます。 早速なのですが以下のことが分からず困っています。 親画面から子画面へ遷移する。 その際、チェックボックスの値を複数個POSTで送信する。 子画面で受け取った値をhiddenにそのまま保持し、 孫画面にそのままPOSTで送信する。 JSPを使っているのですがこういったことは可能なのでしょうか? ■親画面 <form method="POST" name="data2" action="child.jsp">   <input type="checkbox" id="check" name="check" value="1>   <input type="checkbox" id="check" name="check" value="2">   <input type="checkbox" id="check" name="check" value="3">   <input type="submit" value="送信"> </form> ■子画面 window.onload = function(){   //画面遷移時にリクエストパラメータをhiddenにセット   document.data.check2.value = <%= request.getParameterValues("check") %>; } ~略~ <form method="POST" name="data2" action="grandchild.jsp">   <input type="hidden" id="check2" name="check2" value="">   <input type="submit" value="送信"> </form> こんな感じで孫画面へそのまま渡せるのかな?と思ったのですが うまく行きませんでした。 アドバイスなどありましたら宜しくお願いします。

  • input タグで「空白を含む変数」の取得方法

    form を使って変更日時を取りたいとき document.write("><input type=hidden name=xx value=" + document.lastModified ); とすると「日付」は取れるのですが後半の「時間」が、その前にブランクがあるため取れません。 時間も含めて 04/13/2011 11:16:35 のように取る、スマートな方法を教えてください。

  • javascriptからCGIへの値渡し

    cookieは利用しない方向で考えています。 HTML上のdocument.form01.のsubmitが押下されたら一度手入力されたデータ(userinput)を加工し、 別のフォームform02.valueに格納してtest.cgiにPOSTで投げる動作を期待しています。 下記だとページ遷移無しで一時的な格納まで確認しましたが CGIへの送信が機能していないようです。 どの様にすべきでしょうか? [html] <script type="text/javascript"> <!-- function onSubmit() { document.form02.sendform.value = '\"' + document.form01.userinput.value + '\"'; document.form02.submit(); } --> </script> <body> <form name="form02" method="POST" action="test.cgi"> <input type="hidden" name="sendform" value=""> </form> <form method="POST" action="" name="form01"> <input type="text" name="userinput"> <input type="submit" value"送信" onclick="return onSubmit();"> </form> </body> </html>

  • formタグのvalue="" に代入される文字列をsubmitボタン

    formタグのvalue="" に代入される文字列をsubmitボタンが押されたときに Javascriptでlocation.hrefで現在のURLを判定して 条件分岐してformタグのvalue="" に "A" や "B" といった 文字列を代入したいと考えてます。 現在下記のタグを書いているのですが、submitボタンが押されたときに パラメータにvalueの値が代入されず、困ってます。。。 タグの記述に間違いがあると思うのですが、ご指摘いただけないでしょうか? ■現在のタグ 1.Javascript側 <script> <!-- function check() { if(location.href.startsWith('http://www.AAA.com/AAA/')){ document.exp.categoryII.value = "A"; }else if(location.href.startsWith('http://www.AAA.com/BBB/')){ document.exp.categoryII.value = "B"; } return true; } // --> </script> 2.formタグ側 <form onsubmit="return check()" name="exp" action=""> <input name="gen" value="6" type="hidden" /> <input name="categoryII" value="" type="hidden" /> <input name="button" value="検索" type="submit" /> </form> よろしくお願い致します。

  • value文のないInputタグ

    Inputタグの内容を送信したいのですが、 例えば、フォームF1のテキストエリアT1に、 document.F1.T1.value = "テスト"; として、JavaScript側から値(value)を指定します。 この場合、 <form method="post" name="F1"> <input type="text" name="T1"> </form> とするだけで、ブラウザに、「テスト」と表示させられますよね。 しかし、Inputタグの中に「value」の値が無いため、 他のURLに、テキストエリア「T1」の内容を送信することができません。 このようにJavaScript側から値(value)を指定したInputタグの値を送信する方法について教えてください。

  • フォームのname値を配列にしてJavaScriptでフォームのチェックをする方法

    JavaScriptでフォームの半角数字のチェックをしたいのですが、 form内容をCGI(PHP)に渡すためname値を配列にしないといけないのですが、 以下のスクリプトだとエラーが出てしまいます。 *実際はif(isNaN~)と<input~>をループで書き出しており、行数が不特定なので それぞれ別のname値を使うことができない状態です。 <script language="JavaScript"> function check() { if(isNaN(document.form1.hoge[0].value)){ alert("値は半角数字で入力してください。"); return(false); } if(isNaN(document.form1.hoge[1].value)){ alert("値は半角数字で入力してください。"); return(false); } return(true); } </script> <form method="post" action="xxx.cgi" onSubmit="return check()" name="form1"> <input type="text" name="hoge[0]"> <input type="text" name="hoge[1]"> </form> 特にCGIに渡す必要がなければ <input type="text" name="hoge"> <input type="text" name="hoge"> としてやればチェックができるのですが、どうしても次の 処理があるためname値を配列にする必要があります。 解決方法がわかる方がおられましたらご教授ください。 以上よろしくお願いいたします。

専門家に質問してみよう