form action with javascript

by

Absolutely valid.

    <form action="javascript:alert('Hello there, I am being submitted');">
        <button type="submit">
            Let's do it
        </button>
    </form>
    <!-- Tested in Firefox, Chrome, Edge and Safari -->

So for a short answer: yes, this is an option, and a nice one. It says “when submitted, please don’t go anywhere, just run this script” – quite to the point.

A minor improvement

To let the event handler know which form we’re dealing with, it would seem an obvious way to pass on the sender object:

    <form action="javascript:myFunction(this)">  <!-- should work, but it won't -->

But instead of what would make sense, this will point to the Window object. Apparently javascript: links live in a separate scope. Therefore I’d suggest the following format, it’s only 13 characters more and works like a charm:

    <form action="javascript:;" onsubmit="myFunction(this)">  <!-- now you have it! -->

… now you can access the sender form properly. (You can write a simple “#” as action, it’s quite common – but it has a side effect of scrolling to the top when submitting.)

Again, I like this approach because it’s effortless and self-explaining. No “return false”, no jQuery/domReady, no heavy weapons. It just does what it seems to do. Surely other methods work too, but for me, this is The Way Of The Samurai.

A note on validation

Forms only get submitted if their onsubmit event handler returns something truthy, so you can easily run some preemptive checks:

    <form action="/something.php" onsubmit="return isMyFormValid(this)">

Now isMyFormValid will run first, and if it returns false, server won’t even be bothered. Needless to say, you will have to validate on server side too, and that’s the more important one. But for quick and convenient early detection this is fine.

More Related Contents:

  1. Best way to track onchange as-you-type in input type=”text”?
  2. How to reset a form using jQuery with .reset() method
  3. HTML input file selection event not firing upon selecting the same file
  4. How to build query string with Javascript
  5. Drop-down box dependent on the option selected in another drop-down box
  6. React input defaultValue doesn’t update with state
  7. How to hide form code from view code/inspect element browser?
  8. How to prevent page from reloading after form submit – JQuery
  9. Change the content of a div based on selection from dropdown menu
  10. HTML form with two submit buttons and two “target” attributes
  11. Javascript to Select Multiple options [closed]
  12. Regex for Umlaut
  13. Required attribute Not working with File input in Angular Js
  14. Getting an option text/value with JavaScript
  15. How to use JavaScript to change the form action [duplicate]
  16. Javascript – Stop form submit depending on ajax response [duplicate]
  17. Why does a FORM with one text INPUT submit on enter while one with two text INPUTs does not? [duplicate]
  18. Check if input is number or letter javascript
  19. prevent form submission (javascript)
  20. jQuery see if any or no checkboxes are selected
  21. Get content of span
  22. Submit pdf form fields to a HTTP POST request
  23. Dynamically expand height of input type “text” based on number of characters typed into field
  24. React – clearing an input value after form submit
  25. javascript: validate form before submit?
  26. Javascript number comparison fails
  27. How can I void a form action and execute jQuery when all HTML form elements are validated?
  28. .js.erb VS .js
  29. Clear form after submission with jQuery
  30. jquery serialize and multi select dropdown

Leave a Comment