MENU
コンテンツ再構築中

JavaScript:即使用可能!JavaScript と jQuery のフォーム値取得テンプレート

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で共有していただければ幸いです。

Please share it!
  • URLをコピーしました!
  • URLをコピーしました!
INDEX