form の値を取得するための JavaScript と jQuery のソースコードを一覧にし、コーディング時にそのまま使えるテンプレートとしてまとめました。
実際の動きがイメージしやすいように、実行サンプルと結果もセットにしました。ご活用下さい。
INDEX
JavaScript と jQuery のフォーム値取得テンプレート
サンプルコードの「取得」ボタンをクリックすれば結果が出力されます。
ボタン
<input type=”button”/> | |
---|---|
HTML |
[code] <form id=”form_01″ name=”form_01″> <input type=”button” name=”btn_01″ value=”取得”> </form> [/code] |
JavaScript |
[code] var output = document.forms[“form_01”].elements[“btn_01”].value; console.log(output); [/code] |
jQuery |
[code] var $output = $(‘#form_01 [name=btn_01]’).val(); console.log($output); [/code] |
サンプル | |
結果 |
|
テキスト
<input type=”text”/> | |
---|---|
HTML |
[code] <form id=”form_02″ name=”form_02″> <input type=”text” name=”name_text” value=”www.sirochro.com”> <input type=”button” name=”btn_02″ value=”取得”> </form> [/code] |
JavaScript |
[code] var output = document.forms[“form_02”].elements[“name_text”].value; console.log(output); [/code] |
jQuery |
[code] var $output = $(‘#form_02 [name=name_text]’).val(); console.log($output); [/code] |
サンプル | |
結果 |
|
数値(HTML5)
<input type=”number”> | |
---|---|
HTML |
[code] <form id=”form_03″ name=”form_03″> <input type=”number” name=”name_number” value=”1000″> <input type=”button” name=”btn_03″ value=”取得”> </form> [/code] |
JavaScript |
[code] var output = document.forms[“form_03”].elements[“name_number”].value; console.log(output); [/code] |
jQuery |
[code] var $output = $(‘#form_03 [name=name_number]’).val(); console.log($output); [/code] |
サンプル | |
結果 |
|
チェックボックス
<input type=”checkbox”> | |
---|---|
HTML |
[code] <form id=”form_04″ name=”form_04″> <input type=”checkbox” name=”name_checkbox” value=”check A” checked>A <input type=”checkbox” name=”name_checkbox” value=”check B”>B <input type=”checkbox” name=”name_checkbox” value=”check C”>C <input type=”button” name=”btn_04″ value=”取得”> </form> [/code] |
JavaScript |
[code] var elm = document.forms[‘form_04’].elements[“name_checkbox”]; var output = []; for(var i = 0; i < elm.length; i++) { if(elm[i].checked) { output.push(document.forms["form_04"].elements[i].value); } } console.log(output); [/code] |
jQuery |
[code] var $checked = $(‘#form_04 [name=name_checkbox]:checked’); var $output = $checked.map(function(index, el) { return $(this).val(); }).get().join(“,”); console.log($output); [/code] |
サンプル | |
結果 |
|
ラジオボタン
<input type=”radio”> | |
---|---|
HTML |
[code] <form id=”form_05″ name=”form_05″> <input type=”radio” name=”name_radio” value=”A” checked>A <input type=”radio” name=”name_radio” value=”B”>B <input type=”radio” name=”name_radio” value=”C”>C <input type=”button” name=”btn_05″ value=”取得”> </form> [/code] |
JavaScript |
[code] var elm = document.forms[‘form_05’].elements[“name_radio”]; var output = []; for(var i = 0; i < elm.length; i++) { if(elm[i].checked) { output.push(document.forms["form_05"].elements[i].value); } } console.log(output); [/code] |
jQuery |
[code] var $output = $(‘#form_05 [name=name_radio]:checked’).val(); console.log($output); [/code] |
サンプル | |
結果 |
|
セレクトボックス(単数選択)
<select name=”select”> | |
---|---|
HTML |
[code] <form id=”form_06″ name=”form_06″> <select name=”name_select”> <option value=”single A” selected>single A</option> <option value=”single B”>single B</option> <option value=”single C”>single C</option> </select> <input type=”button” name=”btn_06″ value=”取得”> </form> [/code] |
JavaScript |
[code] var elm = document.forms[‘form_06’].elements[“name_select”].options; var output = []; for(var i = 0; i < elm.length; i++) { if(elm[i].selected) { output.push(elm[i].value); } } console.log(output); [/code] |
jQuery |
[code] var $output = $(‘#form_06 [name=name_select]’).val(); console.log($output); [/code] |
サンプル | |
結果 |
|
セレクトボックス(複数選択)
<select name=”select” multiple> | |
---|---|
HTML |
[code] <form id=”form_07″ name=”form_07″> <select name=”my-select-m” size=”3″ multiple> <option value=”multiple A” selected>multiple A</option> <option value=”multiple B”>multiple B</option> <option value=”multiple C”>multiple C</option> </select> <input type=”button” name=”btn_07″ value=”取得”> </form> [/code] |
JavaScript |
[code] var elm = document.forms[‘form_07’].elements[“name_select-m”].options; var output = []; for(var i = 0; i < elm.length; i++) { if(elm[i].selected) { output.push(elm[i].value); } } console.log(output); [/code] |
jQuery |
[code] var $output = $(‘#form_07 [name=name_select-m]’).val(); console.log($output); [/code] |
サンプル | |
結果 |
|
※サンプルの結果は「出力」ボタンのクリックイベントで output($output) の値を出力したものとなります。
まとめ
チェックボックスやラジオボタン、セレクトボックスの要素取得は、やはり jQuery が便利ですね。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。