如何防止按钮提交表单
如何防止按钮提交表单
在下面的页面中，使用Firefox，Remove按钮提交表单，但是Add按钮没有提交表单。如何防止“删除”按钮提交表单？
<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>
ITMISS3回答
-
侃侃无极
您正在使用HTML 5按钮元素。请记住，原因是该按钮具有默认的提交行为，如W3规范中所述，如下所示：W3C HTML 5按钮因此，您需要显式地指定它的类型：<button type="button">Button</button>以覆盖默认提交类型。我只想指出发生这种情况的原因=) -
largeQ
在按钮上设置类型：<button type="button" onclick="addItem(); return false;">Add Item</button><button type="button" onclick="removeItem(); return false;"> Remove Last Item</button>.这将防止它们在事件处理程序中发生异常时触发提交操作。然后，修复你的removeItem()函数，以便它不会触发异常：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方法-这会抛出一个异常，从而导致按钮的默认行为。还有另一种方法你可以用这个.。使用jQuery连接事件处理程序，并使用预防性Default()方法在jQuery的事件对象以取消默认行为：$(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>这种技术将所有的逻辑保存在一个地方，使调试变得更容易.它还允许您通过更改type在按钮上submit和处理事件服务器端-这称为低调的JavaScript. -
白衣染霜花
不久前我需要一些类似的东西.。我明白了。因此，我在这里介绍的是如何使用技巧，使一个表单能够由JavaScript提交，而不需要在用户按下按钮(通常是发送按钮)时才能验证和执行验证。例如，我将使用一个最小的表单，只有两个字段和一个Submit按钮。记住我们想要的东西：从JavaScript，它必须能够在没有任何检查的情况下提交。但是，如果用户按下这样的按钮，验证必须完成，只有通过验证才能发送表单。通常情况下，所有这些都是从附近开始的(我删除了所有不重要的额外内容)：<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=""只是为了JavaScriptgetElementById，name=""只是为了让它出现在帖子数据上。在这样的道路上，它的工作，我需要。我只是为了不需要的人onsubmit函数，但在用户按下按钮时进行一些验证。为什么我不需要在表格标签上提交？很简单，在其他JavaScript部件上，我需要执行一个Submit，但我不希望有任何验证。原因是：如果用户执行我想要的提交，并且需要进行验证，但如果是JavaScript，有时我需要执行Submit，而这样的验证会避免提交。这听起来可能很奇怪，但在思考的时候-例如：在一个登录上.有一些限制.。比如不允许使用PHP会话，也不允许使用cookie！因此，任何链接都必须转换为这样的表单提交，这样登录数据就不会丢失。当还没有登录时，它也必须工作。因此，必须对链接执行任何验证。但是，如果用户没有同时输入用户和PASS两个字段，我想向用户显示一条消息。因此，如果一个人失踪，该表格不得发送！这就是问题所在。请参见问题：只有当用户按下按钮时，只有当一个字段为空时才发送表单；如果是JavaScript代码，则必须能够发送表单。如果我在onsubmit在Form标记上，我需要知道它是用户还是其他JavaScript。由于没有任何参数可以通过，所以不可能直接传递，因此有些人添加了一个变量来判断是否必须进行验证。验证函数的第一件事是检查变量值，等等.太复杂了，代码没有说出真正想要的东西。因此，解决方案是在表单标记上不包含onSubmit。INSEAD把它放在真正需要的地方，放在按钮上。另一方面，为什么要放置onSubmit代码，因为在概念上我不需要onSubmit验证。我真的想要按钮验证。不仅代码更清晰，而且它必须在哪里。请记住：-我不希望JavaScript验证表单(必须始终由PHP在服务器端完成)-我想向用户显示一条消息，告诉用户所有字段都不能是空的，这需要JavaScript(客户端)那么，为什么有些人(想想或告诉我)必须通过一次性验证来完成呢？不，从概念上讲，我不是在客户端进行一次性验证。我只是在按下按钮，所以为什么不让它实现呢？好吧，这种代码和风格完美地发挥了作用。在我需要发送的任何JavaScript上，我刚刚放置的表单：document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to godocument.getElementById('theFormID').submit(); // Send POST data and go there当我不需要它时，它会跳过验证。它只发送表单并加载不同的页面，等等。但是如果用户单击Submit按钮(也就是type="button"不type="submit")验证是在允许提交表单之前完成的，如果不有效，则不发送。希望这有助于其他人不要尝试冗长而复杂的代码。只是不使用onsubmit如果不需要，并使用onclick。但记住要改变type="submit"到type="button"请不要忘记submit()用JavaScript写的。
随时随地看视频慕课网APP
JavaScript
Html/CSS