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);
}


よりリアルタイム感を出すならonChangeよりonkeyupですかね
他にもイベント発火ではなくキー操作を取得してjavaScriptで取得する事も可能です

フォームの値をリアルタイムに取得するサンプル|CODE SAMPLES


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

0 件のコメント :

コメントを投稿