如何防止表单提交非提交按钮？

Question

HTML：

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

JS：

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

为什么当我按下Button，提交表单（我需要这个元素的另一个动作）？如何防止这一点？

Answer 1

为<button>默认的操作将是一个提交按钮，但你可以把它仅仅是一个“普通按钮”通过执行以下操作：

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

更多信息，请参见HTML specs。

Answer 2

尝试添加一个onclick听众：

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

这应该防止按钮提交表单。点击动作就是取消了。

Answer 3

对于没有console对象的浏览器（例如IE），这是失败的。

只是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/