Kha*_*npo 858 html javascript forms submit button
在下一页中,使用Firefox,删除按钮提交表单,但添加按钮不提交.如何阻止删除按钮提交表单？
<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>
Met*_*iel 1669
您正在使用HTML5按钮元素.请记住,原因是此按钮具有提交的默认行为,如W3规范中所述,如下所示: W3C HTML5 Button
所以你需要明确指定它的类型:
<button type="button">Button</button>
为了覆盖默认的提交类型.我只是想指出为什么会发生这种情况=)
=)
Sho*_*og9 591
在按钮上设置类型:
<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方法 - 这引发了异常,从而导致该按钮的默认行为.
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>
这种技术将您的所有逻辑保存在一个地方,使其更容易调试...它还允许您通过将type按钮更改回submit处理事件服务器端来实现回退- 这被称为不显眼的JavaScript.
z66*_*66z 30
前段时间我需要一些非常相似的东西......我明白了.
所以我在这里提出的是如何让一个表单能够通过JavaScript提交,而无需任何验证和执行验证,只有当用户按下按钮(通常是发送按钮)时.
对于示例,我将使用最小形式,仅使用两个字段和一个提交按钮.
记住需要的东西:从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=""仅仅是对JavaScript getElementById的name=""仅仅是它出现在POST数据.
这样就可以按照我的需要工作.
我把它onsubmit放在表单上不需要任何功能的人身上,但是当用户按下按钮时进行一些验证.
为什么我不需要在表单标签上提交onsubmit？很容易,在其他JavaScript部分我需要执行提交但我不希望有任何验证.
原因是:如果用户是执行我想要的提交并且需要完成验证的用户,但如果是JavaScript,有时我需要执行提交,而这样的验证将避免它.
这可能听起来很奇怪,但不是在考虑例如:登录...有一些限制......比如不允许使用PHP会话而且不允许使用cookie!
因此,任何链接都必须转换为此类表单提交,因此登录数据不会丢失.如果还没有登录,它也必须工作.因此,不必对链接执行验证.但是如果用户没有输入字段,用户和传递,我想向用户显示一条消息.因此,如果缺少一个,则不得发送表格!有问题.
查看问题:只有当用户按下按钮时,如果一个字段为空,则不能发送表单,如果是必须能够发送的JavaScript代码.
如果我onsubmit在表单标签上进行工作,我需要知道它是用户还是其他JavaScript.由于没有参数可以传递,因此无法直接传递,因此有些人会添加一个变量来判断是否必须进行验证.验证函数的第一件事是检查变量值等...太复杂而且代码没有说出真正想要的东西.
所以解决方案是不要在表单标签上提交onsubmit.Insead把它放在真正需要的地方,按钮上.
另一方面,为什么要提交代码,因为从概念上讲我不想提交onsubmit验证.我真的想要按钮验证.
不仅代码更清晰,它必须在哪里.请记住这一点: - 我不希望JavaScript验证表单(必须始终由服务器端的PHP完成) - 我想向用户显示一条消息,告诉所有字段不能为空,这需要JavaScript(客户端)侧)
那么为什么有些人(想想或告诉我)必须在onsumbit验证上完成？不,从概念上讲,我没有在客户端进行onsumbit验证.我只是在按下按钮时做了一些事情,那么为什么不让它实现呢？
那么代码和风格完美地完成了这个伎俩.在我需要发送表单的任何JavaScript上,我只是说:
document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there
当我不需要时,它会跳过验证.它只是发送表单并加载不同的页面等.
但是,如果用户单击提交按钮(也就是说type="button"没有type="submit"),则在提交表单之前完成验证,如果没有有效则不发送.
希望这有助于其他人不要尝试冗长而复杂的代码.onsubmit如果不需要,请不要使用,并使用onclick.但是,只记得改type="submit"到type="button"请不要忘记做submit()由JavaScript.
pou*_*def 27
我同意Shog9,尽管我可能改用:
<input type = "button" onClick="addItem(); return false;" value="Add Item" />
根据w3schools,<button>标签在不同的浏览器上有不同的行为.
Pra*_*shi 18
假设你的HTML表单有 id="form_id"
<form id="form_id">
<!--your HTML code-->
</form>
将此jQuery代码段添加到您的代码中以查看结果,
$("#form_id").submit(function(){
return false;
});
Ata*_*ani 15
您可以使用jQuery简单地获取按钮的引用,并阻止其传播,如下所示:
$(document).ready(function () {
$('#BUTTON_ID').click(function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
});});
Shi*_*ala 14
$("form").submit(function () { return false; });
这将阻止按钮提交,或者您只需将按钮类型更改为"按钮" <input type="button"/>而不是<input type="submit"/>
仅当此按钮不是此表单中的唯一按钮时才会起作用.
Mse*_*Ali 11
只需添加e.preventDefault();您的方法即可防止您的页面提交表单。
function myFunc(e){
e.preventDefault();
}
根据MDN 网络文档
Event 接口的 preventDefault() 方法告诉用户代理，如果未显式处理该事件，则不应像通常那样考虑其默认操作。事件继续像往常一样传播，除非它的侦听器之一调用
stopPropagation ()或stopImmediatePropagation ()，否则会终止传播。
Sae*_*eid 11
如果你有<input />
用它
<input type="button"/>
如果你有<button>btn</button>
用它
<button type="button">btn</button>
sag*_*its 10
这是一个html5错误,就像已经说过的那样,你仍然可以将按钮作为提交(如果你想覆盖javascript和非javascript用户)使用它,如:
<button type="submit" onclick="return false"> Register </button>
通过这种方式,您将取消提交,但仍然可以在jquery或javascript函数中执行任何操作,并为没有javascript的用户执行提交.
Sun*_*ule 10
返回 false 会阻止默认行为。但 return false 会中断额外点击事件的冒泡。这意味着如果在调用此函数后还有任何其他点击绑定，则其他人不会考虑。
<button id="btnSubmit" type="button">PostData</button>
<Script> $("#btnSubmit").click(function(){
// do stuff
return false;
}); </Script>
或者干脆你可以这样放
<button type="submit" onclick="return false"> PostData</button>
我确信在FF上
removeItem
函数遇到JavaScript错误,这不会发生在IE上
当javascript错误出现时,"return false"代码将不会运行,使页面回发
正常设置按钮，并使用event.preventDefault之类的。
<button onclick="myFunc(e)"> Remove </button>
...
...
In function...
function myFunc(e){
e.preventDefault();
}