提交和点击不一起工作答案

【问题标题】：Submit and onclick not working together提交和点击不一起工作
【发布时间】：2012-12-12 12:08:10
【问题描述】：

<input type="submit" class="sub" onClick="exefunction2()" id="button">

当我点击提交按钮时，onClick 不起作用。我怎样才能解决这个问题？我需要在提交表单时进行此操作，因为onClick 事件包含值。

【问题讨论】：

标签： javascript html

【解决方案1】：

最好的方法是像这样在表单标签上调用你的方法：

<form onsubmit="return exefunction2();">
...
</form>

返回false不会提交表单，true会提交！

要发布更多数据（使用 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>

【讨论】：

我必须在表单中发布内容，JavaScript函数返回的值可以吗？

【解决方案2】：

W3学校在这里有很好的解释：http://www.w3schools.com/js/js_validation.asp

基本上，submit 会在执行任何操作之前等待 onClick 的返回值。如果你愿意，你也可以连接一个 confirm() 请求。如果表单验证通过，只需编写类似return confirm("continue") 的内容。这是一个老问题，但我希望它可以帮助任何偶然发现它的人。失败的另一个重要原因是脚本中的错误。不幸的是，除非您在浏览器中运行调试器，否则很难知道是否有任何东西使您的脚本崩溃。打开浏览器调试器有助于跟踪任何问题。在 Chrome 中，您可以使用 CTRL-SHIFT-I 用于 Windows 或 CMD-OPTION-I 用于 Mac。如果您在捕获的错误上暂停，您会发现任何过早停止脚本的语法或致命错误。

【讨论】：

【解决方案3】：

您可以使用 Javascript 提交表单。

<form id="form_id" ...>
<input type="button" class="sub" onclick="exefunction2();" id="button">

Javascript：

function exefunction2() {
    ...
    document.forms["form_id"].submit();
}

【讨论】：

【解决方案4】：

好吧，我不知道这是否是“官方”预期的行为，但这就是它的工作原理：如果您向其添加 onclick Javascript 函数，则提交类型的按钮将不再提交。只需让函数也提交表单或让函数返回 false

【讨论】：

【解决方案5】：

试试<form onSubmit="exefunction2()">。

【讨论】：

【解决方案6】：

同意@silly，我使用了相同的想法。我正在分享实施。我的目标是，禁用用于提交表单的“执行”按钮，直到收到响应，然后再次启用“执行”按钮。我正在使用 Flask 。

我的表单：

<form onsubmit="return disableExecuteButton();" method="POST" action="/dothis">
.....
</form>

我的 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");
}

我从 Flask 回来：

return render_template('result.html', message=message, error=error, html_content=result, history=session['actions_taken'], done=True)

"done=True" 是我用来表示已收到响应并且我们需要再次启用该按钮的意思。

重新启用按钮：

{% if done %}
    <script type="text/javascript">
        reactivateExecuteButton()
    </script>
{% endif %}

【讨论】：

【解决方案7】：

将事件改为onsubmit，返回false避免表单提交。

<input type="submit" class="sub" onsubmit="exefunction2();return false;" id="button">

【讨论】：

<input> 上的 onsubmit 没有任何作用。 onsubmit 是 <form> 事件。