I have some delete forms in my app that I want to confirm with javascript/jQuery before submission.
The easy way is to do this:
$('form.confirm-form').submit(function(){
return confirm('Are you sure?');
});
Which brings up a borwser-native confirmation box and only submits the form if the user clicks OK.
For something prettier I thought I use a Bootstrap modal for the confirm and checked out the Bootbox.js library for this.
I can't seem to get it working properly as it requires a callback and does not prevent the form from submitting. So I use preventDefault to stop the form submitting prematurely but now
- I can't dismiss the modal with the cancel button, and
- the OK button fails to submit the form.
Here's my code:
$('form.confirm-form').submit(function(event) {
event.preventDefault();
bootbox.confirm("Are you sure?", function(result){
return result;
});
});
How can I replicate the behaviour of the native confirm with this library?
I have some delete forms in my app that I want to confirm with javascript/jQuery before submission.
The easy way is to do this:
$('form.confirm-form').submit(function(){
return confirm('Are you sure?');
});
Which brings up a borwser-native confirmation box and only submits the form if the user clicks OK.
For something prettier I thought I use a Bootstrap modal for the confirm and checked out the Bootbox.js library for this.
I can't seem to get it working properly as it requires a callback and does not prevent the form from submitting. So I use preventDefault to stop the form submitting prematurely but now
- I can't dismiss the modal with the cancel button, and
- the OK button fails to submit the form.
Here's my code:
$('form.confirm-form').submit(function(event) {
event.preventDefault();
bootbox.confirm("Are you sure?", function(result){
return result;
});
});
How can I replicate the behaviour of the native confirm with this library?
2 Answers
Reset to default 5I was struggling with this on a create form, and the solution is actually very easy and doesn't require any JavaScript at all (if you're using JQuery and Bootstrap already).
All you need to do is change the submit button (button type="submit") to a generic button (button type="button") that triggers a Boostrap modal. More on button actions here: https://stackoverflow./a/9643866.
Then have the button inside the Boostrap modal actually submit the form. If you keep your modal HTML inside the form, you don't need to write a line of JS.
JS Bin: https://jsbin./lulipubafo/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<title>JS Bin</title>
</head>
<body>
<form action="/page" method="post">
<input type="text" name="first_name">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#confirm-submit">Submit</button>
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">Confirm</h2>
</div>
<div class="modal-body">
<p>Are you sure you want to submit?</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Yes, Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>Try this FOUND HERE
$('form.confirm-form').submit(function(event) {
var currentForm = this;
event.preventDefault();
bootbox.confirm("Are you sure?", function(result){
if(result)
{
currentForm.submit()
}
});
});