web-dev-qa-db-ja.com

<button>にフォームを送信させないようにすることはできますか？

2つのボタンを持つフォームがあります

<a href="index.html"><button>Cancel changes</button></a>

<button type="submit">Submit</button>

私もそれらの上にjQueryのUIのボタンを使用して、単純にこのように

$('button').button();

ただし、最初のボタンもフォームを送信します。私はそれがtype="submit"を持っていなければ、それは持っていないと思いました。

明らかに私はこれを行うことができます

$('button[type!=submit]').click(function(event) { event.stopPropagation(); });

しかし、JavaScriptを介さずにその戻るボタンでフォームを送信しないようにする方法はありますか。

正直なところ、私はjQuery UIでそれをスタイルすることができるようにボタンだけを使いました。リンク上でbutton()を呼び出そうとしましたが、期待通りに動作しませんでした（非常に見栄えが悪いです）.

javascriptjqueryhtmljquery-uibutton
444
alex

type要素のbutton属性 のデフォルト値は "submit"です。

<button type=button>Submit</button>
952
Josh Lee

button要素 のデフォルトの型はsubmitです。

buttonの型を設定することで何もしないようにすることができます。

<button type="button">Cancel changes</button>
218
s4y

古き良きHTMLを使うだけです：

<input type="button" value="Submit" />

必要に応じて、リンクの主題としてそれをラップします。

<a href="http://somewhere.com"><input type="button" value="Submit" /></a>

あるいは、JavaScriptに他の機能を提供させたい場合は、次のようにします。

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>
17
Jeffrey Blake
<form onsubmit="return false;">
   ...
</form>
6
zzjove

正直なところ、私は他の答えが好きです。簡単でJSに入る必要はありません。しかし、私はあなたがjQueryについて質問していることに気付きました。したがって、完全を期すために、jQueryでは、.click（）ハンドラーを使用してfalseを返すと、ウィジェットのデフォルトのアクションは無効になります。

例はここを見てください （そしてもっと良いものも）。 これもドキュメントです 。

あなたのサンプルコードで、一言で言えば、これを行います。

<script type="text/javascript">
    $('button[type!=submit]').click(function(){
        // code to cancel changes
        return false;
    });
</script>

<a href="index.html"><button>Cancel changes</button></a>
<button type="submit">Submit</button>

追加の利点として、これで、あなたはアンカータグを取り除き、ただボタンを使うことができます。

5
TCCV

type属性を設定しなくても、falseハンドラからOnClickを返し、onclick属性をonclick="return onBtnClick(event)"として宣言することもできます。

0
DennisVM-D2i