Execute Javascript function before submitting the form

Question

I have the following spring form that execute back end controller and JavaScript function, everything work but I need to execute JavaScript function before submitting the form. How to do that?

The following code submit the form before execute JavaScript.

<form:form modelAttribute="api" id="form">
                <form:textarea path="text" class="form-control" rows="10" id="redacttext"/>
                <button type="submit" class="btn btn-default">Submit</button>
 </form:form>

Javascript function

function dosomething() {
 //do something 
}

Execute javascript function by jquery

$('#form').submit(function() {
      dosomething();
  });

Um, that will run the code before submitting the form. Just probably no time to see it before it submits. What exactly are you trying to achieve? — Matt Fletcher, Nov 23 '17 at 15:44
I'm not sure if I understood this right but maybe you can use PreventDefault() when the user click on the submit button then call your function then submit the form if you want. — Oli Crt, Nov 23 '17 at 15:45
Yes you can prevent default and then submit the form. But this is only useful if you're doing something asynchronously. The OP doesn't mention what `doSomething()` is. But if it's synchronous, it will run before the form is submitted, but you'll probably just realise it's happened. — Matt Fletcher, Nov 23 '17 at 16:10
Possible duplicate of [Jquery function BEFORE form submission](https://stackoverflow.com/questions/21938788/jquery-function-before-form-submission) — Matt Fletcher, Nov 23 '17 at 16:16
Also this is an age-old question that's been asked and answered a million times on this site and across the internet, for example: https://stackoverflow.com/questions/21938788/jquery-function-before-form-submission - the answers there are generally much better than here too — Matt Fletcher, Nov 23 '17 at 16:17

Abid Nawaz · Answer 1 · 2017-11-23T16:16:52.277

11

here is the working example.

$('#submit').on('click',function() {
  dosomething();
 
});

function dosomething() {
  console.log('here');
  //return false;
  // if you want to submit the form here 
  $('#form').submit();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form:form modelAttribute="api" id="form">
  <form:textarea path="text" class="form-control" rows="10" id="redacttext" />
  <button type="button" id="submit" class="btn btn-default">Submit</button>
</form:form>

edited Nov 23 '17 at 16:16

answered Nov 23 '17 at 15:45

Abid Nawaz

866
6
20

But then the form isn't submited – A. Wolff Nov 23 '17 at 15:46
No, $( "#form" ).submit(); will call submit handler recursively. You should use $( "#form" )[0].submit(); e.g – A. Wolff Nov 23 '17 at 15:49
Also you're returning false and then trying to submit, which is unreachable code. – Matt Fletcher Nov 23 '17 at 16:14
that code is commented if he want to submit the form then he can remove the return false; – Abid Nawaz Nov 23 '17 at 16:16
You may have fixed the recursiveness by making one use click and one use submit, but that's not a good idea. What about if someone is in an input field and hits enter? Or the form is submitted some other way? Maybe you could tab into the submit button and hit enter? – Matt Fletcher Nov 23 '17 at 16:19

score 3 · Answer 2 · edited Nov 23 '17 at 16:16

3

You can try this

$("#form").submit(function(e) {
     e.preventDefault();
     ..... do you action/ call custom function
     this.submit();
     return false; //I put it here as a fallback
});

edited Nov 23 '17 at 16:16

Flexo

87,323
22
191
272

answered Nov 23 '17 at 15:53

thiyagu selvaraj

100
4

1

Please do no promote your website in every answer you give on this site. It's not useful for the community and just comes across as purely spammy. – Matt Fletcher Nov 23 '17 at 16:12

score 2 · Answer 3 · answered Nov 23 '17 at 15:46

2

Try to use the preventDefault Event

$('#form').submit(function(e) {
      e.preventDefault();
      dosomething();
  });

and in your dosomething() function at the end add:

$( "#form" ).submit();

This will first run your dosomething() function and then thru the function, it will submit your form.

answered Nov 23 '17 at 15:46

zagzter

229
1
11

2

No, `$( "#form" ).submit();` will call submit handler recursively. You should use `$( "#form" )[0].submit();` e.g – A. Wolff Nov 23 '17 at 15:47
Then you must explain also the difference of using id instead of class to the user. Id "must" be unique. – zagzter Nov 23 '17 at 15:51
Sorry i don't see the point here regarding `Id "must" be unique`? Which duplicate Id? – A. Wolff Nov 23 '17 at 15:52
You're checking an event handler, which you will then call again afterwards. This will create an infinite loop. However you can use a variable switch "isSubmitted", for example, and check that in the event. I haven't seen the `[0]` method before, but perhaps that if it works. – Matt Fletcher Nov 23 '17 at 16:13

Execute Javascript function before submitting the form

3 Answers3

Linked