感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQueryでボタンをクリックした時に、フォームに入力した値を取得する。

<スポンサーリンク>

入力画面(フォーム)を作るHTML

フォームを構成するのは

<form></form>

である。
method属性にはデータの送信方法、action属性には入力データを処理するプログラムのURLを指定する。
以下はbodyタグの部分の記述だが、表示するとこんな感じになる。

<form method="post" action="" id="formtest">
<p>
<label for="user">名前</label>
<input type="text" id="user" name="username" />
</p>

<p>
<label for="gender">性別</label>
<select name="gender" id="gender">
  <option value="men"></option>
  <option value="woman"></option>
</select>
</p>

<p>
<label for="com">コメント</label>
<textarea id="com" name="comment" cols="30" rows="7">
</textarea>

<p>
<input type="button" value="送信" id="submitbutton" />
</p>

CSSはこんな感じ。

#formtest label {
	display: block;
	margin-bottom: 3px;
	font-size: 0.8em;
}

#user {
	width :30%;
}

#com {
	width: 70%;
	height: 150px;
}

#result {
	font-size:0.8em;
	font-family:メイリオ" ;
}

このHTMLのフォームに入力した値をjQueryで取得して、結果表示してみる

さっきHTMLをせっかく作ったので、jQueryでフォームに入力した値を取得してみる。
完成版のHTML。

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
  $('#submitbutton').click(function() {
    setValue($('#user').val());
    setValue($('#com').val());
  });

  function setValue(val) {
    console.log(val);
    $('#result').after(val);
    $('#result').after('<br>');
  }
});
</script>
</head>
<body>
<form method="post" action="" id="formtest">
<p>
<label for="user">名前</label>
<input type="text" id="user" name="username" />
</p>

<p>
<label for="gender">性別</label>
<select name="gender" id="gender">
  <option value="men"></option>
  <option value="woman"></option>
</select>
</p>

<p>
<label for="com">コメント</label>
<textarea id="com" name="comment" cols="30" rows="7">
</textarea>

<p>
<input type="button" value="送信" id="submitbutton" />
</p>

<hr>
<div id="result">
  結果
</div>
</body>
</html>

以下の部分で、ボタンがクリックされたことをきっかけに、値を取得する関数が動く。

  $('#submitbutton').click(function() {
    setValue($('#user').val());
    setValue($('#com').val());
  });

それで、ここで、HTMLにテキスト要素を追加している。

  function setValue(val) {
    console.log(val);
    $('#result').after(val);
    $('#result').after('<br>');
  }

フォームのHTMLを書くのに参考にした本

XHTML/HTML+CSSスーパーレシピブック

XHTML/HTML+CSSスーパーレシピブック


まさに名前通りのHTMLのレシピで、「何かをしたいとき」に参考にするための情報がたくさん載っている。

感謝のプログラミング

今回で感謝のプログラミングは【574時間目】
10000時間まで、あと【9426時間】