jquery valメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery val()メソッド

valメソッドは、セレクタで指定した要素のvalue属性の値、入力されたテキストを取得できます
取得した値はjqueryオブジェクトとしてそのままテキスト表示などに使えます

.val()

HTML要素のvalue属性の値、入力されたテキストを取得できます

送信ボタンを押した時にinput要素に入力した値をvalメソッドを使って取得し、textメソッドを使ってspan要素に表示します

jquery

	
$(function(){
	$("button#hoge3").click(function(){
		$("span#hoge").text($("input#a").val());
		$("span#hoge2").text($("input#b").val());
		$("button#hoge3").text("送信確定");
	});
});

html

<fieldset>
<legend>メールフォーム</legend>
<p><label>メールの件名:<input id="a" type="text" name="f1" value=""></label>
メール件名確認: <span id="hoge"></span></p>
<p><label>メール入力欄:<input id="b" type="text" name="f2" value=""></label>
メール確認:<span id="hoge2"></span></p>
<p><button id="hoge3">送信</button></p>
</fieldset>

※サンプルのためサーバーには送信されません

メールフォーム

メール件名確認:

メール確認:



指定した要素のvalue属性の値を変更する

valメソッドに引数を指定すると指定した要素のvalue属性の値を変更できます

val("変更するテキスト")

下記の場合は送信ボタンを押したときにvalメソッドで属性の値(テキスト)を変更します

jquery

$(function(){
	$("button#hoge4").click(function(){
		$("input#c").val("この件名は使えません");
		$("input#d").val("フリーメールは使えません");
		$("button#hoge4").text("送信確定");
	});
});

html

<fieldset>
<legend>メールフォーム</legend>
<p><label>メールの件名:<input id="c" type="text" name="f1" value="" size="60"></label></p>
<p><label>メール入力欄:<input id="d" type="text" name="f2" value="" size="60"></label></p>
<p><button id="hoge4">送信</button></p>
</fieldset>
メールフォーム






(C)2012 ホームページ作成無料