フォームの部品の値を取得したり変更する命令

2015年8月3日

フォームを操作する専用の命令がval()です。
この命令を使用すると、フォームに入力または、選択されている
value属性の値を取得・変更することが可能です。

value属性の値を取得する

val()は括弧内には、何も書かずに使用すると、フォームに入力
されているテキストや選択されている値を取得します。

値を取得する対象要素はセレクターで指定します。

サンプルコードの確認ボタン(button要素)をクリックすると、
input要素の値を取得して「input要素に入力された内容」に
メールを送信！という確認メッセージをp要素内に書き出します。

それと同時にbutton要素の「確認」から「送信」に変更しています。

val()要素はinput要素だけではなく、
select/option要素やtextarea要素にも使用できます。

「$("select").val();」と指定すると、選択されている
option要素のvalue属性の値を取得することができます。

「$("texrarea").val();」と書けば、入力されている
テキストを取得することができます。

value属性の値を変更する

フォームの内容を変更するときも、val()を使用します。
対象とする要素をセレクターで指定し、変更したい値を
括弧内に記述します。

サンプルコードでは、クリアボタン(button要素)がクリックされたら、
val("")を実行し、input要素の値を空にしています。

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>

    <style>
	*{margin:0;padding:0;}
	
    </style>    
    
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>

    <p>メールアドレス：<input type="text" name="name"></p>
    <button id="confirm">確認</button>
    <button id="clear">クリア</button>
<script>
$(document).ready(function(){

    $("button#confirm").click(function(){
        $("p").text($("input").val()+"にメールを送信！")
        $("button").text("送信");
    });

    $("button#clear").click(function(){
        $("input").val("");
    });

});

</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

</style>

</head>

<body>

<p>メールアドレス：<input type="text" name="name"></p>

$(document).ready(function(){

$("button#confirm").click(function(){

$("p").text($("input").val()+"にメールを送信！")

$("button").text("送信");

});

$("button#clear").click(function(){

$("input").val("");

});

</script>

</body>

</html>