Form not submitting with JS

javascript, onclick, submit

Solution

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

Problem

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?

Original source

Related problems