javascript javascript表单提交不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21911808/
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
javascript form submit not working
提问by user2963178
As according to the advice at Prevent form redirect OR refresh on submit?, I have my form which is
根据防止表单重定向或刷新提交的建议？，我的表格是
<form id="editingForm">
Line height (between 10 and 60):
<input type="number" id="LineHeightEntry" name="LineHeightEntry" min="10" max="60" value="30">
<input type="submit" id="submitLineChange" value="Submit">
</form>
In a file called test.html. The javascript is
在名为 test.html 的文件中。javascript是
$('#editingForm').submit(function(){
alert("abc");
return false;
});
The intent is to have the function be called, and then javascript can do something to the page, but the page is not reloaded or redirected elsewhere. However, instead what I get is say I set LineHeightEntry to 40 and hit submit. Then it redirects to test.html?LineHeightEntry=40. Why does it do that?
目的是调用函数，然后 javascript 可以对页面做一些事情，但页面不会重新加载或重定向到其他地方。然而，我得到的是说我将 LineHeightEntry 设置为 40 并点击提交。然后它重定向到 test.html?LineHeightEntry=40。为什么这样做？
edit - The file is at http://probuling.net/sandbox/test.html
编辑 - 该文件位于http://probuling.net/sandbox/test.html
回答by Julien Greard
Here is a working example:
这是一个工作示例：
<html>
<head>
<script src="jquery-1.9.1.min.js"></script>
</head>
<form id="editingForm" action="toto">
Line height (between 10 and 60):
<input type="number" id="LineHeightEntry" name="LineHeightEntry" min="10" max="60" value="30">
<input type="submit" id="submitLineChange" value="Submit">
</form>
<script>
$('#editingForm').submit(function(event)
{
alert("abc");
event.preventDefault(); // if you want to disable the action
return false;
});
</script>
</html>
回答by juminoz
Add action attribute to the form or you are just refreshing the page on submit.
向表单添加 action 属性，或者您只是在提交时刷新页面。
<form id="editingForm" action="/another/url">
I would recommend learning how to use normal form submit before even try using Javascript. Any input with name attribute will be appended to the URL since you have no action and default method is set to GET.
我建议在尝试使用 Javascript 之前学习如何使用普通表单提交。任何具有 name 属性的输入都将附加到 URL，因为您没有操作并且默认方法设置为 GET。
回答by vadim.zhiltsov
remove line return false;
删除行返回假；
This prevent default event. Read more detail: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
这可以防止默认事件。阅读更多详细信息：http: //fuelyourcoding.com/jquery-events-stop-misusing-return-false/
回答by PatAtCP
try doing it without jQuery. Also, try using the event.preventDefault
尝试在没有 jQuery 的情况下进行。另外，尝试使用 event.preventDefault
document.querySelector('#editingForm').onsubmit = function(event) {
alert('abc');
event.preventDefault();
return false;
};
