Problem submitting form via JS

[Richard Dixson]

I have code that calls document.myFormName.submit() to submit a form
automatically via JavaScript. This works just fine.

However, if there is a button (or other form field element) on the form
named "submit", this results in a JS error saying that "the object doesn't
support this property or method". I think what is happening in this case is
that document.myFormName.submit() is then trying to call a method on the
form field element named "submit" instead of just submitting the form. As
mentioned earlier, this works if there is no form field element named
"submit" so apparently there is some sort of clash or conflict here.

Now I know what you are thinking - "hey, just don't create a form field
element named "suibmit" on the form or call it something else!".
Unfortunately I cannot control the submitted form itself. My code is sort
of like middleware in that other programmers post their forms into (they
post their forms into me, I intercept it and add somethings, and then use JS
to automatically resubmit the form). As such, I need to be able to submit
the form via JavaScript whether or not there is a field element named
"submit" and avoid this clash/conflict.

How can this be done? I'm thinking that perhaps there is a more formal
naming convention like document.something.something.submit() that would
explictly get to the form's submit method and avoid the possible clash with
a form field element that may be named "submit"? I need this to work with
all modern browsers so if the code is different for doing this in IE windows
vs. Netscape etc please let me know both ways.

Thanks!!

[Martin Honnen]

Richard Dixson wrote:

I have code that calls document.myFormName.submit() to submit a form
automatically via JavaScript. This works just fine.

However, if there is a button (or other form field element) on the form
named "submit", this results in a JS error saying that "the object doesn't
support this property or method". I think what is happening in this case is
that document.myFormName.submit() is then trying to call a method on the
form field element named "submit" instead of just submitting the form. As
mentioned earlier, this works if there is no form field element named
"submit" so apparently there is some sort of clash or conflict here.

While accessing elements by name is possible with
formElement.elements.elementName
or
formElement.elements['elementName']
there is no way to access the method of the name 'submit' if a form
control overwrites that method.
The only thing you could try is to store the method before it is
overwritten e.g.
<form name="formName" action="whatever.php">
<script type="text/javascript">
var newSubmitName = 'submit' + new Date().getTime();
document.forms.formName[newSubmitName] =
document.forms.formName.submit;
</script>
... inputs follow here ...
and then you use
document.forms.formName[newSubmitName]();
to submit the form. I think that should work but I have never tried
that. Let us know whether that works for you.

Another way to submit a form is to call the click method of a submit
button thus if you know or can ensure there is one e.g.
<input type="submit" name="submitButton">
then you can use
document.forms.formName.elements.submitButton.clic k()
to submit the form with script.

--

Martin Honnen
http://JavaScript.FAQTs.com/