Javascript 使用 jquery 在点击事件上提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6299456/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
submit form on click event using jquery
提问by MatthewLee
So can someone please tell why neither of these options will actually submit the form? I am trying to do something more complicated but I have boiled it down to this to try and figure out why I can't seem to get this form to submit using a click event and submit()
那么有人可以告诉为什么这些选项都不会真正提交表单吗？我正在尝试做一些更复杂的事情，但我已将其归结为这一点，以尝试弄清楚为什么我似乎无法使用单击事件和 submit() 提交此表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#submitButton').click(function(e) {
e.preventDefault();
$("#testForm").submit();
});
$('#submitLink').click(function(e) {
e.preventDefault();
$("#testForm").submit();
});
});
</script>
</head>
<body>
<form action="javascript:alert('submitted');" method="post" id="testForm">
<label>Name</label>
<input type="text" name="name" value="" />
<input type="submit" name="submit" value="Submit" id="submitButton" />
<p><a href="#" id="submitLink">Submit Form</a></p>
</form>
</body>
</html>
Thank you!
谢谢！
采纳答案by bpeterson76
If you have a form action and an input type="submit"inside form tags, it's going to submit the old fashioned wayand basically refresh the page. When doing AJAX type transactions this isn't the desired effect you are after.
如果您有表单操作和type="submit"表单标签内的输入，它将以老式方式提交并基本上刷新页面。在执行 AJAX 类型的事务时，这不是您想要的效果。
Remove the action. Or remove the form altogether, though in cases it does come in handy to serialize to cut your workload. If the form tags remain, move the button outside the form tags, or alternatively make it a link with an onclick or click handler as opposed to an input button. Jquery UI Buttons works great in this case because you can mimic an input button with an a tag element.
删除操作。或者完全删除表单，但在某些情况下，序列化以减少您的工作量确实会派上用场。如果表单标签仍然存在，请将按钮移到表单标签之外，或者将其设置为带有 onclick 或 click 处理程序的链接，而不是输入按钮。Jquery UI Buttons 在这种情况下效果很好，因为您可以使用 a 标记元素模拟输入按钮。
回答by Kevin Mansel
it's because the name of the submit button is named "submit", change it to anything but "submit", try "submitme" and retry it. It should then work.
这是因为提交按钮的名称被命名为“submit”，将其更改为“submit”以外的任何内容，尝试“submitme”并重试。然后它应该工作。
回答by MillsJROSS
Why not simply use the submit button to run the code you want. If your function returns false, it will cancel the submission.
为什么不简单地使用提交按钮来运行您想要的代码。如果您的函数返回 false，它将取消提交。
$("#testForm").submit(function() {
/* Do Something */
return false;
});
回答by Gurudath BN
Using jQuery button click
使用 jQuery 按钮单击
$('#button_id').on('click',function(){
$('#form_id').submit();
});
回答by tomahaug
Do you need to post the the form to an URL or do you only need to detect the submit-event? Because you can detect the submit-event by adding onsubmit="javascript:alert('I do also submit');"
您需要将表单发布到 URL 还是只需要检测提交事件？因为您可以通过添加来检测提交事件onsubmit="javascript:alert('I do also submit');"
<form action="javascript:alert('submitted');" method="post" id="testForm" onsubmit="javascript:alert('I do also submit');">...</form>
Not sure that this is what you are looking for though.
不确定这是否是您要查找的内容。
