621

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()てみましたが、期待どおりに機能しませんでした (かなり醜いように見えました!)。

4

8 に答える 8

1364

要素のtype属性button のデフォルト値「submit」です。type="button"フォームを送信しないボタンを生成するには、 に設定します。

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

HTML 標準の言葉を借りれば、「何もしません」。

于 2010-07-23T02:36:48.097 に答える
237

button要素のデフォルト タイプはsubmitです。

次のタイプを設定することで、何もしないようにすることができますbutton

<button type="button">Cancel changes</button>
于 2010-07-23T02:38:53.363 に答える
19

古き良き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();"/>
于 2010-07-23T02:33:09.900 に答える
6

はい、値ボタンのタイプの属性を追加することで、ボタンがフォームを送信しないようにすることができます。 <button type="button"><button>

于 2019-09-27T14:39:16.167 に答える
5

正直なところ、私は他の答えが好きです。簡単で、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>

追加の利点として、これを使用すると、アンカータグを削除して、ボタンを使用するだけで済みます。

于 2010-07-23T02:50:37.797 に答える