Question

我有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元素时，为什么表单未提交？

Answer 1

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

如果您将其更改为

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

然后它会起作用。

Answer 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();">

表单未提交

2 个答案: