Form not submitting with JS

Question

I have the worlds most simple javascript function:

fnSubmit()
{
  window.print();
  document.formname.submit();
}

Which is called by:

<button type="button" id="submit" onclick="fnSubmit()">Submit</button>

All is well and good, the print dialog shows up, however after printing or canceling the print I get the following error:

"document.formname.submit is not a function"

My form is defined as follows: (obviously I am not using formname in the actual code but you get the idea)

<form name="formname" id="formname" method="post" action="<?=$_SERVER['SCRIPT_NAME']?>">

Obviously I am not trying to do anything special here and I have used similar approaches in the past, what in the world am I missing here?

As a work around I did the following: Just display a print button which calls the print method, once the user has accomplished this then I show the submit button () and all its well. — niczak, Jun 24 '09 at 16:53

score 30 · Accepted Answer · edited May 23 '17 at 11:46

In short: change the id of your submit button to something different than "submit". Also, don't set the name to this value either.

Now, some deeper insight. The general case is that document.formname.submit is a method that, when called, will submit the form. However, in your example, document.formname.submit is not a method anymore, but the DOM node representing the button.

This happens because elements of a form are available as attributes of its DOM node, via their name and id attributes. This wording is a bit confusing, so here comes an example:

<form name="example" id="example" action="/">
  <input type="text" name="exampleField" />
  <button type="button" name="submit" onclick="document.example.submit(); return false;">Submit</button>
</form>

On this example, document.forms.example.exampleField is a DOM node representing the field with name "exampleField". You can use JS to access its properties such as its value: document.forms.example.exampleField.value.

However, on this example there is an element of the form called "submit", and this is the submit button, which can be accessed with document.forms.example.submit. This overwrites the previous value, which was the function that allows you to submit the form.

EDIT:

If renaming the field isn't good for you, there is another solution. Shortly before writing this, I left the question on the site and got a response in the form of a neat JavaScript hack:

function hack() {
  var form = document.createElement("form");
  var myForm = document.example;
  form.submit.apply(myForm);
}

See How to reliably submit an HTML form with JavaScript? for complete details

score 6 · Answer 2 · answered Jun 24 '09 at 00:20

6

Given that your form has both an id and a name defined, you could use either one of these:

With the form tag's id:

document.getElementById('formname').submit();

With the form tag's name attribute:

document.forms['formname'].submit();

answered Jun 24 '09 at 00:20

artlung

33,305
16
69
121

function fnSubmit() { window.print(); document.forms['frmTravel'].submit(); } Did not work either, I am really getting confused here. Both the form name and id are set to "frmTravel". – niczak Jun 24 '09 at 16:32
Do you have both opening and closing form tags? Do you have well-formed HTML? Do you have another JavaScript error on the page? Do you have another element named frmTravel? Hard to debug in isolation without seeing the whole page. Use Firefox's Error Console to see what errors and warnings are triggering. – artlung Jun 24 '09 at 18:33

score 5 · Answer 3 · answered Jun 24 '09 at 00:07

5

Try this:

fnSubmit()
{
  window.print();
  document.getElementById("formname").submit();
}

answered Jun 24 '09 at 00:07

Spencer Ruport

34,865
12
85
147

I absolutely know this *should* work but for some reason it just shows the print dialog and goes no where. – niczak Jun 24 '09 at 16:22
Then your issue is somewhere else in your code. Most likely an HTML tag that never gets closed. – Spencer Ruport Jun 24 '09 at 16:25
Unfortunately it passes validation perfectly so I don't think it is a mark up problem? – niczak Jun 24 '09 at 16:35
I wouldn't trust that. I'd save the client source and delete parts bit by bit until it works so I could narrow down what's making it croak. – Spencer Ruport Jun 24 '09 at 17:15

score 0 · Answer 4 · answered Jun 24 '09 at 04:08

0

The most likely culprit is IE confusing JavaScript variables, ids, and names. Search in your source for something sharing the name of your form.

answered Jun 24 '09 at 04:08

wombleton

8,336
1
28
30

The form has both it's name/id set to "frmTravel" -- nothing else on the form has this name/id. – niczak Jun 24 '09 at 16:36

score 0 · Answer 5 · edited Apr 02 '12 at 11:30

0

Place a input button inside your form.
Give tabindex="-1" on it.
Make It invisible using style="display:none;".

Like This

<input type="submit" tabindex="-1" style="display:none;" />

edited Apr 02 '12 at 11:30

dldnh

8,923
3
40
52

answered Apr 02 '12 at 08:20

Shyantanu

681
1
12
30

Form not submitting with JS

5 Answers5

Linked