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?

Answer 1

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

Answer 2

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