web-dev-qa-db-ja.com

ボタンのクリック時にフォームの自動送信を無効にする

複数のボタンを使用するHTMLフォームがあります。問題は、どのボタンをクリックしても、ボタンのタイプが「送信」ではない場合でもフォームが送信されることです。例えば：<button>Click to do something</button>のようなボタンは、フォームを送信します。

これらのボタンのそれぞれに対してe.preventDefault()を実行するのは非常に苦痛です。

JQueryとjQuery UIを使用し、WebサイトはHTML5にあります。

この自動動作を無効にする方法はありますか？

javascripthtmlbuttonform-submithtml-form
160
Paris

<button>Click to do something</button>などのボタンは、送信ボタンです。

それを変更するには、type="button"を設定します。 type="submit"がデフォルトです（ HTML勧告で指定 ）。

382
Quentin

やりたいことをするのは難しくありません。次のようにreturn false（すべてのDOM要素のデフォルト動作をオーバーライドするfalseを返す）を使用してみてください：

myform.onsubmit=function()
{ 
  //do what you want;
  return false;
}

次に、myform.submit（）を使用してフォームを送信します

または、代わりに：

mybutton.onclick=function () 
{
   //do what you want;
   return false;
}

ただし、Input type = "button"/Button type = "button"はフォームを送信しないため、問題なく使用できます。

16
Boris D. Teoharov

<button>は実際には送信ボタンであり、他の主要な機能はありません。タイプをボタンに設定する必要があります。
しかし、以下のようにイベントハンドラをバインドする場合、すべてのボタンをターゲットにし、ボタンごとに手動で行う必要はありません！

$('form button').on("click",function(e){
    e.preventDefault();
});
7
mas-designs

属性として入力に直接追加する場合は、これを使用します

 onclick="return false;" 

<input id = "btnPlay" type="button" onclick="return false;" value="play" />

これにより、フォーム送信動作が防止されます

0
bh_earth0