読者です 読者をやめる 読者になる 読者になる

jnobuyukiのブログ

JavaScriptとR言語を中心に研究活動に役立つwebアプリケーション技術について考えていきます。twitter ID: @j_nobuyuki

form内のbuttonとform外のbuttonの違い

入力フォームを記入して、別のプログラムへ送信するときのボタンですが、formの中にあるか外にあるかで動作が異なります。若干はまったので、メモ代わりにまとめておきます*1

formの中のbutton

formの中にbuttonを設定するとクリックしたときに、submitされて、リロードされます。formの状態が初期値に戻ってしまうことに注意しましょう。(下のサンプルの1のボタン)
HTML

<form id = "test">
<tr><td>
<select id = "selectBox"></select>
</td></tr>
<button onclick = "load1();">1</button>
</form>

JavaScript

function load1(){
  var loadtext = document.getElementById("selectBox").value;

  d3.select("#message").append("text").text(loadtext);

}

form の外のbutton

formの外にbuttonを設定できます。

何も設定しない場合

この状態でボタンがクリックされると、formへのsubmitは実行されず(onclickイベントは実行されます)、リロードも起きません。(下のサンプルの2のボタン)
HTML

<button onclick = "load1();">2</button>

JavaScriptは上のfunction load1()と同じ。

formへの関連付けを行う場合

form の外にあるbuttonもformに関連付けられます。するとbuttonがform内に設置されたのと同じ扱いになり、クリック時にリロードされます。
(下のサンプルの3のボタン)
HTML

<button onclick = "load1();" form = "test">3</button>

JavaScriptは上のfunction load1()と同じ。

formへの関連付けをしても、リロードされない方法1

onclickイベントにeventという引数を渡します。イベント内でevent.preventDefault()を実行すると、リロードされません。(下のサンプルの4のボタン)
HTML

<button onclick = "load2(event);" form = "test">4</button>

JavaScript

function load2(event) {
var loadtext = document.getElementById("selectBox").value;

  d3.select("#message").append("text").text(loadtext);
  event.preventDefault();
}
formへの関連付けをしても、リロードされない方法2

onclickイベントの最後にreturn falseを入れます。これだけでもリロードされません。(下のサンプルの5のボタン)
HTML

<button onclick = "load1();return false;" form = "test">5</button>

JavaScriptは上のload1()と同じ。

サンプルプログラム

サンプルはこちらです。


やり方はいろいろ

やり方がいろいろあって、使い分けを考える必要があります。ボタンとフォームの関連づけは大事な(気がする)ので、最後の2つのやり方がよさそうです。

*1:参考にしたのはこちらのページです。HTML - input type=submit でページを更新"しない"方法。 - Qiita