javaScript・Jqueryで動的にフォームの値を取得するサンプル

このエントリーをはてなブックマークに追加

書き込まれたフォームの値を取得する処理

HTML
<form name='testForm'>  
    <input id='textData' name='textData' type='textData' value='あいうえお' onchange='henkou()' />
</form>


javaScript
取得するformのidとnameのキーを指定
var textData = document.forms.testForm.textData.value;


Jquery
idなどを要素を指定して.val()で値を取得する事が可能
$('#textData').val();

動的・リアルタイムに取得する
書き込まれてる最中に取得するにはonChangeなどの発火イベントを使って処理します
上記のHTMLは関数henkou()がonChangeで実行される記述があります
function shutoku(){
var textData = $('#textData').val();
console.log(textData);
}

サンプル

See the Pen 動的にformの中身を取得する by yochans (@yochans) on CodePen.

0 件のコメント :