如何防止button提交表单
在下面的页面中，使用Firefox的删除button提交表单，但添加button没有。 如何防止删除button提交表单？
<html> <head> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> function addItem() { var v = $('form :hidden:last').attr('name'); var n = /(.*)input/.exec(v); var newPrefix; if ( n[1].length == 0 ) { newPrefix = '1'; } else { newPrefix = parseInt(n[1])+1; } var oldElem = $('form tr:last'); var newElem = oldElem.clone(true); var lastHidden = $('form :hidden:last'); lastHidden.val(newPrefix); var pat = '=\"'+n[1]+'input'; newElem.html(newElem.html().replace(new RegExp(pat, 'g'), '=\"'+newPrefix+'input')); newElem.appendTo('table'); $('form :hidden:last').val(''); } function removeItem() { var rows = $('form tr'); if ( rows.length > 2 ) { rows[rows.length-1].html(''); $('form :hidden:last').val(''); } else { alert('Cannot remove any more rows'); } } </script> </head> <body> <form autocomplete="off" method="post" action=""> <p>Title:<input type="text" /></p> <button onclick="addItem(); return false;">Add Item</button> <button onclick="removeItem(); return false;">Remove Last Item</button> <table> <th>Name</th> <tr> <td><input type="text" id="input1" name="input1" /></td> <td><input type="hidden" id="input2" name="input2" /></td> </tr> </table> <input id="submit" type="submit" name="submit" value="Submit"> </form> </body> </html> 您正在使用HTML5button元素。 记住原因是这个button有一个默认的提交行为，正如在这里看到的W3规范所述： W3C的HTML5button
所以你需要明确指定它的types：
<button type="button">Button</button>
以覆盖默认的提交types。 我只想指出为什么会发生这种情况=）
=）
在button上设置types：
<button type="button" onclick="addItem(); return false;">Add Item</button> <button type="button" onclick="removeItem(); return false;">Remove Last Item</button>
…当事件处理程序发生exception时，它们不会触发提交操作。 然后，修复removeItem()函数，使其不触发exception：
function removeItem() { var rows = $('form tr'); if ( rows.length > 2 ) { // change: work on filtered jQuery object rows.filter(":last").html(''); $('form :hidden:last').val(''); } else { alert('Cannot remove any more rows'); } }
注意这个改变：你的原始代码从jQuery集合中提取了一个HTML元素，然后试图调用它的一个jQuery方法 – 这引发了一个exception，导致button的默认行为。
FWIW，还有另外一种方式可以使用这个…使用jQuery连接事件处理程序，并使用jQuery 事件对象上的preventDefault（）方法来取消默认的行为：
$(function() // execute once the DOM has loaded { // wire up Add Item button click event $("#AddItem").click(function(event) { event.preventDefault(); // cancel default behavior //... rest of add logic }); // wire up Remove Last Item button click event $("RemoveLastItem").click(function(event) { event.preventDefault(); // cancel default behavior //... rest of remove last logic }); }); ... <button type="button" id="AddItem" name="AddItem">Add Item</button> <button type="button" id="RemoveLastItem" name="RemoveLastItem">Remove Last Item</button>
这种技术将所有的逻辑保存在一个地方，使得debugging变得更容易…它还允许通过改变button的type来submit和处理事件服务器端来实现回退 – 这是已知的作为不显眼的JavaScript 。
前一段时间，我需要一些非常相似的东西…我明白了。
所以我在这里放置的是如何使用JavaScript来提交表单，而不必在用户按下button（通常是发送button）时不进行任何validation和执行validation。
对于这个例子，我将使用一个最小的窗体，只有两个字段和一个提交button。
记住想要的东西：从JavaScript中必须能够被提交而不需要任何检查。 但是，如果用户按下这样的button，则必须完成validation，并且只有在通过validation时才发送表单。
通常情况下，所有的东西都会从附近的东西开始（我删除了所有不重要的东西）：
<form method="post" id="theFormID" name="theFormID" action=""> <input type="text" id="Field1" name="Field1" /> <input type="text" id="Field2" name="Field2" /> <input type="submit" value="Send" onclick="JavaScript:return Validator();" /> </form>
看看表单标签没有onsubmit="..." （记住这是一个没有它的条件）。
问题是表单总是被提交，无论onclick返回true或false 。
如果我改变type="submit" type="button" ，它似乎工作，但没有。 它永远不会发送表单，但可以轻松完成。
所以最后我用这个：
<form method="post" id="theFormID" name="theFormID" action=""> <input type="text" id="Field1" name="Field1" /> <input type="text" id="Field2" name="Field2" /> <input type="button" value="Send" onclick="JavaScript:return Validator();" /> </form>
并在function Validator中return True; 是，我也添加了一个JavaScript提交句子，类似这样的：
function Validator(){ // ...bla bla bla... the checks if( ){ document.getElementById('theFormID').submit(); return(true); }else{ return(false); } }
id=""仅适用于JavaScript getElementById ， name=""仅用于在POST数据上显示。
在这样的方式，它按我的需要工作。
我把这个只是为了不需要onsubmit函数的表单上的人，但是当一个button被用户按下的时候做一些validation。
为什么我不需要在表单标签上提交？ 很简单，在其他JavaScript部分我需要执行一个提交，但我不希望有任何validation。
原因是：如果用户是执行提交我想要的，需要validation完成，但如果是JavaScript有时我需要执行提交，而这样的validation将避免它。
这可能听起来很奇怪，但是在思考例如：login…时有一些限制…不允许使用PHP会话，也不允许使用cookie！
所以任何链接都必须转换成这样的表单提交，所以login数据不会丢失。 当没有login时，它也必须工作。 所以不需要validation链接。 但是，如果用户没有input字段，用户名和密码，我想向用户显示一条消息。 所以，如果有人失踪，表格一定不能发送！ 有问题。
看到问题：只有当用户按下button时，一个字段为空的表单不能被发送，如果它是一个JavaScript代码，它必须能够被发送。
如果我在表单标签上进行onsubmit的工作，我需要知道是否是用户或其他JavaScript。 由于没有参数可以传递，所以不可能直接使用，所以有些人添加一个variables来告诉是否必须完成validation。 validationfunction的第一件事是检查variables值等等。太复杂，代码不能说真正想要的东西。
所以解决scheme是不要在窗体标签上提交。 Insead把它放在真正需要的地方，放在button上。
另一方面，为什么从概念上提交提交代码我不想提交validation。 我真的想要buttonvalidation。
不仅代码更加清晰，而且代码也是必须的。 只要记住这一点： – 我不希望JavaScript来validation表单（在服务器端必须始终由PHP完成） – 我想向用户显示一条消息，告诉所有字段不能为空，需要JavaScript（客户端侧）
那么为什么有些人（想想或告诉我）必须在一个确认的基础上完成呢？ 不，从概念上讲，我不是在客户端进行validation。 我只是做一个button按下，所以为什么不只是让这个被执行？
那么代码和风格完美的诀窍。 在我需要发送表单的任何JavaScript上，我只是说：
document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go document.getElementById('theFormID').submit(); // Send POST data and go there
而且，当我不需要它时跳过validation。 它只是发送表单并加载不同的页面等
但是，如果用户点击提交button（即type="button" not type="submit" ），则在提交表单之前进行validation，如果无效，则不发送。
那么希望这有助于他人不要尝试冗长复杂的代码。 如果不需要，就不要使用onsubmit ，并使用onclick 。 但是只要记得将type="submit"改为type="button" ，请不要忘了用JavaScript来做submit() 。
我同意Shog9，但我可能会使用：
<input type = "button" onClick="addItem(); return false;" value="Add Item" />
根据w3schools ， <button>标签在不同的浏览器上有不同的行为。
假设你的HTML表单有id="form_id"
<form id="form_id"> <!--your HTML code--> </form>
将这个jQuery代码片段添加到您的代码中以查看结果，
$("#form_id").submit(function(){ return false; });
$("form").submit(function () { return false; }); 这将防止button提交，或者你可以只是改变buttontypes为“button” <input type="button"/>而不是<input type="submit"/>这将只在该button不工作只有在这种forms的button。
这是一个html5的错误，就像已经说过的，你仍然可以将button作为一个提交（如果你想涵盖javascript和非javascript用户），像这样：
<button type="submit" onclick="return false"> Register </button>
这样你将取消提交，但仍然做任何你正在做的jQuery或JavaScript函数`并为没有JavaScript的用户提交。
我相信在FF上
removeItem
函数遇到一个JavaScript错误，这不会在IE上发生
当javascript错误出现时，“返回false”代码将不会运行，使页面回发
这是一个简单的方法：
$('.mybutton').click(function(){ /* Perform some button action ... */ alert("I don't like it when you press my button!"); /* Then, the most important part ... */ return false; });
return false;
您可以在函数结束或函数调用后返回false。
只要是最后发生的事情，表单将不会提交。
以下示例代码显示如何防止button从提交表单中单击。
你可以尝试我的示例代码：
<form autocomplete="off" method="post" action=""> <p>Title: <input type="text" /> </p> <input type="button" onclick="addItem()" value="Add Item"> <input type="button" onclick="removeItem()" value="Remove Last Item"> <table> <th>Name</th> <tr> <td> <input type="text" id="input1" name="input1" /> </td> <td> <input type="hidden" id="input2" name="input2" /> </td> </tr> </table> <input id="submit" type="submit" name="submit" value="Submit"> </form> <script language="javascript"> function addItem() { return false; } function removeItem() { return false; } </script>
我现在无法testing这个，但我想你可以使用jQuery的preventDefault方法。
函数removeItem实际上包含一个错误，这使得表单button成为默认行为（提交表单）。 在这种情况下，javascript错误控制台通常会提供一个指针。
查看javascript部分中的removeItem函数：
该行：
rows[rows.length-1].html('');
不起作用。 试试这个：
rows.eq(rows.length-1).html('');
