javascript 提交和点击不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13839459/
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 and onclick not working together
提问by silly
<input type="submit" class="sub" onClick="exefunction2()" id="button">
When I click on the submit button onClickis not working. How can I fix this? I need to work this on submitting the form because onClickevent contains values.
当我点击提交按钮时onClick不起作用。我怎样才能解决这个问题？我需要在提交表单时进行此操作，因为onClick事件包含值。
回答by silly
The best way is to call you method on the form tag like this:
最好的方法是像这样在表单标签上调用你的方法：
<form onsubmit="return exefunction2();">
...
</form>
Returning falsewill not submit the form, truewill submit!
退货false不会提交表单，true会提交！
to post more data (builded with exefunction2) you can use this
要发布更多数据（使用 exefunction2 构建），您可以使用它
<script type="text/javascript">
function exefunction2(form) {
//add dynamic values
var dynValues = {
"val1": 1,
"val2": "bla"
};
for(var name in dynValues) {
//check if field exists
var input = null;
if(document.getElementsByName(name).length === 0) {
input = document.createElement('input');
input.setAttribute('name', name);
input.setAttribute('type', 'hidden');
form.appendChild(input);
}
else {
input = document.getElementsByName(name)[0];
}
input.setAttribute('value', dynValues[name]);
}
return true;
}
</script>
<form onsubmit="return exefunction2(this);">
<input type="submit" />
</form>
回答by MC Emperor
You can submit the form with Javascript.
您可以使用 Javascript 提交表单。
<form id="form_id" ...>
<input type="button" class="sub" onclick="exefunction2();" id="button">
The Javascript:
Javascript：
function exefunction2() {
...
document.forms["form_id"].submit();
}
回答by samdoj
W3 schools has a good explanation here: http://www.w3schools.com/js/js_validation.asp
W3学校在这里有很好的解释：http: //www.w3schools.com/js/js_validation.asp
Basically, submit waits for a return value from onClick before doing anything. You can wire up a confirm() request too, if you like. If the form validates, just write something like return confirm("continue"). It's an old question, but I hope it helps anyone who stumbles across it. Another big reason for failure is a bug in your script. Unfortunately, unless you are running a debugger in your browser, it is very difficult to know what if anything is crashing your script. Turning on your browser debugger can be helpful to trace any issues. In Chrome you can use CTRL-SHIFT-I for Windows or CMD-OPTION-I for Mac. If you pause on caught errors, you can find any syntax or fatal errors that are prematurely stopping your script.
基本上，提交在做任何事情之前等待来自 onClick 的返回值。如果您愿意，您也可以连接一个 confirm() 请求。如果表单通过验证，只需编写类似 return confirm("continue"). 这是一个老问题，但我希望它可以帮助任何偶然发现它的人。失败的另一个重要原因是脚本中的错误。不幸的是，除非您在浏览器中运行调试器，否则很难知道是否有任何东西使您的脚本崩溃。打开浏览器调试器有助于跟踪任何问题。在 Chrome 中，您可以使用 CTRL-SHIFT-I（Windows）或 CMD-OPTION-I（Mac）。如果您暂停捕捉到的错误，您可以找到任何过早停止脚本的语法或致命错误。
回答by Arindam Roychowdhury
Agreeing to @silly , I used the same idea . I am sharing the implementation. My objective was , to disable a button "Execute" which is used to submit a form , until a response is received , upon which , the "execute" button should be enabled again. I am using Flask .
同意@silly，我使用了相同的想法。我正在分享实施。我的目标是，禁用用于提交表单的按钮“执行”，直到收到响应，然后应再次启用“执行”按钮。我正在使用烧瓶。
My Form:
我的表格：
<form onsubmit="return disableExecuteButton();" method="POST" action="/dothis">
.....
</form>
My JS:
我的JS：
function disableExecuteButton(){
var executeButton = document.getElementById("executeButton");
executeButton.setAttribute("disabled","disabled");
return true;
}
function reactivateExecuteButton(){
var executeButton = document.getElementById("executeButton");
executeButton.setAttribute("disabled","enabled");
}
From Flask, I return:
从 Flask，我返回：
return render_template('result.html', message=message, error=error, html_content=result, history=session['actions_taken'], done=True)
The "done=True" , is what I use to indicate, that the response is received and we need to enable the button again.
"done=True" 是我用来表示收到响应并且我们需要再次启用按钮的内容。
To re enable the button:
要重新启用按钮：
{% if done %}
<script type="text/javascript">
reactivateExecuteButton()
</script>
{% endif %}
回答by danaketh
Try <form onSubmit="exefunction2()">.
试试<form onSubmit="exefunction2()">。
回答by Shivan Dragon
Well, I don't know if that's the "official" expected behavior, but that's how it works: a submit-type button will no longer submit if you add to it an onclick Javascript function. Just have the function also submit the form or have the function return false
好吧，我不知道这是否是“官方”预期的行为，但这就是它的工作原理：如果向其添加 onclick Javascript 函数，则提交类型按钮将不再提交。只需让函数也提交表单或让函数返回 false
回答by Eugenio Cuevas
Change the event to onsubmit, and return false to avoid the form to be submitted.
将事件改为onsubmit，返回false，避免表单被提交。
<input type="submit" class="sub" onsubmit="exefunction2();return false;" id="button">
