How to do something before on submit?

Question

i have a form which has a button that submits the form. I need to do something before submits happen. I tried doing onClick on that button but it happens after the submit.

I can't share the code but, generally, what should I do in jQuery or JS to handle this?

*cough* [jsFiddle Example](http://jsfiddle.net/XVAPa/) *cough* — Brad Christie, Nov 08 '11 at 16:08
@Brad Christie if only i could accept comment as an answer. Thanks very helpful. — Jimmy, Nov 14 '11 at 02:22
I hate it when stackover closes a question. You can handle your actions using the following events that fire on the following timing just before submitting a form: 1- onmouseover 2- onmousemove 3- onmousedown 4- onfocus 5- onmouseup 6- onclick 7- onsubmit — Shadi Namrouti, Feb 02 '17 at 23:24
I appreciate this question because I ran into the same problem just recently and this question is exactly what I wanted to ask. — wastetime909, Nov 03 '17 at 14:30
funny that this question got closed because its not a real question :-? — Anna Klein, Aug 16 '18 at 11:02
you don't have to share code. you can send in a sample of what you are asking. Or else why are you not able to solve your own problems alone? — webs, Dec 31 '19 at 13:24

score 219 · Accepted Answer · edited Sep 16 '16 at 19:36

219

If you have a form as such:

<form id="myform">
...
</form>

You can use the following jQuery code to do something before the form is submitted:

$('#myform').submit(function() {
    // DO STUFF...
    return true; // return false to cancel form action
});

edited Sep 16 '16 at 19:36

Jon Schneider

21,628
17
129
157

answered Nov 08 '11 at 16:07

Dan Breen

11,274
4
32
48

3

I'm having troubles using this for loops that have to be completed before the submit. Any suggestions? – Smilyan Jun 03 '13 at 08:58
Got any code to look at? Not sure I understand the problem. – Dan Breen Jun 03 '13 at 13:51
3

Why is this wrapped in an empty function call? Shouldn't the `submit` function be able to bind directly to the `$('#form')` without the surrounding empty function? EDIT: [the docs suggest that the surrounding function call is not needed](https://api.jquery.com/submit/#submit-eventData-handler). – eykanal Aug 01 '16 at 13:44
@eykanal Good point. I went ahead and edited the answer to remove the function wrapper after confirming that it does work fine with it removed. – Jon Schneider Sep 16 '16 at 19:37
3

@eykanal I used the "empty" function call, because that's a shorthand for jQuery's `$(document).ready()` function, which ensures the DOM is complete before attaching the `submit` event. If your JS is at the bottom of the page, it's not necessary, but if it's in the `` section then you need it. See: http://stackoverflow.com/q/13062246/135108 – Dan Breen Oct 05 '16 at 16:29

score 24 · Answer 2 · answered Nov 08 '11 at 16:08

Assuming you have a form like this:

<form id="myForm" action="foo.php" method="post">
   <input type="text" value="" />
   <input type="submit" value="submit form" />

</form>

You can attach a onsubmit-event with jQuery like this:

$('#myForm').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});

If you return false the form won't be submitted after the function, if you return true or nothing it will submit as usual.

See the jQuery documentation for more info.

score 12 · Answer 3 · answered Nov 08 '11 at 16:12

12

You can use onclick to run some JavaScript or jQuery code before submitting the form like this:

<script type="text/javascript">
    beforeSubmit = function(){
        if (1 == 1){
            //your before submit logic
        }        
        $("#formid").submit();            
    }
</script>
<input type="button" value="Click" onclick="beforeSubmit();" />

answered Nov 08 '11 at 16:12

James Johnson

43,670
6
67
106

19

But this doesn't work, when the form contains e.g. an input field an the user is hitting the return key which is firing the submit event. It's usually better to attach directly to the submit event so you can ensure it gets called regardless how the user fired the submission. – acme Nov 10 '11 at 09:49
2

– Ansyori Nov 06 '13 at 03:53

score 4 · Answer 4 · answered Nov 08 '11 at 16:07

4

make sure the submit button is not of type "submit", make it a button. Then use the onclick event to trigger some javascript. There you can do whatever you want before you actually post your data.

answered Nov 08 '11 at 16:07

rogerlsmith

6,166
2
18
25

4

The form can be submitted in a number of ways, such as pressing enter in certain fields. Binding to a click on one button that may not be clicked, is not a good idea. The other answers show how you bind `onsubmit` of the *form*, which will fire no matter how the form is submitted. – Jason Aug 11 '17 at 21:26

How to do something before on submit?

4 Answers4

Linked