フォームデザイン（valメソッドによる値の取得／設定）

jQuery フォームデザイン

さて、久々のjQueryです。ちょっと体調悪かったり背中痛かったりで今日はすぐ諦めてしまいそうな気がしますが、一歩一歩参りましょう。

まずはinput系のタグの操作。
セレクターに対して「val()」で値を取得、「val(○○○)」で値をセットすると。
呼び出し方については、text()、text(○○○)等と同じ感じ。
だが、伊達にval()なんて名前になっているわけじゃなく、textareaの場合の入力値、selectタグの選択されたoptionのvalue属性値についても同じ方法でアクセスできる！

ではサンプルを。

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
      $(function(){
        //値を取得
        $("#send").click(function(){
          var address = $("#address").val();
          var subject = $("#subject").val();
          var mode = $("#mode").val();
          var body = $("#body").val();
          alert('以下の内容でメールを送信すると見せかけます。\n\n' + 
                'アドレス：' + address + '\n\n' + 
                '件名　　：' + subject + '\n\n' + 
                'モード　：' + mode + '\n\n' + 
                '本文　　：\n' + body + '\n');

        })
        $("#clear").click(function(){
          $("#address").val("");
          $("#subject").val("");
          $("#mode").val("");
          $("#body").val("");
        })
      })
    </script>
  </head>
  <body>
    <input id="address" type="text" value="hogeo@hoge.jp" /><br/>
    <input id="subject" type="text" value="ぱんぱかぱんつ♪" /><br/>
    <select id="mode">
      <option value=""></option>
      <option value="RedPig">赤ブタ</option>
      <option value="BluePig">青ブタ</option>
      <option value="GreenPig">緑ブタ</option>
    </select><br/>
    <textarea id="body" >
ぱんぱか
ぱんつで
    </textarea><br/>
    <input id="send" type="button" value="確認" />
    <input id="clear" type="button" value="クリア" />
  </body>
</html>

微妙にバラツキのある入力タグに対して同じメソッドでアクセスできるのは非常に助かりますね。