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

form の値を取得するための JavaScript と jQuery のソースコードを一覧にし、コーディング時にそのまま使えるテンプレートとしてまとめました。

実際の動きがイメージしやすいように、実行サンプルと結果もセットにしました。ご活用下さい。

JavaScript と jQuery のフォーム値取得テンプレート

サンプルコードの「取得」ボタンをクリックすれば結果が出力されます。

ボタン

<input type=”button”/>
HTML
<form id="form_01" name="form_01">
    <input type="button" name="btn_01" value="取得">
</form>
JavaScript
var output = document.forms["form_01"].elements["btn_01"].value;
console.log(output);
jQuery
var $output = $('#form_01 [name=btn_01]').val();
console.log($output);
サンプル
結果

テキスト

<input type=”text”/>
HTML
<form id="form_02" name="form_02">
    <input type="text" name="name_text" value="sirochro.com">
    <input type="button" name="btn_02" value="取得">
</form>
JavaScript
var output = document.forms["form_02"].elements["name_text"].value;
console.log(output);
jQuery
var $output = $('#form_02 [name=name_text]').val();
console.log($output);
サンプル
結果

数値(HTML5)

<input type=”number”>
HTML
<form id="form_03" name="form_03">
    <input type="number" name="name_number" value="1000">
    <input type="button" name="btn_03" value="取得">
</form>
JavaScript
var output = document.forms["form_03"].elements["name_number"].value;
console.log(output);
jQuery
var $output = $('#form_03 [name=name_number]').val();
console.log($output);
サンプル
結果

チェックボックス

<input type=”checkbox”>
HTML
<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>
JavaScript
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]
    </td>
</tr>
<tr>
    <th>jQuery</th>
    <td>
[code]
var $checked = $('#form_04 [name=name_checkbox]:checked');
var $output = $checked.map(function(index, el) {
    return $(this).val();
}).get().join(",");
console.log($output);
サンプル
結果

ラジオボタン

<input type="radio">
HTML
<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>
JavaScript
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]
    </td>
</tr>
<tr>
    <th>jQuery</th>
    <td>
[code]
var $output = $('#form_05 [name=name_radio]:checked').val();
console.log($output);
サンプル
結果

セレクトボックス(単数選択)

<select name="select">
HTML
<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>
JavaScript
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]
    </td>
</tr>
<tr>
    <th>jQuery</th>
    <td>
[code]
var $output = $('#form_06 [name=name_select]').val();
console.log($output);
サンプル
結果

セレクトボックス(複数選択)

<select name="select" multiple>
HTML
<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>
JavaScript
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]
    </td>
</tr>
<tr>
    <th>jQuery</th>
    <td>
[code]
var $output = $('#form_07 [name=name_select-m]').val();
console.log($output);
サンプル
結果

※サンプルの結果は「出力」ボタンのクリックイベントで output($output) の値を出力したものとなります。

まとめ

チェックボックスやラジオボタン、セレクトボックスの要素取得は、やはり jQuery が便利ですね。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents