Form Submit Execute JavaScript Best Practice

Question

I would like to run a JavaScript function when a form is submitted  The issue is that  when the form is submitted  the page is reloaded and the form values are appended to the URL as GET parameters  I would like it to stay on the current page and only run the JavaScript function   I was wondering what the best practice  or what you do  to avoid having the page reload and parameters be sent

User · Answer

Attach an event handler to the submit event of the form. Make sure it cancels the default action.

Quirks Mode has a guide to event handlers, but you would probably be better off using a library to simplify the code and iron out the differences between browsers. All the major ones (such as YUI and jQuery) include event handling features, and there is a large collection of tiny event libraries.

Here is how you would do it in YUI 3:

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
<script>
    YUI().use('event', function (Y) {
        Y.one('form').on('submit', function (e) {
            // Whatever else you want to do goes here
            e.preventDefault();
        });
    });
</script>

Make sure that the server will pick up the slack if the JavaScript fails for any reason.

User · Answer

Use the onsubmit event to execute JavaScript code when the form is submitted  You can then return false or call the passed event s preventDefault method to disable the form submission   For example    lt script gt  function doSomething         alert  Form submitted         return false     lt  script gt    lt form onsubmit  return doSomething     class  my-form  gt       lt input type  submit  value  Submit  gt   lt  form gt    This works  but it s best not to litter your HTML with JavaScript  just as you shouldn t write lots of inline CSS rules  Many Javascript frameworks facilitate this separation of concerns  In jQuery you bind an event using JavaScript code like so    lt script gt      my-form   on  submit   function          alert  Form submitted         return false       lt  script gt    lt form class  my-form  gt       lt input type  submit  value  Submit  gt   lt  form gt

User · Answer

I know it s a little late for this  But I always thought that the best way to create event listeners is directly from JavaScript  Kind of like not applying inline CSS styles   function validate          do stuff   function init        document getElementById  form   onsubmit   validate    window onload   init    That way you don t have a bunch of event listeners throughout your HTML

[javascript] Form Submit Execute JavaScript Best Practice?

Examples related to javascript

Examples related to html

Examples related to forms