User475983607 posted
Hi Friends,
I am using JQuery Ajax and I want to display a Bootstrap (OK CANCEL) Modal dialog box Before the user submits the form for CRUD operations. I have have been perusing some tutorials about using Modal Dialog boxes, but can't seem to find anything that would
fit my particular requirement. Any suggestions or references to some article(s) that explains how I should approach this problem would be greatly appreciated. Thanks !!!
It's pretty simple 1) Open the modal on submit and cancel the submit. 2) Submit the form when the user clicks the designated button.
Below is a working example. The jQuery/JavaScript must be below the HTML. In the future please share what kind of application you are building.
Html
<form id="from" method="post">
<input id="Text1" type="text" name="Text1" value="Hello World" />
<input id="Submit1" name="Submit" type="submit" value="submit" />
</form>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="Save" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
jQuery
<script>
var submit = false;
$('form').submit(function (e) {
if (!submit) {
e.preventDefault();
}
$('#exampleModal').modal('show')
});
$('#Save').click(function () {
submit = true;
$('form').submit();
});
</script>
