表单未提交答案

【问题标题】：form is not getting submitted表单未提交
【发布时间】：2014-01-18 04:07:54
【问题描述】：

我有一个HTML form：

<form name="myForm" method="post" id="myForm" action="ACTION_URL_HERE">
    <input type="hidden" name="txt1" id="txt1">
    <input type="hidden" name="txt2" id="txt2">
    <input type="hidden" name="txt3" id="txt3">
    <input type="submit" name="submit" value="Submit">
</form>
<input type="button" value="Submit form" onclick="MyFunction();">

我在以下函数中填写表单中 3 个隐藏字段中的值后提交表单。

function MyFunction()
{
    var isValid="";
    $.post('ServletURL',{action: "getData"}).done(function(data)
    {
        $.each(data, function(index, text) 
        {
            if(index==0)
                isValid=text;
            if(isValid=="OK")
            {
                if(index==1)
                    $("#txt1").val(text);
                if(index==2)
                    $("#txt2").val(text);
                if(index==3)
                {
                    $("#txt3").val(text);
                    alert("Before form submit...");
                    document.getElementById('myForm').submit();
                    alert("Form is submited.");
                }
            }
        });
    });
}

MyFunction() 工作正常，只是它没有提交表单。我可以看到警报alert("Before form submit...");，但看不到第二个警报alert("Form is submited.");。

然后我从表单中删除了以下不必要的submit 按钮：

<input type="submit" name="submit" value="Submit">

然后代码工作正常，表单正在提交。

我的问题是，当表单中有submit 元素时，为什么没有提交表单？

【问题讨论】：

@Barmar $.post 调用是在隐藏字段中填充值，myForm 有不同的action。（请参阅 html 表单中的ACTION_URL_HERE）。
Property 'submit' of object #<HTMLFormElement> is not a function的可能重复
你为什么没有提到你在 Javascript 控制台中遇到了那个错误？如果你没有检查控制台，为什么不呢？当 JS 没有按预期工作时，这应该是你的第一步，发布到 SO 是最后的手段。
@Barmar 感谢您的建议。我会确保在发布问题之前检查控制台。

标签： javascript jquery html

【解决方案1】：

原因是您提交按钮的名称是submit。表单中的所有输入都成为表单元素的属性，因此document.getElementById('myForm').submit 是<input> 元素，而不是函数。

如果你改成

<input type="submit" name="somethingElse" value="Submit">

然后它会工作。

【讨论】：

【解决方案2】：

将您的 html 更改为：您有一个名为 submit 的表单元素。只需将其重命名为 othar（我已将其重命名为 sumit2）。

<form name="myForm" method="post" id="myForm" action="ACTION_URL_HERE">
        <input type="hidden" name="txt1" id="txt1">
        <input type="hidden" name="txt2" id="txt2">
        <input type="hidden" name="txt3" id="txt3">
        <input type="submit" name="submit2" value="Submit">
    </form>
    <input type="button" value="Submit form" onclick="MyFunction();">

【讨论】：