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>
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>
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