Uncaught Error: document.myForm.submit(); is not a function - After 2nd call

Question

The autosubmit

document.myForm.submit();

works fine if I call it once, but I'm trying to call it multiple times and after 1st attempt, the other times give out an error

Uncaught Error: document.myForm.submit();

the code works 100% fine UNTIL I call more than once. Is this normal? How do I avoid it?

Research shows that most likely my form inputs are named Submit, which is not the case

I'm using Phonegap/Cordova:

function sendData()//Gets called once per second

{

    document.body.insertAdjacentHTML("afterend",



    '<form name=\"myForm\" action=\"http://www.mywebsite.com/formProcess.php\" method=\"POST\" target=\"submission.frame\">' +

    '<input type=\"text\"   name = "uuid" value=\"' + String(uuid)  + '\">' +

    '<input type=\"text\"   name = "directionX" value=\"' + String(directionX)  + '\">' +

    '<input type=\"text\"   name = "directionY" value=\"' + String(directionY)  + '\">' +

    '<iframe name=\"submission.frame\" hidden></iframe>'                                +

    '</form>'



    );



    document.myForm.submit();

}

Server PHP

<?php

//Do bunch of stuff

?>

<form name="myForm" action="<?php echo $current_file; ?>" method="POST">

UUID       <input type="text" name="uuid">      <br>

directionX <input type="text" name="directionX"><br>

directionY <input type="text" name="directionY"><br>

<input type="submit" value="Send">

</form>

Answer 1

The first time you call it, you add a form to the document and then document.myForm is that form element.

The second time you call it, you add another form (with the same name!) to the document and then document.myForm is an HTML Element Collection (which is an array-list object) containing two forms.

The collection doesn't have a submit method. The two elements inside it do.

You could compensate for that by testing to see if there is a submit method and then grabbing the last element in the collection if it fails…

if (document.myForm.submit) {
    document.myForm.submit();
} else {
    document.myForm[document.myForm.length - 1].submit();
}

… but it really looks like you would be better off just switching to use XMLHttpRequest instead of throwing forms and iframes into the document. Those are what we used before Microsoft came up with XMLHttpRequest in the late 90s for the Outlook web app.

Uncaught Error: document.myForm.submit(); is not a function - After 2nd call

Sign up