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.
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 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
}
I want to create simple custom popup using jquery. My html code is as follows.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Thiws should be custom popup");
});
});
</script>
</head>
<body>
<button id="btn1">Show Text</button>
</body>
</html>
On clicking button it should open a form in popup asking username, email address and also it should have submit button
For reference what i want to ask
http://www.c-sharpcorner.com/UploadFile/736ca4/custom-popup-window-using-jquery/
You can use the function and css I wrote here:
https://jsfiddle.net/mm7b7t5t/
Opening a hello world popup:
var hello = new popup([{text:"Close"}], "Hello!", "<p>Hello World</p>");
hello.open();
You can make popups draggable, add multiple buttons etc etc
jQuery dialog is a mess in my opinion, I prefer my own popup code ^^
Just create a html file and copy/paste that code.
<html>
<head>
<title></title>
</head>
<body>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#OpenDialog").click(function () {
$("#dialog").dialog({modal: true, height: 400, width: 400 });
});
});
</script>
<a id="OpenDialog" href="#">Click here to open dialog</a>
<div id="dialog" title="Dialog Title">
<p>test</p>
</div>
</body>
</html>
I have an issue that is a little tricky.
First, for folks who will run my snippet first -- when you run my example and click Generate, you will first see a modal box, which (on my backend) first reads the $_GET data. My submit mechanism uses A HREF method, to which I want to add more data via form, or otherwise, to be read by the receiving page.
In HTML source below, observe:
I have a link to portal.php, which includes query parameters
clicking that link engages the modal_box mechanism
my link is a button
I need to have a way to add data (GET, or POST), that will submit upon the click of that button, and be received by the resulting page (portal.php in my example).
I want, for example, to be able to print on my receiving page that the following are true:
$_GET['p'] == 'select';
$_GET['coverpage'] == 'standard';
How?
Snippet Follows:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<meta charset="utf-8" />
<title>T</title>
<script>
$(document).ready(function() {
$(".modal_box").click(function() {
$("#iframe_dialog_box").attr('src', $(this).attr("href"));
$("#div_modal_box").dialog({
width: 300,
height: 200,
modal: true,
close: function() {
$("#iframe_dialog_box").attr('src', "about:blank");
}
});
return false;
});
});
</script>
</head>
<body>
<div id="div_modal_box" title="portal.php?p=select" style="display:none;">
<iframe id="iframe_dialog_box" width="100%" height="100%"></iframe>
</div>
<form METHOD="GET">
<input type="radio" name="coverpage" value="standard" checked="checked">standard
<br>
<input type="radio" name="coverpage" value="more">more
<br>
<a href="portal.php?p=select&action=print" class="modal_box">
<button type="submit">Generate</button>
</a>
<script>
$("button").button();
</script>
</form>
</body>
</html>
Your click handler should get the values from the form, and add them to the URL before assigning the iframe src:
$(document).ready(function() {
$("button").button();
$(".modal_box").click(function() {
var coverpage = $(":radio[name=coverpage]").val();
$("#iframe_dialog_box").attr('src', $(this).attr("href") + '&coverpage=' + coverpage);
$("#div_modal_box").dialog({
width: 300,
height: 200,
modal: true,
close: function() {
$("#iframe_dialog_box").attr('src', "about:blank");
}
});
return false;
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<div id="div_modal_box" title="portal.php?p=select" style="display:none;">
<iframe id="iframe_dialog_box" width="100%" height="100%"></iframe>
</div>
<form METHOD="GET">
<input type="radio" name="coverpage" value="standard" checked="checked">standard
<br>
<input type="radio" name="coverpage" value="more">more
<br>
<a href="portal.php?p=select&action=print" class="modal_box">
<button type="submit">Generate</button>
</a>
</form>
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/