javaScript Jquery イベント フォーム 取得

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


サンプル

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