Form submitted using submit() from a link cannot be caught by onsubmit handler

by

To provide a reasonably definitive answer, the HTML Form Submission Algorithm item 5 states that a form only dispatches a submit event if it was not submitted by calling the submit method (which means it only dispatches a submit event if submitted by a button or other implicit method, e.g. pressing enter while focus is on an input type text element).

If no submit event is dispatched, then the submit handler won’t be called.

That is different to the DOM 2 HTML specification, which said that the submit method should do what the submit button does.

So if you want to use script to submit a form, you should manually call the submit listener. If the listener was added using addEventListener, then you’ll need to remember that and to call it since you can’t discover it by inspecting the form (as suggested below).

If the listener is set inline, or added to the DOM onsubmit property, you can do something like:

<form onsubmit="return validate(this);" ...>
  ...
</form>
<button onclick="doSubmit()">submit form</button>

<script>
function doSubmit() {
  var form = document.forms[0];

  if (form.onsubmit) {
    var result = form.onsubmit.call(form);
  }

  if (result !== false) {
    form.submit();
  }
}
</script>

Life is tougher if you need to pass parameters or do other things.

More Related Contents:

  1. submit event does not fire if submit initiated programmatically
  2. JavaScript code to stop form submission
  3. JavaScript: remove event listener
  4. How to debug JavaScript / jQuery event bindings with Firebug or similar tools?
  5. Why does forms with single input field submit upon pressing enter key in input
  6. Disable form auto submit on button click
  7. How to submit a form with JavaScript by clicking a link?
  8. How to convert Base64 String to javascript file object like as from file input form?
  9. HTML input type=file, get the image before submitting the form
  10. How to ensure a form field is submitted when it is disabled?
  11. Property ‘submit’ of object # is not a function
  12. Decoding URL parameters with JavaScript
  13. How to call function on child component on parent events
  14. Adding rows dynamically with jQuery
  15. HTML/JavaScript: Simple form validation on submit
  16. Handling “onclick” event with pure JavaScript
  17. XMLHttpRequest to Post HTML Form
  18. How to unbind a specific event handler
  19. Dynamically creating a specific number of input form elements
  20. Preserve ‘this’ reference in javascript prototype event handler [duplicate]
  21. Set the default value of an input field
  22. submitting a form when a checkbox is checked
  23. Posting parameters to a url using the POST method without using a form
  24. React – clearing an input value after form submit
  25. Handling standby on iPad using Javascript
  26. javascript: validate form before submit?
  27. Javascript number comparison fails
  28. javascript click event handler fires without clicking
  29. .js.erb VS .js
  30. jquery serialize and multi select dropdown

Leave a Comment