I have sat here and fiddled with multiple different examples and none work. What I am trying to do is take a form that has three buttons (save, cancel, and delete). The delete button needs to come up with a prompt asking if the user is sure. Here is the code i have so far... and have tried multiple examples... none are working for me.
<form id="templateEdit" method="post" action="/admin/template/{{ var temp }}/{{ var page }}">
<div class="control right"><input type="submit" name="save" value="submit" /><input type="submit" name="cancel" value="cancel" /><input type="submit" name="delete" id="delete" value="delete" /></div>
<textarea name="editor" class="ckeditor">{{ var contents }}</textarea>
</form>
The following code is in a document ready Jquery function:
$("#dialog-confirm").dialog({
resizable: false,
autoOpen: false,
modal: true,
buttons: {
"Yes": function () {
$('#templateEdit').off("submit").submit();
$(this).dialog("close");
},
"No": function () {
$(this).dialog("close");
}
}
});
$('#templateEdit').submit(function (event) {
event.preventDefault();
$('#dialog-confirm').dialog('open');
});
Edit: The no button does work, but yes button is now submitting, but no post data is getting sent with submit.
Update: So this is how I have fixed my issue completly:
$(document).ready(function(){
$("#dialog-confirm").dialog({
resizable: false,
autoOpen: false,
modal: true,
width: 500,
buttons: {
"Yes": function () {
$("#templateEdit").attr('action', "/admin/templates.php?temp={{ var temp }}&page={{ var page }}&action=delete");
$('#templateEdit').get(0).submit();
$(this).dialog("close");
},
"No": function () {
$(this).dialog("close");
}
}
});
$('#delete').click(function (event) {
$("#dialog-confirm").dialog("open");
event.preventDefault();
});
});
You have a spelling mistake in the selector temaplteEdit instead of templateEdit
You need to rename the button with name submit
<input type="submit" name="save" value="submit" />
then call
$('#templateEdit').get(0).submit();
Demo: Fiddle
or
$('#templateEdit').off('submit').submit();
Demo: Fiddle
Update:
Related
I have never worked in jquery before. This is my first time. I need it for some confirmation dialog. I have write this to test it first before applying in my project. I have written this code. I want dialog box only if specified radio button is selected.
Main Problem: Show Confirmation Dialog if Specified Option in radio button is selected.
Jquery code:
(function($){
$.fn.checkLeave = function() {
return this.each(function(){
if($("input[name='second']").is(':checked')) {
alert("Second Radio Button is CLicked");
$.confirm({
text: "Are you sure to submit the form",
title: "Confirmation required",
confirm: function(button) {
$("form").submit();
},
cancel: function(button) {
// nothing to do
},
confirmButton: "Yes",
cancelButton: "No",
post: true,
confirmButtonClass: "btn-default",
cancelButtonClass: "btn-danger",
dialogClass: "modal-dialog modal-lg"
});
}
});
};
})( jQuery );
and HTML is:
<form action="dialogJquery.html" method="post">
<input type="text" name="username" placeholder="Username">
<input type="radio" id="first">
<input type="radio" name="second" checked="">
<input type="submit" value="Submit" id="submit" name="confirm"
onclick="$(this).checkLeave();"></button>
</form>
The above code shows the alert defined before dialog. but after that dialog is not shown. This is from where i am using Jquery Dialog Plugin. But through debugging when debugger reaches $.confirm and i click on step over then dialog is shown but when i resume script it again disappers.
The basic problem is that the form is being submitted because your code is doing nothing to stop it from being submitted. Accordingly, the dialog is being shown only for the duration of time it takes for the browser to submit the form and go to the specified page (dialogJquery.html).
Once someone who is a better programmer looks at this, they can likely come up with a better solution, but following is what I came up with that seems to work. I have added some IDs to elements and such--you should be able to follow that without further explanation. One thing I found is that if any of the elements has a name or ID of "submit" then the .submit() function will not work on the form.
In general, I handle the submit event for the form and preventDefault so that it doesn't submit. The confirm button sets submitConfirm to true and submits the form.
HTML
<form id="myForm" action="dialogJquery.html" method="post">
<input type="text" name="username" placeholder="Username">
<input type="radio" id="first">
<input type="radio" name="second" checked>
<input type="submit" value="Submit" id="btnSubmit" name="confirm">
</form>
Javascript
(function($) {
var submitConfirm = false;
$("#myForm").submit(function(event) {
if (!submitConfirm) {
event.preventDefault();
if ($("input[name='second']").is(':checked')) {
$.confirm({
text: "Are you sure to submit the form",
title: "Confirmation required",
confirm: function(button) {
submitConfirm = true;
$("#myForm").submit();
},
cancel: function(button) {
// nothing to do
},
confirmButton: "Yes",
cancelButton: "No",
post: true,
confirmButtonClass: "btn-default",
cancelButtonClass: "btn-danger",
dialogClass: "modal-dialog modal-lg"
});
}
}
});
})(jQuery);
I am using multiple submit button in a single form.
I will get the button I clicked, in normal post. But when I am using javascript this.form.submit(), I am not getting the button that I have clicked.
Is there any solution to identify the button without using hidden fields.
<script type="text/javascript" >
$("input#add").click(function(e) {
e.preventDefault();
$("<div>Do you want to continue ? </div>").dialog({
modal: true,
buttons: {
"Ok": function() {
$(this).dialog("close");
this.form.submit();
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
$("input#subtract").click(function(e) {
e.preventDefault();
$("<div>Do you want to continue ? </div>").dialog({
modal: true,
buttons: {
"Ok": function() {
$(this).dialog("close");
this.form.submit();
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
</script>
<form name="my_form" action="processor.php" method="post">
<br> <br>
Enter a number: <input type="text" name="number" size="5">
<br> <br>
<input type="submit" name="add" id="add"value="Add 10">
<input type="submit" name="subtract" id="subtract" value="Subtract 10">
</form>
The server code that I need to check as follows.
if($this->input->post("add"))
{
$save_status = 1;
}
if($this->input->post("subtract"))
{
$save_status = 2;
}
you have a small mistake, You have not closed the <script>
<script type="text/javascript" >
$("input#add").click(function(e) {
this.form.submit();
$("input#add").attr('disabled', 'disabled');
});
$("input#subtract").click(function(e) {
this.form.submit();
$("input#subtract").attr('disabled', 'disabled');
});
<script>// this line it shud be </script>
This should help you.
IN processor.php,
print_r($_POST);// you should be able to get expected result.
see demo here
Main php code here
After form submit code here
Try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
$(document).on('click','#add',function() {
this.form.submit();
$("#add").attr('disabled', 'disabled');
});
$(document).on('click','#subtract',function() {
this.form.submit();
$("#subtract").attr('disabled', 'disabled');
});
});
</script>
<form name="my_form" action="#" method="post">
<br> <br>
Enter a number: <input type="text" name="number" size="5">
<br> <br>
<input type="button" name="add" id="add"value="Add 10">
<input type="button" name="subtract" id="subtract" value="Subtract 10">
</form>
Yes, as per #Niranjan, the </script> should be there in your script. Apart from this, in your script, you can have a hidden input field. Say "clicked_button".
<input type="hidden" name="clicked_button" id="clicked_button">
And in your Javascript:
$("input#add").click(function(e) {
$("#clicked_button").val("add_button");
this.form.submit();
$("input#add").attr('disabled', 'disabled');
});
$("input#subtract").click(function(e) {
$("#clicked_button").val("substract_button");
this.form.submit();
$("input#subtract").attr('disabled', 'disabled');
});
And now in your PHP script, in form submission code - if you print following POST variables; you should be able to get the button which you clicked:
print_r($_POST);
Then you can put either switch case or if-else condition to perform your desired action.
Try type as button.
As you already have two separate click event bind in jquery
You can do the same in simple way by using ONCLICK with input type 'button'
<script type="text/javascript" >
function submitForm(id){
alert(id);
$('#my_form').submit();
$("input#"+id).attr('disabled', 'disabled');
}
</script>
<form name="my_form" id="my_form" action="processor.php" method="post">
<br> <br>
Enter a number: <input type="text" name="number" size="5">
<br> <br>
<input type="button" name="add" id="add"value="Add 10" onClick="submitForm(this.id)">
<input type="button" name="subtract" id="subtract" value="Subtract 10" onClick="submitForm(this.id)">
</form>
I have this form to manage an article. In 'action', I select article and choose either approve, archive, or delete. from the select box. Then I click the accept button.
HTML:
<form action="#" method="POST">
<select class="form-control contentgroup input-sm" name="action" id="action">
<option value=""></option>
<option value="addtoarchive">Archive</option>
<option value="removefromarchive">approve</option>
<option value="delete">Delete</option>
</select>
<br>
<input type="checkbox" name="selectedposts[]" class="check" value="240" />Article 1
<br>
<input type="checkbox" name="selectedposts[]" class="check" value="241" />Article 2
<br>
<input type="checkbox" name="selectedposts[]" class="check" value="242" />Article 3
<br>
<input type="checkbox" name="selectedposts[]" class="check" value="243" />Article 4
<br>
<button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button>
</form>
<div id="confirm" class="modal hide fade">
<div class="modal-body">Are you sure?</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
</div>
</div>
I've added a bootstrap confirm modal bootstrap like this :
$('button[name="remove_levels"]').on('click', function (e) {
var $form = $(this).closest('form');
e.preventDefault();
$('#confirm').modal({
backdrop: 'static',
keyboard: false
})
.one('click', '#delete', function (e) {
$form.trigger('submit');
});
});
This worked for the accept button, but Only after I choose delete and select an article from the list, I need to show the confirm modal box.
How can I create this behaviour using jQuery and a bootstrap modal box?
JSFIDDLE DEMO
What you need to do is listen for the select change event.
You could try something like this
$('select[name="action"]').on('change', function (e) {
var $form = $(this).closest('form');
var checked = $( "input:checked" ).length;
e.preventDefault();
if($(this).val()==="delete" && checked) {
$('#confirm').modal({
backdrop: 'static',
keyboard: false
})
.one('click', '#delete', function (e) {
$form.trigger('submit');
});
}
});
Here is a link to a jsfiddle
http://jsfiddle.net/dh0g6cge/
I think this is what your after by looking at the comments.
$('button[name="remove_levels"]').on('click', function (e) {
var $form = $(this).closest('form');
e.preventDefault();
if($("#action").val() == "delete" && $(".check").is(":checked")){
$('#confirm').modal({
backdrop: 'static',
keyboard: false
})
.one('click', '#delete', function (e) {
$form.trigger('submit');
});
}else{
//Do Something else if a different "select" option is selected or
//a checkbox isnt checked
}
});
The if conditional statement checks to see if the value of the select box is "delete" and that one of the check boxes is checked if both conditions are met then you get the modal dialog and i added the else as i assume you want to do something else if both conditions are not met.
here is a JSFIDDLE showing it in action.
Hope this helps.
I want the download now button to submit the form.
I have tried
getElementById("forms").submit();
$("form").submit();
$("#forms").submit();
and still nothing works.
The UI pops up and does everything else it is suppose it but does not submit the form
Java script
$(document).ready(function(){
$("#dialog-download ").dialog({
autoOpen: false,
resizable: false,
height: 140,
width: 325,
modal: true
});
$(".opener").click(function(){
var that = this;
var checkbox = $(that).next(":checkbox");
$("#dialog-download").dialog("option", {
buttons: {
"Download Now": function(){
$(checkbox).prop("checked", !$(checkbox).attr("checked"));
$("#dialog-download").dialog("close");
$("#forms").submit();
},
"Download Later ": function(){
$(checkbox).prop("checked", !$(checkbox).attr("checked"));
$("#dialog-download").dialog("close");
},
"Cancel": function(){
$("#dialog-download").dialog("close");
}
}
});
$("#dialog-download").dialog("open");
});
});
HTML
<div id="dialog-download" title="Download Now?">
<p><span style="float:left; margin:0 7px 20px 0;"></span>Download the file now or later?</p>
</div>
<form id = "forms" method="post" action="<?php echo $PHP_SELF;?>">
<a class="opener" href="#">db1.csv:</a>
<input id="c1" type="checkbox" name="download[]" value="db1.csv" /><br />
<...>
<input id="submit" type="submit" name="submit" value="submit" >
</form>
See the jQuery doc on submit().
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. For a complete list of
rules and to check your markup for these problems, see DOMLint.
http://jsfiddle.net/Fj2cC/4/
I am trying to get data from dialog to Java. I have:
<FORM method="post" action="index.jsp" target="_self" name="myForm" id="myForm">
...
<div id="dialog">
<INPUT TYPE="text" NAME="name" VaLUE="enter name">
</div>
....
</FORM>
$(function() {
var saveDialogData = function() {
document.myForm.submit();
}
$( "#dialog" ).dialog({
modal: true,
buttons: { "Ok": function() { $(this).dialog("close"); saveDialogData(); } }
});
});
After submit I am checking name value and in request is missing.
Know anyone why? Or how can I get dialog data to Java?