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/
Related
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'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 am new to javascript and I was following a tutorial where based on the code below, the button content was supposed to change to adding before displaying the alert but my code is not working
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form class="form-item">
<div class="cart">
<input type="submit" value="Add to Cart" />
</div>
</form>
<script>
$(document).ready(function(){
$("button").click(function(){
button_content.html('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
});
});
</script>
How can I solve this problem ?
$("button") is not the right selector. That will look for <button> elements, and you don't have one.
You'll want $("input[type=submit]"), or better yet, give it an ID and use the selector on that: $("#mybutton").
Keep in mind that this will still submit the form back to the server - it'll just wait until the alert to do so.
Give this code a try for a few reasons.
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form class="form-item">
<div class="cart">
<!--<input type="submit" value="Add to Cart" />-->
<!-- First use a button not an input and give it an ID -->
<button id="btn_add" type="submit">Add to Cart</button>
</div>
</form>
<script>
// You can shorten up the ready statement
//$(document).ready(function(){
$(function(){
// Now bind a click handler with button's ID
// This is an older way of binding in jQuery
// $("#btn_add").click(function(){
// Use jQuery's on() instead.
$("#btn_add").on("click", function(){
// Change the HTML of the button by getting it by it's new ID
// button_content.html('Adding...'); //Loading button text
$("#btn_add").html('Adding...');
alert("Item added to Cart!"); //alert user
});
});
</script>
Use an ID anywhere that you can. Feel free to shorten up your ready statement. Use jQuery's on handler instead of click.
You don't have a tag to select it with jquery. Your html has to look like this for it to work:
<form class="form-item">
<button class="cart">Add to Cart</button>
</form>
Your problem is in the jquery selector and in the function reference
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form class="form-item">
<div class="cart">
<input type="submit" value="Add to Cart" />
</div>
</form>
<script>
$(document).ready(function(){
$("input[type=submit]).click(function(){
$(this).html('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
});
});
</script>
<button name="submit" value="Add to Cart" id="sendFeed">Add to card</button>
<script>
$(document).ready(function(){
$("button").click(function(){
button_content.html('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
return false;
});
});
You do not have a button element in your code. If you are targeting the input element, then you need to use the selector tag for input and then use .val() option to display the text.
$(document).ready(function(){
$("input").click(function(){
$(this).val('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
});
});
Example : https://jsfiddle.net/fz66qdv4/
Try it :
<html>
<head>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form class="form-item">
<div class="cart">
<input type="submit" value="Add to Cart" />
</div>
</form>
<script>
$(document).ready(function(){
$("input[type=submit]").click(function(){
$(this).val('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
});
});
</script>
</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 want to Open my php Submit page in a Modal dialog box. I know it can be accomplished with jquery but I am still learning jquery I will like to use the function myModalFunction() to open customp1.php after visitor clicked on submit button.
I need help to write the jquery that will do the think.
Thank you in advance.
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="./action/scripts/global.js" type="text/javascript"></script>
<form action="../action/subs/customp1.php/" method="post" id="ccomputer" onsubmit="myModalFunction()" >
<form action="../action/subs/submit1.php/" method="post" id="ccomputer">
<div id="orderwrap">
<input id="article" name="article" type="text" />
<input id="quantity" name="quantity" type="text" />
</div>
<input id="submit" type="submit" value="Submit Order" name="submission"/>
</form>
You need to submit your form using ajax. Your code should be like this:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$('form#ccomputer').submit(function (e) {
e.preventDefault(); // To prevent form submit
$(this).find('input:submit').attr('disabled', true); // To prevent re-submission
var formData = $(this).serializeArray(); // data
var action = $(this).attr('action'); // action
// using POST method to send data & get response
$.post(action, {data: formData}, function (response) {
// show dialog
$('<div></div>').html(response).dialog({
title: 'Dialog title',
modal: true,
close: function () {
$(this).dialog("destroy").remove();
}
});
});
$(this).find('input:submit').removeAttr('disabled'); // re-enabling submit button
});
});