フォームの入力内容を取得する

入力内容を読み取って出力

  1. HOME
  2. インプット&出力

フォームを入力して検索してください！



HTMLソースコードと概要

<form action="#" id="form">
  <input type="text" name="word">
  <input type="submit" value="検索">
</form>
<p id="output"></p>

フォームのコードです！

input type="submit" value="検索"は送信ボタン
action="#" id="form"は指定された入力内容の送信場所

action属性には通常送信するURLを指定！今回は送信しないので『#』にしてます。ちなみに#はページの最上部を指す。

JavaScriptのソースコードと概要

document.getElementById("form").onsubmit = function () {
  var search = document.getElementById("form").word.value;
  document.getElementById("output").textContent = "『" + search + "』の検索中...";
  return false;
};
document.getElementById("form")
<form id="form">～</form>の要素を取得する。

要素イベント作成

取得した要素.onsubmit = function () {
　処理内容
};
<form>要素のonsubmitイベントにファンクションを代入していきます。
※onsubmitイベントは親要素の<form>に発生する！ イベントファンクションには()内にパラメーターもなく、{}内にreturn命令もない。パラメーターもリターンもないファンクション

フォームの入力内容を読み取る

取得した("form")要素.読み取りたい部分のname属性.value
あとはHTMLに出力するだけです。

return false

フォームの基本動作をキャンセルするプログラムです。
今回はデータが送信されて、URLの語尾が変わり、ページ移動しようとしてしまう為、再読み込み状態となってしまいます。それにより、テキスト表示が一瞬だけになるので、フォーム基本動作をキャンセルさせています。