jQuery Confirmation Dialog Modal - Unable to Submit Form Sucessfully
Question
I have a sample code block below which consists of a simple bootstrap form whereby I am using a jqueryUI Modal Dialog as a replacement for the basic javascript confirmation window.
When i submit the form by clicking the submit button, the jqueryUI modal window does popup without any issues.
If;
I click "No" - I get all 3 console.log messages ie
- 1-Confirmation_In_Progress
- 4-Confirmation_Cancelled
- 5-Confirmation_Cancelled
If;
I click "Yes" - I get all 3 console.log messages ie
- 1-Confirmation_In_Progress
- 2-Confirmation_AboutTo
- 3-Confirmation_Done
Therefore I conclude the jquery code must be working to some extent BUT the form values dont seem to be posted.
I have tried various methods to submit the form as seen below. Any idea what is wrong with my jquery form submission ?
The form code is below;
<!DOCTYPE html>
<html>
<head>
<title> Simple BootStrap Form - jQuery UI Modal Dialog as Confirmation Box </title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<!-- CSS -->
<style>
.customColor { background: darkturquoise; }
.jqDialogAdjust { float: left; margin: 2px 2px 0 0; }
.no-close .ui-dialog-titlebar-close { display: none }
</style>
</head>
<!-- HTML -->
<body>
<div class="container">
<br><br>
<a href="<?php echo $_SERVER['PHP_SELF']; ?>"> HOME </a>
<br><br>
<?php
if ( isset($_POST['submit_btn']) ) {
echo "<br>"."<br>";
echo "Name :".$_POST['name']."<br>";
echo "Email :".$_POST['email']."<br>";
} else {
?>
<form id="simpleform" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" >
<div class="form-group">
<label for="name">Your Name:</label>
<input type="text" class="form-control" name="name" id="name">
</div>
<div class="form-group">
<label for="email">Your Email:</label>
<input type="email" class="form-control" name="email" id="email">
</div>
<button type="submit" class="btn btn-default" name="submit_btn" id="submit_btn" value="submit_btn" >Submit</button>
</form>
<div id="confirmdialog" title="Confirmation Required"></div>
<?php } ?>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"> </script>
<script type="text/javascript" >
$(document).ready(function(){
$("#submit_btn").click(function(event){
console.log('1-Confirmation_In_Progress');
event.preventDefault();
var $target = $( event.target );
var message = 'Proceed With Action?';
var icon = '<span class="ui-icon ui-icon-alert jqDialogAdjust" ></span>';
$('#confirmdialog').html('<p>' + icon + message + '</p>');
$("#confirmdialog").dialog({
autoOpen : false,
modal : true,
height: 170,
width: 340,
resizable: false,
draggable:false,
closeOnEscape: true,
title : " :: Confirmation Required :: ",
classes: {
"ui-dialog-titlebar": "ui-corner-all customColor"
},
dialogClass: "no-close",
buttons: [{
text : "Yes",
click : function() {
console.log('2-Confirmation_AboutTo');
//die;
$target.closest("form").submit();
//$('form#simpleform').submit();
console.log('3-Confirmation_Done');
$(this).dialog("close");
}
},
{
text : "No",
click : function() {
console.log('4-Confirmation_Cancelled');
$(this).dialog("close");
console.log('5-Confirmation_Cancelled');
}
}]
}); // end of confirmdialog.dialog
$('#confirmdialog').dialog('open');
}); // end of submit_btn.click(function(event)
}); // end jQuery Document Ready
</script>
</body>
</html>
The above code block was put together by refering to various snippets here on StackOverFlow but somehow I just cant get the form to submit. If i remove the jquery lines and use a basic javascript confirm window - the form submits properly.
2 answers
solution1
0 2018-01-02 06:10:41
I created a test fiddle and tried to replicate the issue. I could not. It might be best to define your Dialog first and then the events.
For Example: https://jsfiddle.net/Twisty/f0sa5nmL/
JavaScript
$(function() {
$("#confirmdialog").dialog({
autoOpen: false,
modal: true,
height: 170,
width: 340,
resizable: false,
draggable: false,
closeOnEscape: true,
classes: {
"ui-dialog-titlebar": "ui-corner-all customColor"
},
dialogClass: "no-close",
buttons: [{
text: "Yes",
click: function() {
console.log('2-Confirmation_AboutTo');
$("#simpleform").submit();
console.log('3-Confirmation_Done');
$(this).dialog("close");
}
}, {
text: "No",
click: function() {
console.log("4-Confirmation_Cancelled");
$(this).dialog("close");
console.log("5-Confirmation_Cancelled");
}
}]
});
$("#submit_btn").click(function(event) {
console.log("1-Confirmation_In_Progress");
event.preventDefault();
$("#confirmdialog").dialog("open");
});
});
If I choose No, I get:
1-Confirmation_In_Progress 4-Confirmation_Cancelled 5-Confirmation_Cancelled
The form does not submit and the dialog closes. If I choose Yes, I get:
1-Confirmation_In_Progress 2-Confirmation_AboutTo 3-Confirmation_Done
The form then attempts to submit (and fails since it can't submit itself to itself in the fiddle.).
Hope that helps.
solution2
0 ACCPTED 2018-01-02 16:35:17
As mentioned in my comment above to user Twisty, looks like my problem was this line;
if ( isset($_POST['submit_btn']) ) {
echo "<br>"."<br>";
echo "Name :".$_POST['name']."<br>";
echo "Email :".$_POST['email']."<br>";
}
Jquery form submission does not include the button names and values into the post superglobal. Changing the if to either 'name' or 'email' allowed the post values to appear.
All these form submissions work as long as the if condition is NOT based on the button name/value.
$target.closest("form").submit();
$('form[name="simpleform"]').submit();
$('form#simpleform').submit();
document.forms["simpleform"].submit();
document.getElementById("simpleform").submit()
$('#simpleform').submit();
Thanks.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.