Form onsubmit doesn't work with form .submit()

Question

I have a form and I have applied a function onsubmit:

var theForm = document.getElementById("myform");
theForm.onsubmit = function FormSubmit() {
alert("something");
};

I have added in my form a submit button <input type="submit" value="submit"/>

The something text is alerted. Great!

I have an image and I want to make it to submit the form:

<img onclick="document.getElementById('myform').submit();" src="mylocation"/>

But it doesn't make the function... it doesn't alert something on screen.

EDIT: I don't want something with jQuery. Pure JS

Answer 1

Event handlers are only run in response to user actions or asynchronous events, not normal program actions like calling form.submit() . One reason for this is that it's not uncommon for the submit handler of a form to do some work and then call form.submit() , and this would cause an infinite recursion if it triggered the handler again.

Put the code you want to run in a named function:

function mySubmit() {
    alert("something");
}

theForm.onsubmit = function() {
    mySubmit();
};

Then you can call that function in your click handler:

<img onclick="mySubmit(); document.getElementById('myform').submit();" src="mylocation"/>

Answer 2

The problem is event handlers doesn't respond when the event called by script.

Say like bellow

  var theForm = document.getElementById("myform");
  function FormSubmit() {
    alert("something");
  };
  theForm.onsubmit = FormSubmit;

And call manually the function onclick of image like bellow

<img onclick="FormSubmit();document.getElementById('myform').submit();" src="mylocation"/>

Answer 3

You can use an a tag around your image, something like this:

<a href="javascript://" onClick="document.getElementById('myform').submit();">
  <img src="mylocation" />
</a>