独学でJavaScriptの勉強をしているものです。
勉強用に作っているサイトにて、どうしてもやり方がわからないことがあるので、教えて下さい。
以下のようなフォームがあったとします。
<form name="testForm1">
<input type="hidden" name="id" value="1" />
<input type="checkbox" name="check" />
</form>
このフォームは動的に複数作成され、idのvalueはフォームごとに別の値が入ります。
それで行いたいことは、複数あるtestForm1から、チェックボックスにチェックが付いているidだけを取得して、別のページにPOSTで渡したいんです。
以下のようなスクリプトを書いたのですが、思うように動作してくれませんでした。
<form action="hoge" name="testForm2" method="post">
<input type="hidden" name="id" />
</form>
function func() {
var idArray = new Array();
for ( count = 0; count < document.testForm1.length; count++ ) {
if ( document.testForm1.check.checked == true ) {
idArray.push( document.testForm.id.value );
}
}
document.testForm2.id.value=idArray;
document.testForm2.submit();
}
JavaScriptに関しては独学で必要に応じて勉強している感じで、あまり基礎がわかっておらず、もしかしたらかなり的外れな質問になってしまっているかもしれませんが、どうか宜しくお願い致します。
No.7ベストアンサー
- 回答日時:
<input type="checkbox" name="fuga" value="xxxx">
<input type="checkbox" name="fuga" value="xxxx">
<input type="checkbox" name="fuga" value="xxxx">
<input type="checkbox" name="fuga" value="xxxx">
var a = document.getElementsByTagName( 'fuga' );
var c , o, b = [ ];
for( c = 0; o = a[ c++ ]; ) if( a.checked ) b.push( a.value );
document.getElementById( 'yyyy' ).value = b.join(',');
とか。
返答ありがとうございます。
お礼が遅くなってすみません。
配列ではなく、カンマ区切りというのも一つの方法として良いかもしれませんね。
ただ、今回の例はhiddenで値を渡すようになっているんですけど、実際はユーザが入力したtextの値を渡したいんです。
そうなると、ユーザがそのテキストボックスにカンマを入力してしまうと、不具合が出てしまって…
もう少し、自分のほうでも検討してみます。
No.10
- 回答日時:
#7です
val += ',' + element.value;
じぶんもpushつかっているのにいうのもへんですが
おそくなるかも。
b[b.length]=a.value;
No.9
- 回答日時:
#4です。
>あとは、その配列をどうやって渡せばいいのかがわからなくて…
#4にも書きましたが、そのままでもいけそうかも…(ダメなブラウザがあるかも)
ちゃんとやるなら、#7様のようにjoinを使うとか、toStoring()を利用するとか…
連結されたデータになるので、後で分解して解釈する必要がありますが、データの中にカンマが入っていたりすると正しく分解できませんね。
記録するときに、配列を使わなくても
val += ',' + element.value;
みたいなのでも良さそう。
ご質問文のように、Form2のエレメントにセットして、Form2をsubmitすればそのまま送信されるはずです。
試しに、method="get"で適当なHTMLに対して送ってみれば、URLのserch部分に内容が表示されるので確認しやすいかと思います。
(データが長い場合は文字数制限があるはずなので無理)
------------------------------------------------
>サーバ側はPHPで、Smartyのforeachを使って動的にフォームを増やし
>ています。
一旦、HTMLを吐き出した後は変わらないのですよね?
だとすると、吐き出すときにそれぞれを<form>~</form>で小分けして出力せずに全体で一つのformになるようにしてしまえば、スクリプトで処理しなくともそのままsubmitしてしまえると思いますが…
(=受け取った側で処理をする考え←どうせ何らかの処理が必要だから)
ご返答ありがとうございます。
お礼が遅くなってしまってすみません。
自分なりにも色々と調べてみた結果、やっと問題点がはっきりしてきました。
最初に書いた質問の内容と少しズレてしまいますし、ちょっとわかりにくくなってしまっているので、改めて内容をまとめて、質問させていただきます。
No.8
- 回答日時:
あっ!ていせい!
var a = document.getElementsByTagName( 'fuga' );
じゃなくて
var a = document.getElementsByName( 'fuga' );
No.6
- 回答日時:
<input type="checkbox" name="fuga" value="xxxx">
にして、そのcheckedがtrueだけあつめれば?
ご返答ありがとうございます。
チェックが付いているidだけをあつめることはできました。
あとは、それをPOSTで渡したいのですが、どうすればいいのかわからなくて…
No.5
- 回答日時:
まず仕様を変更したほうがいいです。
name属性を使用しているのは妥協するとしても、"id"という名前を振るのは好ましくないです。
document.testForm.id.value(testForm1?1抜けてる?)のところで説明しますと、
document.testFormはHTMLオブジェクトで、
HTMLオブジェクトには標準でidというプロパティが既に存在しています。
つまり、document.testForm.idは、
testFormの中にある<input type="hidden" name="id" />ではなく
testFormの<form id="">の部分を参照しに行こうとするわけです。
それと、<form name="testForm1">という、同じ名前の<form>がたくさん作られているのだとしたら、
forループでの参照の仕方も間違えてます。同じ対象を何回も処理するようにできています。
とりあえず、今の使用のままで押し通すなら、
document.getElementsByName()
を駆使して関数を組みなおしてみましょう。
document.getElementsByName("testForm1")で、 name="testForm1" となっているHTML要素のリストを得られます。
ご返答ありがとうございます。
>name属性を使用しているのは妥協するとしても、"id"という名前を振るのは好ましくないです。
idという名前はここに書き込みをするのに分かりやすい名前のほうがいいかと思って付けたので、実際のソースでは別の名前にしてあります。
かえって、わかりにくくなってしまってすみませんでした。
また、No4様への返答にも書かせて頂いたのですが、チェックを付けたidの値を全て取得するところまではできているようなんです。
あとは、その配列をどうやって渡せばいいのかがわからなくて…
もしお時間があるようでしたら、教えて下さい。
No.4
- 回答日時:
同じく独学の者です。
name="testForm"というformが複数あるのだと想像しますが…
document.testForm1.checkだと要素が特定できていないはずです。
試しに、alert(document.testForm1.check);などとしてみれば分かると思います。(要素なら[object]など、不明ならundefinedなどが返る)
var frm = document.forms['testForm1'];
などとしておいて、
frm[count].check または frm[count].element['check']
などでアクセスすればよろしいかと…(ちょっと書き方を変えてます)
>document.testForm2.id.value = idArray;
idArrayは配列なので、単独の属性のvalueには代入できないかと思ったら、どうやらtoString()と同じ形式で代入されているみたいですね。
----------------------------------------------
でも、必ずこのような処理をするのであれば、testForm1をいっぱい作らずに、一つのformの中に各項目(hiddenとcheckbox)を複数いれてしまえば処理しなくてもそのままsubmitできそうな気がするけれど。
(受け取った側で、必要なデータだけ選択すればよい)
なんかの理由があって、formが複数作られてしまう(どうやって動的に作っているのか知りませんが)のであれば、ロード時にDOM操作でtestForm1を一つにまとめてしまうという手もあるかも。
(レイアウト等がどうなっているのかわかりませんので無理なのかも。まぁ、後でやるか先にやるかの違いだけで、同じことだって言えば同じことですね。)
ご返答ありがとうございます。
>document.testForm1.checkだと要素が特定できていないはずです。
これは私の記述ミスでした。
実際には、
document.testForm1[count].check
という風にしています。
試しに
for ( count = 0; count < idArray.length; count++ ) {
alert( idArray[count] );
}
としてみたところ、こちらの意図したとおり、チェックしたIDだけが表示されてくれたのですが、そのidArrayをどうやってPOSTで渡せばいいのかが未だにわからなくて…
>どうやって動的に作っているのか知りませんが
サーバ側はPHPで、Smartyのforeachを使って動的にフォームを増やしています。
もう少し、自分でも頑張って調べてみます。
No.3
- 回答日時:
ふたたびすみません。
>思うように動作してくれませんでした
ここから下のコードはそのまま書いていますか?
もしそうだとしたら、HTMLとScriptがごっちゃに書かれています
<script type="text/javascript">
</script>
でスクリプトの部分をくくらないとだめです。
また、func()と言うユーザー関数を作成していますが、これを実行している所がないですよね。form action=hoge ?????
submit()とボタンはどこへいったのでしょう。
ご返答ありがとうございます。
>ここから下のコードはそのまま書いていますか?
わかりにくくなると思って簡略化して書いたのですが、実際にはそのままではなく、スクリプトとHTMLの部分は分けて書いてあります。
func()に関しても、別に用意したボタンのonClickで実行するようにしてあります。
わかりにくくてすみませんでした。
testForm2に関しては、JavaScriptで使う受け皿のようなイメージで書いたので、submitはJavaScript以外からすることがないため、submitボタンなどは記述しませんでした。
必ず必要なものなのでしょうか?
また、
idArray[(idArray.length)] = XXXX;
のXXXXには、何を記述すべきなのでしょうか?
重ねての質問で申し訳ないのですが、お時間がありましたら教えて下さい。
No.1
- 回答日時:
idArray[count] = XXX;
とするだけです。自動的に配列が作られます。C++とから見ると、そんな作り方ではあぶないな(メモリーが)。と言う事になりますが作れるんだからいいんです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
このQ&Aを見た人はこんなQ&Aも見ています
-
風水の観点で選ぶ観葉植物とは?置き場所や上げたい運気ごとの注意点を紹介!
観葉植物で運気をアップするコツを、風水デザイン1級建築士の福島昌彦さんに伺った。
-
javascriptでhiddenに二次元配列を格納したい
JavaScript
-
<input type=hidden" >で配列(複数の要素)を渡したいとき?"
PHP
-
Javascript_submit()完了後に処理したい
JavaScript
-
-
4
フォームで同じ複数のnameで違うvalueの送信
Java
-
5
phpでの自動印刷
PHP
-
6
半角記号、全角記号を含む正規表現を作れなくて困っています。
Java
-
7
POSTの値を配列として受け取ってソースを効率的にしたい。
PHP
-
8
StrutsでJSPからListを受け取りたい
Java
-
9
<a href=#" …>の意味を教えてください。"
HTML・CSS
-
10
hiddenのvalueの値を変えたい
JavaScript
-
11
Where句のNot条件をAnd条件にしたい!
Oracle
-
12
$_SESSIONに二次元配列を使えるのですか?
PHP
-
13
別ファイルの変数を呼び出したいのですが?
PHP
-
14
select文のwhere句に配列を入れて検索したい
MySQL
-
15
同じIDで定義した要素の配列を取得したいが
JavaScript
-
16
【Ajax通信&Java】配列の受け取り方法
Java
-
17
cssで、表示されるテキストによってフォントの色を変えるには
HTML・CSS
-
18
テーブルの任意の列を非表示にしたい
HTML・CSS
-
19
【至急お助け!】チェックボックスにチェックで背景色変更が難しすぎて困っています!
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【jQuery】input nameの文字列...
-
テキストボックスの値同士を比...
-
OnClickでURL生成し、飛ばしたい
-
javascriptの値をformのinput h...
-
【ASP.NET MVC】HTMLヘルパーに...
-
jqueryでtextareaのcols、rows...
-
Javascriptでのbuttonのname属...
-
Pythonのプログラミングについ...
-
name属性のないformタグの、中...
-
出発駅A、到着駅Bを選択すると...
-
ラジオボタンでクリックした値...
-
Selectボックスの幅を自動で広...
-
javascript作成してます。ラジ...
-
Pythonで会員サイトの自動ログ...
-
現在時刻を取得してフォームのs...
-
特定<table>内の<td>の色を変える
-
hiddenのvalueの値を変えたい
-
ラジオボタンにタブインデック...
-
javascriptで入力禁止文字をチ...
-
jspでのArrayListの値の表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【jQuery】input nameの文字列...
-
javascriptの値をformのinput h...
-
JavaScriptにて動的に配列を作...
-
新しくフォルダを作成したい
-
二つの入力欄に、同時に同じ文...
-
Javascriptでのbuttonのname属...
-
name属性のないformタグの、中...
-
出発駅A、到着駅Bを選択すると...
-
テキストボックスの入力をリセット
-
ASP.NETでNAME属性を固定にしたい
-
submitボタン押下時にPOSTされ...
-
ラジオボタンでクリックした値...
-
テキストボックスの値同士を比...
-
jqueryでtextareaのcols、rows...
-
入力フォームに半角スペース以...
-
cookie使用時にundefinedと表示...
-
ファイル選択ダイアログが表示...
-
テキストエリアをenterキーでフ...
-
ボタンを押すとテキストボック...
-
hiddenを動的に作成したい
おすすめ情報