JavaScript

フォームの内容を取得する | Get the contents of the form

HTML、Javascript <body>
<form action="#" id="form">
<input type="text" name="word">
<input type="submit" value="search">
</form>
<p id="output"></p>

<script>
document.getElementById('form').onsubmit = function{
var search = document.getElementById('form').word.value;
document.getElementById('output').textContent = '「'　+ search +']の検索をしています・・・';
return false;
};
</script>
</body>

簡単な解説

<form action="#" id="form">	formタグを作り、action属性には通常、データーを送信する先のURLを指定しますが、今回のようにどこにも送信しないので、URLの代わりに「#」を指定しています。
<input type="text" name="word">	テキストフィールドを作成します。またname属性「word」を追加しています。name属性の値は、入力されたデータがサーバーに送信されるときに、そのデータにつく「名前」になります。必須です。
<input type="submit" value="search">	searchと書かれた送信ボタンを作ります。
<p id="output"></p>	ここに取得した入力内容が出力されるようにしておきます。
document.getElementById('form').onsubmit = function(){	「onsubmit」イベントにファンクションを代入しています。そしてこのファンクションの｛～｝内に、onsubmitイベントが発生したときに実行させたい処理を書いてます。
var search = document.getElementById('form').word.value;	id="form"のテキストを取得し、変数searchに代入します。
document.getElementById('output').textContent = '「'　+ search +']の検索をしています・・・';	id=outputを取得し、searchを先に取得した文字に書き換えます。
return false;	送信ボタンがクリックされたらデータを送るというフォームの基本動作をキャンセルしてます。なぜなら送信ボタンを押すとアドレスバーのURLが変わり、ブラウザは次のページに移動しようとします。しかし、action属性に指定されているURLは[#]です。再読み込みしたような状態となり、テキストやsearch部分が消えてしまうのを防ぎぐ為です。

この本を参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。

私は人から丁寧に教わりたい、という人にはこちらもどうぞ。

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー