How to prevent buttons from submitting forms
在下一页中,使用Firefox,删除按钮提交表单,但添加按钮不提交。 如何阻止删除按钮提交表单?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <html> <head> <script type="text/javascript" src="jquery-1.3.2.min.js"> <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'); } } </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> |
您正在使用HTML5按钮元素。请记住,原因是此按钮具有提交的默认行为,如W3规范中所述,如下所示:
W3C HTML5按钮
所以你需要明确指定它的类型:
1 | <button type="button">Button</button> |
为了覆盖默认的提交类型。我只是想指出为什么会发生这种情况=)
=)
在按钮上设置类型:
1 2 | <button type="button" onclick="addItem(); return false;">Add Item</button> <button type="button" onclick="removeItem(); return false;">Remove Last Item</button> |
...当事件处理程序发生异常时,它们将阻止它们触发提交操作。然后,修复
1 2 3 4 5 6 7 8 9 10 | 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方法 - 这引发了异常,从而导致该按钮的默认行为。
FWIW,还有另外一种方法可以解决这个问题...使用jQuery连接事件处理程序,并使用jQuery事件对象上的preventDefault()方法预先取消默认行为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $(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> |
这种技术将您的所有逻辑保存在一个位置,使其更容易调试...它还允许您通过将按钮上的
前段时间我需要一些非常相似的东西......我明白了。
所以我在这里提出的是如何让一个表单能够通过JavaScript提交,而无需任何验证和执行验证,只有当用户按下按钮(通常是发送按钮)时。
对于示例,我将使用最小形式,仅使用两个字段和一个提交按钮。
记住想要的东西:
从JavaScript开始,它必须能够在没有任何检查的情况下提交。但是,如果用户按下这样的按钮,则必须完成验证并且仅在通过验证时发送表单。
通常所有人都会从这附近的东西开始(我删除了所有额外的东西并不重要):
1 2 3 4 5 | <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> |
看看form标签没有
问题是,无论
如果我为
所以最后我用了这个:
1 2 3 4 5 | <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> |
在
1 2 3 4 5 6 7 8 9 | function Validator(){ // ...bla bla bla... the checks if( ){ document.getElementById('theFormID').submit(); return(true); }else{ return(false); } } |
这样就可以按照我的需要工作。
我把它放在表单上不需要
为什么我不需要在表单标签上提交onsubmit?很容易,在其他JavaScript部分我需要执行提交但我不希望有任何验证。
原因是:如果用户是执行我想要的提交并且需要完成验证的用户,但如果是JavaScript,有时我需要执行提交,而这样的验证将避免它。
这可能听起来很奇怪,但不是在考虑例如:登录...有一些限制......比如不允许使用PHP会话而且不允许使用cookie!
因此,任何链接都必须转换为此类表单提交,因此登录数据不会丢失。
如果还没有登录,它也必须工作。因此,不必对链接执行验证。
但是如果用户没有输入字段,用户和传递,我想向用户显示一条消息。因此,如果缺少一个,则不得发送表格!有问题。
查看问题:只有当用户按下按钮时,如果一个字段为空,则不能发送表单,如果是必须能够发送的JavaScript代码。
如果我在表单标记上的
所以解决方案是不要在表单标签上提交onsubmit。 Insead把它放在真正需要的地方,按钮上。
另一方面,为什么要提交代码,因为从概念上讲我不想提交onsubmit验证。我真的想要按钮验证。
不仅代码更清晰,它必须在哪里。记住这个:
- 我不希望JavaScript验证表单(必须始终由服务器端的PHP完成)
- 我想向用户显示一条消息,告诉所有字段不能为空,需要JavaScript(客户端)
那么为什么有些人(想想或告诉我)必须在onsumbit验证上完成?不,从概念上讲,我没有在客户端进行onsumbit验证。我只是在按下按钮时做了一些事情,那么为什么不让它实现呢?
那么代码和风格完美地完成了这个伎俩。在我需要发送表单的任何JavaScript上,我只是说:
1 2 | document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go document.getElementById('theFormID').submit(); // Send POST data and go there |
当我不需要时,它会跳过验证。它只是发送表单并加载不同的页面等。
但是,如果用户单击提交按钮(又名
希望这有助于其他人不要尝试冗长而复杂的代码。如果不需要,请不要使用
好。
我同意Shog9,尽管我可能改用:
1 | <input type ="button" onClick="addItem(); return false;" value="Add Item" /> |
根据w3schools,
假设您的HTML表单有
1 2 3 | <form id="form_id"> <!--your HTML code--> </form> |
将此jQuery代码段添加到您的代码中以查看结果,
1 2 3 | $("#form_id").submit(function(){ return false; }); |
您可以使用jQuery简单地获取按钮的引用,并阻止其传播,如下所示:
1 2 3 4 5 6 7 8 9 | $(document).ready(function () { $('#BUTTON_ID').click(function(e) { e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); return false; });}); |
这将阻止按钮提交,或者您只需将按钮类型更改为"按钮"
只有在此按钮不是此表单中的唯一按钮时才能使用。
这是一个html5错误,就像已经说过的那样,你仍然可以将按钮作为提交(如果你想覆盖javascript和非javascript用户)使用它,如:
1 | <button type="submit" onclick="return false"> Register </button> |
这样你就可以取消提交,但仍然可以在jquery或javascript函数中执行任何操作,并为没有javascript的用户执行提交。
我确信在FF上
1 | removeItem |
函数遇到JavaScript错误,这不会发生在IE上
当javascript错误出现时,"return false"代码将不会运行,使页面回发
Set your button in normal way and use event.preventDefault like..
1 2 3 4 5 6 7 8 9 | <button onclick="myFunc(e)"> Remove </button> ... ... In function... function myFunc(e){ e.preventDefault(); } |
1 | return false; |
您可以在函数末尾或函数调用后返回false。
只要它是最后发生的事情,表单就不会提交。
return false可防止默认行为。但返回false会打破其他点击事件的冒泡。这意味着在调用此函数后,如果有任何其他点击绑定,则其他人不会考虑。
1 2 3 4 5 | <button id="btnSubmit" type="button">PostData</button> $("#btnSubmit").click(function(){ // do stuff return false; }); |
或者只是你可以像这样
1 | <button type="submit" onclick="return false"> PostData</button> |
这是一个简单的方法:
1 2 3 4 5 6 7 8 9 | $('.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; }); |
只需在方法中添加
1 2 3 | function myFunc(e){ e.preventDefault(); } |
根据MDN Web Docs
The preventDefault () method of the Event interface tells the user
agent that if the event is not explicitly processed, its default
action should not be taken into account as it would normally be. The
event continues to propagate as usual, unless one of its listeners
callsstopPropagation () orstopImmediatePropagation () , either of
which terminates the propagation.
以下示例代码显示如何防止按钮单击提交表单。
您可以尝试我的示例代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <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; } |
我现在无法测试,但我认为你可以使用jQuery的preventDefault方法。
函数removeItem实际上包含一个错误,这使得表单按钮执行它的默认行为(提交表单)。在这种情况下,javascript错误控制台通常会给出一个指针。
查看javascript部分中的函数removeItem:
这条线:
1 | rows[rows.length-1].html(''); |
不起作用。试试这个:
1 | rows.eq(rows.length-1).html(''); |