CODEWITHSUNDEEP
javascriptjqueryhtml
Jimmy
Jimmy

Reputation: 10341

How to do something before on submit?

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?

Upvotes: 189

Views: 282330

Answers (6)

Reza Hadipour
Reza Hadipour

Reputation: 72

Recently I had this issue and I solved it in this way.

Your form:

<form id="deleteForm" action="/post/delete" method="post">
  <input type="text" value="2133" />
  <input type="submit" value="Delete" />
</form>

and your javascript:

<script>
let deleteForm = document.getElementById('deleteForm');

  deleteForm.addEventListener('submit', function(e) {
    e.preventDefault();
    if (confirm('Are you sure?')) {
        deleteForm.submit();
    }
  });
});

</script>

Upvotes: 1

Dan Breen
Dan Breen

Reputation: 12924

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

Update; for newer JQuery versions (to avoid deprecation warnings), try:

$('#myform').on('submit', function() {

    // ...

    return true;
});

Upvotes: 262

Yurii Stefaniuk
Yurii Stefaniuk

Reputation: 1807

Form:

<form id="formId" action="/" method="POST" onsubmit="prepareForm()">
   <input type="text" value="" />
   <input type="submit" value="Submit" />
</form>

Javascript file:

function prepareForm(event) {
  event.preventDefault();
  // Do something you need
  document.getElementById("formId").requestSubmit();
}

Note: If you're supporting Safari (which you probably are) you'll need to pull in a polyfill for requestSubmit()

Upvotes: 8

James Johnson
James Johnson

Reputation: 46047

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();" />

Upvotes: 12

acme
acme

Reputation: 14856

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.

Upvotes: 27

rogerlsmith
rogerlsmith

Reputation: 6786

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.

Upvotes: 5

Related Questions