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();
  });

Solution 1

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>

Solution 2

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
});

Solution 3

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.

Comments

[A. Wolff]

But then the form isn't submited

[A. Wolff]

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

[A. Wolff]

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

[zagzter]

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

[A. Wolff]

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

[Matt Fletcher]

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]

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]

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

[Abid Nawaz]

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

[Matt Fletcher]

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?