form is not getting submitted

Question

I have a 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();">

I am submitting the form after filling the values in 3 hidden fields in the form in following function.

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() is working perfectly, except that it is not submitting the form. I can see the alert alert("Before form submit...");, but can't see the second alert alert("Form is submited.");.

Then I have removed following submit button from the form which was unnecessary:

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

Then the code is working fine, and form is getting submitted.

My question is that why form was not getting submitted when there was submit element in the form?

@Barmar `$.post` call is to fill values in hidden fields, `myForm` has different `action`. (please see `ACTION_URL_HERE` in the html form). — Bhushan, Dec 31 '13 at 07:38
possible duplicate of [Property 'submit' of object # is not a function](http://stackoverflow.com/questions/12540953/property-submit-of-object-htmlformelement-is-not-a-function) — Barmar, Dec 31 '13 at 07:49
Why didn't you mention that you got that error in the Javascript console? If you didn't check the console, why not? That should be your first step when JS isn't working as expected, posting to SO is the last resort. — Barmar, Dec 31 '13 at 07:50
@Barmar Thanks for your suggestion. I will make sure in future to check console, before posting question. — Bhushan, Dec 31 '13 at 08:09

score 1 · Answer 1 · answered Dec 31 '13 at 07:47

The reason is that the name of your submit button was submit. All the inputs in a form become properties of the form element, so document.getElementById('myForm').submit is the <input> element, not a function.

If you change it to

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

then it will work.

score 0 · Accepted Answer · answered Dec 31 '13 at 07:45

Change your html to: You have a form element with the name submit. Just rename it to othar(i have renamed it to 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();">

form is not getting submitted

2 Answers2