I would like to display a dialog box when I click the "Forward" button. This dialog must give me the possibility to continue or stay on the same page. How do you do that?
Below is my source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>Test</title>
<script>
$(document).ready(function() {
$( "#dialog" ).dialog({
modal: true,
buttons: {
"Yes": function() {
$('#valid');
//$( this ).dialog( "close" );
},
"No": function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog" title="Box">
</div>
<p>Welcome...!</p>
<input type="file"/>
<input type="submit" id="valider" name="valid" value="Forward"/>
</body>
</html>
You need To add click event listener to show dialog on click of Forward Button
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="dialog" title="Box"></div>
<p>Welcome...!</p>
<input type="file" />
<input type="submit" id="valider" name="valid" value="Forward" />
<script type="text/javascript">
$(document).ready(function() {
document.getElementById("valider").addEventListener("click",function(){
$("#dialog").dialog({
modal: true,
buttons: {
Yes: function() {
$( this ).dialog( "close" );
},
No: function() {
console.log('clicked no');
}
}
});
});
});
</script>
First, you need to add a <form> element. Then add assign an id, a target file and an onsubmit function. We'll write return firstModal().
Let's create firstModal(): using the .dialog from jQuery UI we create a modal with two options: one Close and the other Send. Then we link the first to $(this).dialog("close") to close the dialog and the other to document.getElementById("myForm").submit() which allows to submit the HTML form to the target file set in action.
Here's the full working code:
You can create two modal boxes: one for the initial input then another for the confirmation:
let confirmFormDialog = function(form) {
$("#dialog").dialog({
modal: true,
buttons: {
Send: function() {
document.getElementById("myForm").submit();
},
Close: function() {
$(this).dialog("close");
}
}
});
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="dialog" title="Box"></div>
<p>Welcome...!</p>
<form id="myForm" onsubmit="return confirmFormDialog()" action="targetFile.php">
<input type="file" />
<input type="submit" id="valider" name="valid" value="Forward" />
</form>
Using this technique we need to make sure that confirmFormDialog() returns false. This way the HTML form doesn't submit when the input button is clicked. By removing this default behavior we decide when to submit the form with .submit().
this should work for you..
if (confirm("your message")) {
// your code
}
Related
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 i.e.
1-Confirmation_In_Progress
4-Confirmation_Cancelled
5-Confirmation_Cancelled
If;
I click "Yes" - I get all 3 console.log messages i.e.
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>
HOME
<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.
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.
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.
I've a jsp with a form that include another jsp with a div (that's a JQuery dialog) and in the dialog I've a form that I've to validate.
My issue is: I cannot create an inner form opened in a dialog. So when I try to validate it, I get following error: Uncaught TypeError: Cannot read property 'form' of undefined.
See following snippet, please:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</head>
<body>
<form id="extForm">
<div id="myDialog">
<form id="intForm">
<label for="field1">Don't write anything in textbox, just click the button</label>
<input type="text" id="field1" required>
</form>
</div>
</form>
</body>
<script>
$("#myDialog").dialog({
autoOpen: false,
modal: true,
title: "myDialog",
buttons: {
"Click me": function(){
$("#myDialog form").valid();
}
}
});
$("#myDialog").dialog("open");
</script>
</html>
If I remove the external form, it works fine. I can I solve this? Thanks.
Note: I can't remove the external form and I have to validate only the fields inside my dialog.
You are getting that error because when you call $("#myDialog").dialog() function of jQuery, myDialog div loses the form from it's inner html.
Please put html back after dialog and before open dialog functions
e.x.
<script>
$("#myDialog").dialog({
autoOpen: false,
modal: true,
title: "myDialog",
buttons: {
"Click me": function(){
$("#myDialog form").valid();
}
}
});
$("#myDialog").html("<form id='intForm'><label for='field1'>Don\'t write anything in textbox, just click the button</label><input type='text' id='field1' required></form>");
$("#myDialog").dialog("open");
</script>
This code should run fine!
Thank you
I solved wrapping dialog inside a form, using option create:
create: function(){
formDialog = $(this).wrap($('')).parent();
}
This is the result:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</head>
<body>
<form id="extForm">
<div id="myDialog">
<label for="field1">Don't write anything in textbox, just click the button</label>
<input type="text" id="field1" required>
</div>
</form>
</body>
<script>
var formDialog;
$("#myDialog").dialog({
autoOpen: false,
modal: true,
title: "myDialog",
create: function(){
formDialog = $(this).wrap($('<form>')).parent();
},
buttons: {
"Click me": function(){
formDialog.valid();
}
}
});
$("#myDialog").dialog("open");
</script>
</html>
Thanks to all.
I have spent 5 hours on this and cannot get this to work. I just want to submit a form and have it ask to confirm delete with a jquery ui popup and when it is confirmed it proceeds to the form submit and goes to delete.php.
I have stripped this down for simplicity:
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#formDelete').submit(function(e){
e.preventDefault();
$('#dialog').dialog('open');
});
$('#dialog').dialog({
autoOpen: false,
modal: true,
buttons: {
"Confirm": function() {
$('#formDelete').submit();
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
</script>
</head>
<body>
<div id="dialog">
<p>Are you sure you want to delete?</p>
</div>
<form id="formDelete" name="formDelete" action="delete.php" method="POST" >
<input name="id" type="hidden" value="1">
<input name="submit" type="submit">
</form>
</body>
</html>
I click the Yes button and nothing happens. I have tried changing submit id to the same as the form but read that just loops everything.
I cannot eloquently state the reason, but I find it vague though, that if you use it like this:
<input name="submit" type="submit">
^^ input name submit
$('#formDelete').submit();
^^
I don't know the reason why but it conflicts, so never name a button "submit", instead just append a number on the name to avoid conflict.
Here try this:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<div id="dialog">
<p>Are you sure you want to delete?</p>
</div>
<form id="formDelete" action="delete.php" method="POST">
<input name="id" type="hidden" value="1" />
<input name="submit1" type="submit" />
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name="submit1"]').on('click', function(e){
e.preventDefault();
$('#dialog').dialog('open');
});
$('#dialog').dialog({
autoOpen: false,
modal: true,
buttons: {
"Confirm": function(e) {
$(this).dialog('close');
$('#formDelete').submit();
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
});
</script>
Sidenote: Actually I kinda stumbled on this kind of question before, but I cannot find it again (actually the correct answer with explanation was there but I can't find it here on SO).
EDIT: Ahh, here it is:
Additional Notes:
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures.
http://api.jquery.com/submit/
I am trying to bring up a jQuery UI Dialog in response to form input. Consider:
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="checkLogin.js"></script>
</head>
<body>
<form>
<label>User Name:</label><input onkeydown="checkSubmitKey(event)"><br>
<input id="submit" name="submit" type="button" onclick="checkLogin()" value="Submit">
</form>
<div id="dialog" title="Alert" style="display: none;"></div>
</body>
</html>
where checkLogin.js is:
function checkSubmitKey(ev) {
if(ev.keyCode == 13) {
checkLogin();
}
}
function checkLogin() {
showAlert("Hello");
}
function showAlert(str) {
$( "#dialog" ).html(str);
$( "#dialog" ).dialog({
modal: true,
title: "Alert",
buttons: {
"OK": function() {
$( this ).dialog( "close" );
}
}
});
}
The problem is that the Dialog only shows when I press the "Submit" button; if I press Enter in the "User Name" text field, nothing happens.
(If I change function checkLogin to
function checkLogin() {
alert("ok");
showAlert("Hello");
}
the Dialog appears when I press Enter also.)
You need to prevent the default action of the Enter key. Change the JS to:
function checkSubmitKey(ev) {
if(ev.keyCode == 13) {
ev.preventDefault();
checkLogin();
}
}
FIDDLE
I am trying to put a radio button selector inside jquery dialog box. The radio buttons are not coming up and just the confirm save and cancel buttons are showing up. How can i generate 3 radio buttons in my dialog box. Thanks
My dialog box code is as follows:
$('#dlg-flag').dialog({
autoOpen: false,
width: 550,
height: 150,
closeOnEscape: true,
draggable: true,
title: 'Sequence',
radio:{
flag1:function(){//send flag1 to serverside},
flag2:function(){send flag2 to serverside},
flag3:function(){send flag3 to serverside}
},
buttons: {
'Confirm Save': function () {
//Handle flagdata JSON and send ot serverside
},
'Cancel': function () {
$('#dlg-flag').dialog('close');
}
}
});
As #j08691 suggested, add the code inside your div in the html page: http://jsfiddle.net/FekTf/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Close The Dialogue Box </title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
<button id="submit">Submit</button>
<div class="dialog" title="Basic Dialog">
<div>
<label for="terms">Select One</label><br/>
<input type="radio" name="add" class="terms">Address</input><br/>
<input type="radio" name="add" class="terms">Qualification</input>
</div>
</div>
<script>
$("#submit").click(function(){
$(".dialog").dialog('open');
});
$( ".dialog" ).dialog({
autoOpen: false,
modal: true,
resizable: false,
buttons: {
OK: function() {
$(this).dialog('close');
}
},
draggable: false,
beforeClose: function( event, ui ) {
if ( !$( ".terms" ).prop( "checked" ) ) {
event.preventDefault();
$( "[for=terms]" ).addClass( "invalid" );
}
},
});
</script>
</body>
</html>