HTMLフォームにテキストボックスやラジオボタン、チェックボックスなど様々なタイプの入力欄があり、Javascript + jQuery で name ごとの値を取得したいと考えています。
つまり送信ボタンを押したときの POST や GET のパラメータになる部分を Javascript で取得したいです。
テキストボックスだけであればすべての input[type="text"] の val() で取得すれば済む話ですが、ラジオボタンは prop が checked であるものを探さなければならず、チェックボックスであれば配列になるかもしれません。
すべての input や option:checked を each() で1つ1つ調べて type に応じて取得してみるつもりですが、それで正しいでしょうか? 専用の関数などや簡単なやり方は用意されていないですよね?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
ベストアンサー
Kosuke_Shibuyaさんのソースを一部拝借します
formDataを使えば、有効データのみ抽出できます
javascript
1$(function () { 2 $("button").on('click', function (e) { 3 var fd=new FormData($(this).closest('form').get(0)); 4 for(item of fd) console.log(item); 5 e.preventDefault(); 6 }); 7});
HTML
1<form> 2<input type="text" name="t1" value="1" /> 3<select name="s1"> 4<option value="1">1</option> 5<option value="2">2</option> 6<option value="3">3</option> 7</select> 8<input type="checkbox" name="c1[]" value="1" /> 9<input type="checkbox" name="c1[]" value="2" /> 10<input type="checkbox" name="c1[]" value="3" /> 11<input type="radio" name="r1" value="1" /> 12<input type="radio" name="r1" value="2" /> 13<input type="radio" name="r1" value="3" /> 14<button type="button">Submit</button> 15</form> 16
投稿2017/09/20 04:49
総合スコア114572
0
参考
サンプル
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>サンプル</title> 6 </head> 7 <body> 8 <form action=""> 9 10 <p> 11 <input type="text" name="textbox" value="1" /> 12 </p> 13 14 <p> 15 <select name="select"> 16 <option value="1">1</option> 17 <option value="2">2</option> 18 <option value="3">3</option> 19 </select> 20 </p> 21 22 <p> 23 <label> 24 <input type="checkbox" name="check[]" value="1" /> 25 </label> 26 <label> 27 <input type="checkbox" name="check[]" value="2" /> 28 </label> 29 <label> 30 <input type="checkbox" name="check[]" value="3" /> 31 </label> 32 </p> 33 34 <p> 35 <button type="button"> 36 Submit 37 </button> 38 </p> 39 </form> 40 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 41 <script type="text/javascript"> 42 $(function () { 43 $("button").on('click', function () { 44 var data = $(this).parents('form').serialize(); 45 alert(data); 46 }); 47 }); 48 </script> 49 </body> 50</html>
投稿2017/09/20 04:33
退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
おおむねその認識で正しいと思います。
ですが、一つアドバイスをすると、ラジオボタンはHTMLをしっかり組んでいれば value
で取得できそうですね。
ピュアな JavaScript でフォーム(form)系要素の値を取得, 設定する方法一覧 - phiary
上のリンク先はjQueryを使っていても使える技のはずです。
蛇足: 今JavaScriptに関してはものすごいスピードで研磨されている言語です。もしかしたらもっと調べると、最新のブラウザでは使える便利な機能があるかもしれませんね。
投稿2017/09/20 04:22
総合スコア2244
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。