Menu
I'm trying to do a confirm dialog using jquery, but the form doesn't get submitted at all, this is what I got:
<script type="text/javascript">
var currentForm;
$(function() {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
autoOpen: false,
buttons: {
'Delete all items': function() {
currentForm.submit();
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
});
function ask() {
currentForm = $(this).closest('form');
$("#dialog-confirm").dialog('open');
}
</script>
<form ... >
<input type="submit" value="delete" onclick="ask();return false;" />
</form>
962
For a form with GET method as I need also button's value in query string and avoid to lost it at form submit
I used event.preventDefault() and added button's name and value as hidden <input> field in JS script
JS script
$( function() {
//Add function to all document's html tag with class="delete"
$(document).on("click", ".delete", function(event) {
event.preventDefault(); //Stop submitting form and wait for a "yes" or "no"
$( "#dialog-confirm" ).dialog({
draggable: false,
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Delete items": function() {
$( this ).dialog( "close" );
//Prevent to lost button's value in query string at form submit
//Need to add a hidden <input> field with the same button's name and value
$('<input />').attr('type', 'hidden')
.attr('name', 'action')
.attr('value', 'delete')
.appendTo('#myform');
$('#myform').submit(); //Ok proceed with form submit
},
Cancel: function() {
$( this ).dialog( "close" ); //Do nothing, close window.
}
}
});
});
});
Form template
<div style="display:none" id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
<form id="myform" action="#myurl" method="get">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input class="delete" type="submit" name="action" value="delete">
</form>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Modal confirmation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$(document).on("click", ".delete", function(event) {
event.preventDefault(); //Stop submitting form and wait for a "yes" or "no"
$( "#dialog-confirm" ).dialog({
draggable: false,
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Delete items": function() {
$( this ).dialog( "close" );
//Prevent to lost button's value in query string at form submit
//Need to add a hidden <input> field with the same button's name and value
$('<input />').attr('type', 'hidden')
.attr('name', 'action')
.attr('value', 'delete')
.appendTo('#myform');
$('#myform').submit(); //Ok proceed with form submit
},
Cancel: function() {
$( this ).dialog( "close" ); //Do nothing, close window.
}
}
});
});
});
</script>
</head>
<body>
<div style="display:none" id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
<form id="myform" action="#myurl" method="get">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input class="delete" type="submit" name="action" value="delete">
</form>
</body>
</html>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
