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
– Matt Fletcher, Commented Nov 23, 2017 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
– Oli Crt, Commented Nov 23, 2017 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
– Matt Fletcher, Commented Nov 23, 2017 at 16:10
Possible duplicate of Jquery function BEFORE form submission — Matt Fletcher
– Matt Fletcher, Commented Nov 23, 2017 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: stackoverflow.com/questions/21938788/… - the answers there are generally much better than here too — Matt Fletcher
– Matt Fletcher, Commented Nov 23, 2017 at 16:17

Abid Nawaz · Accepted Answer · 2017-11-23 16:16:52Z

13

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, 2017 at 16:16

answered Nov 23, 2017 at 15:45

Abid Nawaz

9766 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

A. Wolff Over a year ago

But then the form isn't submited

A. Wolff Over a year ago

No, $( "#form" ).submit(); will call submit handler recursively. You should use $( "#form" )[0].submit(); e.g

Matt Fletcher Over a year ago

Also you're returning false and then trying to submit, which is unreachable code.

Abid Nawaz Over a year ago

that code is commented if he want to submit the form then he can remove the return false;

Matt Fletcher Over a year ago

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?

Flexo - Save the data dump · Accepted Answer · 2017-11-23 16:16:14Z

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, 2017 at 16:16

Flexo - Save the data dump♦

89.1k22 gold badges205 silver badges286 bronze badges

answered Nov 23, 2017 at 15:53

thiyagu selvaraj

1004 bronze badges

1 Comment

Matt Fletcher Over a year ago

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.

zagzter · Accepted Answer · 2017-11-23 15:46:47Z

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, 2017 at 15:46

zagzter

3261 silver badge12 bronze badges

4 Comments

A. Wolff Over a year ago

No, $( "#form" ).submit(); will call submit handler recursively. You should use $( "#form" )[0].submit(); e.g

zagzter Over a year ago

Then you must explain also the difference of using id instead of class to the user. Id "must" be unique.

A. Wolff Over a year ago

Sorry i don't see the point here regarding Id "must" be unique? Which duplicate Id?

Matt Fletcher Over a year ago

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.

Collectives™ on Stack Overflow

Execute Javascript function before submitting the form

3 Answers 3

5 Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related