このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

jQueryを使い、formの値を取得する方法です。

1.input type テキスト

input type=textの値取得方法です。

値の取得は .val();で取得します。

送信ボタンを押した時にinput type=textの値を取得し、

表示エリアに表示するスクリプトです。

$("#formhoge").submit(function(){
var text = $("#inputhoge").val();
$("#texthoge").text(text);
return false;
});

 

.submitでフォームがサブミットされたときにスクリプトを実行できます。

デモページ

2.テキストエリア

textareaの値取得方法です。

値の取得は .val();で取得します。

送信ボタンを押した時にtextareaの値を取得し、

表示エリアに表示するスクリプトです。

$("#formhoge").submit(function(){
var text = $("#inputhoge").val();
$("#texthoge").text(text);
return false;
});

 

input type=textの値取得方法は同様です。

デモページ

3.ラジオボタン

input type=radioの値取得方法です。

値の取得は .val();で取得します。

ラジオボタンが変更されると、input type=radioの値を取得し

表示エリアに表示するスクリプトです。

$('input[name="hogehoge"]').change(function(){
var data = $(this).val();
$("#texthoge").text(data);
});

 

.changeでラジオボタンが変更されたときにスクリプトを実行できます。

デモページ

4.ラジオボタン02

input type=radioの値取得方法です。

値の取得は .val();で取得します。

ラジオボタンが変更され送信ボタンを押されると、input type=radioの値を取得し

表示エリアに表示するスクリプトです。

$("#form04").submit(function(){
var data = $('input[name=device02]:checked').val();
$("#dsplyArea04").text(data);
return false;
});

 

.changeでラジオボタンが変更されたときにスクリプトを実行できます。

デモページ

5.セレクト

selectの値取得方法です。

値の取得は .val();で取得します。

selectが変更されると、option value=の値を取得し

表示エリアに表示するスクリプトです。

$('#selecthoge').change(function(){
var data = $(this).val();
$("#texthoge").text(data);
});

 

ラジオボタン同様、.changeでselectが変更されたときにスクリプトを実行できます。

デモページ

6.セレクト02

selectの値取得方法です。

値の取得は .val();で取得します。

selectを変更し送信ボタンを押されると、option value=の値を取得し

表示エリアに表示するスクリプトです。

$("#form06").submit(function(){
var data = $('#form06 option:selected').val();
$("#dsplyArea06").text(data);
return false;
});

 

デモページ

7.チェックボックス

チェックボックスの値取得方法です。

値の取得は .attr(‘checked’);でチェックされた項目の値を取得します。

値はチェックされると ture 　外されるとfalseになります。

変更されると表示エリアに表示するスクリプトです。

$('input[name="hoge"]').change(function(){
var data = $(this).attr('checked');
$("#texthoge").text(data);
});

 

デモページ

8.チェックボックス02

チェックボックスの値取得方法です。

値の取得は .attr(‘checked’);でチェックされた項目の値を取得します。

値はチェックされると ture 　外されるとfalseになります。

送信ボタンを押すと表示エリアに表示するスクリプトです。

$("#formhoge").submit(function(){
var data = $('input[name="hoge"]').attr('checked');
$("#texthoge").text(data);
return false;
});

 

デモページ