Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent form submission after submit button has been clicked using cancel button [duplicate]

I have a form that submits values to back-end, but I wish to have a cancel button that stops the submission of the form.

<form action="upload.php" method="post" enctype="multipart/form-data" id="UploadForm">
/*
*
parameters
*
*/
<button type="submit" value="submit" id="SubmitButton">Submit</button>
<button type="button" value="cancel" id="CancelButton">Cancel</button>
</form>

Can anyone please tell how it can be done?

like image 344
darcy Avatar asked Dec 17 '15 13:12

darcy


People also ask

How do you disable submit button once it has been clicked?

There's another way you can disable the submit button after the first click. You can simply remove the onclick event handler by setting its value as null.

How do I stop multiple submit buttons clicking?

Disabling the Submit Button In practice this can cause a form to be submitted, or some other event triggered, more than once. The second button however will only accept a single click and ignore all subsequent clicks. The trick is to use JavaScript to set the disabled property of the button to true.

How do you stop a form from getting submitted?

The simplest solution to prevent the form submission is to return false on submit event handler defined using the onsubmit property in the HTML <form> element.


1 Answers

Solution that could work:

var cancelObject = '';

$('#UploadForm').on('submit', function(e){

   //prevent default submit
   e.preventDefault();

   //submit via ajax
   cancelObject = $.post('upload.php', $( "#UploadForm" ).serialize());

});

$('#cancel_button').click(function(){

   //Cancel the request
   cancelObject.abort();

});

UNTESTET! - Only an idea that could work....

like image 66
Chris Avatar answered Sep 27 '22 20:09

Chris