非送信ボタンのフォーム送信を防ぐにはどうすればよいですか？

Question

HTML：

<form id="form" action="/" method='post'> 
<button>Button</button> 
<input type="text"> 
<input type="submit" id="send-form" value="Send"> 
</form> 

JS：

私は、フォームが送信され Buttonを押したときに（私は別のアクションのために、この要素を必要とする）のはなぜ

$('#form').submit(function() { 
    console.log('send'); 
    return false; 
}); 

？これを防ぐ方法は？

<button onclick="return false;">Button</button> 

ボタンがフォームを送信することを防ぐ必要があります。

Answer 1

<button>のデフォルトのアクションはsubmitボタンになることですが、あなたはそれだけで次の手順を実行して、「通常のボタン」も持つことができます。

<button type="button">Button</button> 

は、詳細はHTML specsを参照してください。

Answer 2

はonclickのリスナーを追加してください。クリック操作は、そのトリックでキャンセルされます。

Answer 3

たとえば、consoleオブジェクトを持っていないブラウザでは失敗します。

だけtry..catchでそれをラップし、それはすべてのブラウザで動作します：

$('#form').submit(function() { 
    try { 
     console.log('send'); 
    } 
    catch (e) { 
    } 

    return false; 
});​ 

Live test case。

編集：いっそのこと、あなたはコンソールがなくてもブラウザ用のメッセージを表示するために、独自の関数を書くことができます。

function Log(msg) { 
    if (typeof console != "undefined" && console.log) { 
     console.log(msg); 
    } else { 
     var myConsole = $("MyConsole"); 
     if (myConsole.length == 0) { 
      myConsole = $("<div></div>").attr("id", "MyConsole"); 
      $("body").append(myConsole); 
     } 
     myConsole.append(msg + "<br />"); 
    } 
} 

$('#form').submit(function() { 
    Log('send'); 

    return false; 
}); 

コンソールが利用できない場合は、この文書自体にメッセージを追加します。 Updated fiddle。

Answer 4

<form id="form" action="/" method='post'> 
<input type="button" value="Button"> 
<input type="text"> 
<input type="submit" id="send-form" value="Send"> 
</form>​ 

これにより、「送信しない」ボタンが作成されます。例：http://jsfiddle.net/R3UrK/1/