Intercept a form submit in JavaScript and prevent normal submission

by 
<form id="my-form">
    <input type="text" name="in" value="some data" />
    <button type="submit">Go</button>
</form>

In JS:

function processForm(e) {
    if (e.preventDefault) e.preventDefault();

    /* do what you want with the form */

    // You must return false to prevent the default form behavior
    return false;
}

var form = document.getElementById('my-form');
if (form.attachEvent) {
    form.attachEvent("submit", processForm);
} else {
    form.addEventListener("submit", processForm);
}

Edit: in my opinion, this approach is better than setting the onSubmit attribute on the form since it maintains separation of mark-up and functionality. But that’s just my two cents.

Edit2: Updated my example to include preventDefault()

More Related Contents:

  1. html form that passes information to a variable in javascript [closed]
  2. My form’s validate() is not working
  3. Stop form refreshing page on submit
  4. Submit form without page reloading
  5. Submit two forms with one button
  6. Adding input elements dynamically to form
  7. Submitting a form on ‘Enter’ with jQuery?
  8. JavaScript Form Submit – Confirm or Cancel Submission Dialog Box
  9. How can I set the form action through JavaScript?
  10. How to send a JSON object using html form data
  11. How to submit an HTML form without redirection
  12. Prevent form redirect OR refresh on submit?
  13. HTML form action and onsubmit issues
  14. passing form data to another HTML page
  15. Understanding HTML Form Element behavior
  16. Stop an input field in a form from being submitted
  17. Want HTML form submit to do nothing
  18. How to Call a JS function using OnClick event [duplicate]
  19. Enable/Disable submit button if checkbox is checked/unchecked?
  20. Change value of input and submit form in JavaScript
  21. How do you limit options selected in a html select box?
  22. Trigger autocomplete without submitting a form
  23. submit event does not fire if submit initiated programmatically
  24. Passing javascript variables between pages [duplicate]
  25. Angular form validation ng-disabled not working
  26. How to create dynamically
  27. How best to make a link submit a form
  28. Copy/Paste from Excel to a web page
  29. How can I void a form action and execute jQuery when all HTML form elements are validated?
  30. HTML form input tag name element array with JavaScript

Leave a Comment