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);
Related
somebody knows how to submit a form in html with sweetalert?
I have this checkbox and I want that onchange "direct" me to the sweetalert js with 2 Buttons. One with "No" and one with "Yes". The "Yes" button should now be the new "onchange" and with the "No" button the submit should be canceled.
<form method='post' action='....'>
<input type="checkbox" name="checkbox_admin" onchange="submit();" checked>
</form>
Hope you know what I mean. :D
This is how I would normally do
$(document).ready(function() {
$('[data-click="swal-danger"]').click(function(e) {
e.preventDefault();
var form = $(this).parents('form');
swal({
title: "Are You Sure?",
text: "Are You Sure You Want To Delete.",
icon: "error",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal(form.submit(), {
icon: "success",
});
} else {
}
});
});
});
Use this while submitting the form via swal/Sweetalert
swal(form.submit()
Then create a form submit button but without the type submit as bellow
<form method='post' action='....'>
<button class="btn btn-danger" data-click="swal-danger">DELETE USER</button>
</form>
Make sure your button have this on your button data-click="swal-danger"
I am trying to do the following.
I have 3 buttons, "Continue", "Delete", "New". All of these are type "submit" buttons.
When the form is posted, the value of these buttons is used to determine what happens on the backend.
I want a Sweetalert popup to confirm if the user wants to delete, then when the OK button is hit, the form should progress and submit to the backend.
The issue I currently have is that there is no way to get the value of the submit button to the server side when I incorporate Sweetalert to show when I hit the submit button.
Scenario A) For example, if I remove the "e.preventDefault" from the callback, the alert popups for a brief second but the form submits, not giving the user to confirm or cancel the deletion. This is not correct behaviour, but the "submit" button value does indeed get posted to the server. So to prevent the quick popup issue, I add "e.preventDefault" to stop the normal behaviour of "submit" button.
Scenario B) However, when I have the code as below (i.e. "e.preventDefault" added to the code), the form does not submit after validation. Instead I have to run "$('#myForm').submit()". But when I do this, the value of the "submit" button does not get posted to the server.
If someone could kindly guide me on how I can use jQuery Validate and Sweetalert, it would be much appreciated.
An example of the set up looks like this:
HTML:
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<form id="myForm" action="/postHere" method="post">
<!-- Options-->
<div class="row-select">
<label for="options">My Options</label>
<select name="options" id="options">
<option disabled="true" selected="selected">Select an Option</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
</div>
<!-- continue details form -->
<div>
<input type="submit" id="continue" name="submitButton" value="Continue this Option">
</div>
<!-- delete details -->
<div>
<input class="delete" type="submit" id="delete" name="submitButton" value="Delete this Option">
</div>
<!-- new -->
<div class="row-spaced">
<input type="submit" id="submitButton" name="submitButton" value="Neither" formnovalidate>
</div>
</form>
Javascript:
function myFunction() {
var continueOption = document.getElementById('continue');
var deleteOption = document.getElementById('delete');
var neither = document.getElementById('new');
$('#myForm').validate({
ignore:'',
rules: {
options: "required"
},
});
// AIM IS TO SHOW A CONFIRMATION BOX IF DELETE IS CLICKED
if(deleteOption) {
deleteOption.addEventListener("click", function(e) {
e.preventDefault();
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this imaginary file!",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
console.log("here");
$('#myForm').submit();
}
});
});
}
}
myFunction();
Backend Illustration:
router.post("/postHERE", (req, res) => {
if (req.body.submitButton == "Continue this Option") {
// Do something CONTINUE
}
else if (req.body.submitButton == "Delete this Option") {
// Do something DELETE
}
else {
// Do something NEW
}
}
JSFiddle:
JSFiddle Example
EDIT:
For the backend I am using Expressjs. I have added this in and fixed a type in the form method to be post.
I like to have a checkbox form that needs to be checked by participants before starting an online experiment. In a php file I have a checkbox form with a submission button “AGREE”, and in a JavaScript file I have the instructions for the behaviour of the pages with a button “NEXT”. Is there a way to deactivate the “AGREE” button of the checkbox form and pass its instruction to the “NEXT” button in the js file? Unfortunately, I could not find the right way to do it.
Thank you very much in advance, I will appreciate any help with this issue.
Function in main.js file:
function Consent()
{
$("#CONSENT").dialog(
{
title: "Consent Form",
height:800, width:1430,
modal:true,
resizable:false,
show: "none",
hide: "none",
buttons:
[
{
text: "Next", click: function()
{
$(this).dialog("close");
Instructions1();
}},
]
});
}
I would like to pass this instruction inside the function Consent:
$(document).ready(function() {
$('#consent').click(function() {
if ($('input:checkbox', this).is(':checked')) {
$(this).dialog("close");
Instructions2();
}
else {
alert('Please all checkboxes!');
return false;
}
});
});
PHP file:
<form id="consent" onclick="Instruction1" method="post">
<input type="checkbox" name="consent" value="agree" required>I have read the information sheet;
<br>
<input type="checkbox" name="consent" value="agree" required>I consent to the processing of my personal information;
<br>
<input type="checkbox" name="consent" value="agree" required>I consent to participate in this study.</p>
<br>
<input required type="submit" name="consent" value="AGREE">
</form>
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/
In the jQuery 'ready' block, I have:
// bind print work order button to form submit
$('#print_work_order_button').click(function(){
$('#print_work_order_form').submit();
});
... and in the HTML (ignore the variable replacement code... it's working fine):
<form id="print_work_order_form" method="post" action="<TMPL_VAR NAME=SCRIPT_NAME>" target="_blank">
<input type="hidden" name="action" value="printWorkOrder">
<input type="hidden" name="case_id" value="<TMPL_VAR NAME=ID>">
<input type="hidden" name="session_id" value="<TMPL_VAR NAME=SESSION_ID>">
</form>
However, when I click the following button:
<input id="print_work_order_button" type="button" value="Print Work Order">
... a different form gets submitted. The form that gets submitted is case_form, which is being validated in the jQuery ready block as well:
// validate main form
$('#case_form').validate({
debug: false,
rules: {
phone: {
phoneUS: true,
required: true
}
[more rules etc...]
},
messages: {
phone: '555-555-5555',
client_group_id: 'X',
description: 'X',
backup_data: 'X',
first_name: 'X',
last_name: 'X',
email: 'X'
},
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field.'
: 'You missed ' + errors + ' fields.';
displayMessage(message);
}
},
submitHandler: function(form) {
displayMessage('Saving and syncing with Remedy... we appreciate your patience.', '1');
form.submit();
}
});
My only recent change was moving this validate routine into the 'ready' block, so I think that's the problem but I don't know how to fix. I need validate in the 'ready' block in order for that to work... so how do I fix my other, unrelated form submit?
NOTE: oddly, this appears to be a Safari-only bug. I cannot reproduce in any other browser yet.
Can you use a submit button instead?
<form id="print_work_order_form" method="post" action="<TMPL_VAR NAME=SCRIPT_NAME>" target="_blank">
<input type="hidden" name="action" value="printWorkOrder">
<input type="hidden" name="case_id" value="<TMPL_VAR NAME=ID>">
<input type="hidden" name="session_id" value="<TMPL_VAR NAME=SESSION_ID>">
<input id="print_work_order_button" type="submit" value="Print Work Order">
</form>
$('#print_work_order_form').submit();
or
$('#print_work_order_form').validate();
It's hard to say without seeing more of your code, but it should work if you change your binding to preventDefault():
// bind print work order button to form submit
$('#print_work_order_button').click(function(e){
e.preventDefault();
$('#print_work_order_form').submit();
});
If I recall correctly some browsers will treat any of the following HTML input types as "submit" buttons when clicked.
<input type="image" ... />
<input type="submit" ... />
My guess would then be that your <input id="print_work_order_button" type="button" value="Print Work Order"> is actually living inside the form that is being accidentally submitted.
If I may make a suggestion it would be to NOT define click handlers for a form's buttons, but rather to override a form's submit handler so that no matter how a form is submitted (e.g., by clicking an image, clicking submit or hitting enter), your code will always get called.