スポンサード リンク
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>