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?
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.
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.
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.
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....
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With