I got a confirmation alert to confirm a user action.
on click "ok", it should do the following code:
function disableSubmitButton() {
jQuery("#submitButton").attr("disabled", "true");
jQuery("#rent_space").submit();
}
on "cancel", the following.
if (!confirm('Are you sure you want to proceed ?')) {
return false;
}
However, the way my code is currently formated, the first block of code is executed regardless of which button is pressed.
I think this is pretty much just moving the code around, but I'm unsure how to correctly do it as my precedent attempts all failed. Any help appreciated. Thanks !
Full code:
<script>
jQuery(document).ready(onDocumentReady);
function onDocumentReady() {
jQuery("#submitButton").click(disableSubmitButton);
jQuery('#submitButton').click(function() {
if (!confirm('Are you sure you want to proceed ?')) {
return false;
}
});
}
function disableSubmitButton() {
jQuery("#submitButton").attr("disabled", "true");
jQuery("#rent_space").submit();
}
</script>
You can try:
//jQuery("#submitButton").click(disableSubmitButton);
jQuery('#submitButton').click(function() {
if (!confirm('Are you sure you want to proceed ?')) {
return false;
}
else
{
disableSubmitButton();
}
});
Do you really need to disable the submit button? Returning false on the other click should be enough.
<script>
jQuery(document).ready(onDocumentReady);
function onDocumentReady() {
jQuery('#submitButton').click(function() {
if (!confirm('Are you sure you want to proceed ?')) {
return false;
}
});
}
</script>
However I would instead bind to the submit event:
<script>
jQuery(document).ready(onDocumentReady);
function onDocumentReady() {
jQuery('#rent_space').submit(function() {
if (!confirm('Are you sure you want to proceed ?')) {
return false;
}
});
}
</script>
You only need one event listener. The condition can be handled in the listener body.
jQuery("#submitButton").click(function(e) {
e.preventDefault();
if(confirm("...")) {
jQuery("#submitButton").attr("disabled", "true");
jQuery("#rent_space").submit();
}
});
NB. you should use e.preventDefault() instead of return false to prevent the default behaviour of an event.
Hari's answer is correct. I prefer the (slightly) more idiomatic:
jQuery("#submitButton").click(function() {
if (confirm("Are you sure you want to proceed?")) {
disableSubmitButton();
} else {
return false;
}
});
EDIT EDIT I got it to work thanks to your suggestions. Thank you. :)
Heres the code that worked.
<script>
jQuery(document).ready(onDocumentReady);
function onDocumentReady() {
jQuery('#submitButton').click(function() {
if (!confirm('Are you sure you want to proceed ?')) {
return false;
}
else{
jQuery("#submitButton").click(disableSubmitButton);
}
});
}
function disableSubmitButton() {
jQuery("#submitButton").attr("disabled", "true");
jQuery("#rent_space").submit();
}
</script>
Related
I have this function:
$(document).ready(function() {
$('#time-options').on('change', function() {
if ($('#time-options').prop('checked')) {
$('#time-options-div').slideDown(500);
return false;
} else {
$('#time-options-div').slideUp(500);
return false;
}
});
});
So whenever the #time-options is checked, the div slides down. But sometimes the #time-options is already selected when the page loads, so in this case I would like the #time-options-div to be already open.
How can I achieve this?
Try to invoke the change event manually once, after the event got bound.
$('#time-options').on('change', function(){
if($('#time-options').prop('checked')){
$('#time-options-div').slideDown(500);
return false;
}else{
$('#time-options-div').slideUp(500);
return false;
}
}).change();
The simplest way is to also run the block inside the on change function. With some refactoring you can also have:
$(document).ready(function(){
function slide(){
if($('#time-options').prop('checked')){
$('#time-options-div').slideDown(500);
return false;
}else{
$('#time-options-div').slideUp(500);
return false;
}
}
$('#time-options').on('change',slide);
slide();
});
I have a form that needs to get submitted. After clicking on submit I have a javascript alert/confirm that asks: Are you sure you want to submit the order?
If the user clicks "OK", I want to execute a JQuery method. But if they click "Cancel", I don't want to execute anything. Is there a way to do this?
Here's the JQuery I want to submit if they click "Ok":
<script>
$(document).ready(function() {
$('#saving').click(function() {
// do something
});
});
</script>
my button:
Save
The javascript popup:
function askUserIfTheyAreSure() {
var check = confirm("Are you sure you want to submit the order?");
if(check == true) {
document.forms["myform"].submit();
}
}
I suggest this way:
<script>
$(document).ready(function() {
$('#saving').click(function() {
if(confirm("Are you sure you want to submit the order?")){
document.forms["myform"].submit();
}else{
return false;
}
});
});
</script>
Do you mean, like this?
<script type='text/javascript'>
function askUserIfTheyAreSure(){
var check = confirm('Are you sure you want to submit the order?');
if(check == 1) {
// run you jQuery Function Here
}
else{
// do something else
return false;
}
}
$(document).ready(function(){
$('#saving').click(askUserIfTheyAreSure);
</script>
Really, I would use external JavaScript, so it's cached.
Just copy whatever you have inside "click" code into the "check==true" block.
It won't be executed if user clicks cancel.
function askUserIfTheyAreSure() {
var check = confirm("Are you sure you want to submit the order?");
if(check == true) {
// do something begin
// do something end
document.forms["myform"].submit();
}
}
Im having problem altering jQuerys beforeunload() functionality, depending on user actions.
$(document).ready(function() {
$(window).bind('beforeunload', function() {
if (billChanged == false) {
return false;
}
else if ( savebutton was clicked ) {
return false;
}
else {
return "refreshing page without saving, huh? you're a bad boy!";
}
});
});
The issue im having, that i can't come up with a way to check if 'savebutton' was clicked, as typed in else if clause in the snippet above.
The form itself is quite complicated, and i'm not able to alter it that much.
$(document).ready(function() {
var not_saved = true;
$('#saveButtonId').on('click', function() {
not_saved = false;
})
$(window).on('beforeunload', function() {
if (not_saved && billChanged)
return "refreshing page without saving, huh? you're a bad boy!";
}
});
});
you can define a global variable. Change it's value onclick of the button, and then check it in your function
var clickedButton = false;
Then your html
<input type="button" .... onclick="clickedButton=true;">
and then in your function
else if ( clickedButton ) {
return false;
}
Basically if I have which will download a file. If the user says NO to confirm("Do you agree?") dialog, we don't want to let the user download this file.
This is all done with HTML and Javascript. All on client.
We want to kill the <a> to continue. Is it possible? Or can we deferred <a> ?
Thanks
Use
return false;
in your function someFunction() which trigger in onclick event.
function someFunction() {
return confirm("Do you agree?");
}
Confirm function returns to user's answer, and someFunction return it to <a>'s onclick. If it false, it will be stopped to link to an href.
Or use preventDefault:
function someFunction(e) {
if (!confirm('.. ')) e.preventDefault();
// continue download
}
You can return false to onclick event.
function someFunction()
{
if(confirm("Do you want to download now ?")) {
return true;
}
else
{
return false;
}
}
Click here
function someFunction() {
if(confirm("Do you want to download now ?") ) {
// download file code goes here
} else {
return false;
}
}
Test
function someFunction() {
if (confirm("Do you agree?")) {
/* some code if YES */
return true;
}
else {
/* some code if NO */
return false;
}
}
Or:
Test
function someFunction(event) {
if (confirm("Do you agree?")) {
/* some code if YES */
}
else {
/* some code if NO */
if (event.preventDefault) event.preventDefault();
else event.returnValue=false;
}
}
I am currently trying to add a JavaScript confirm message when a user attempts to deselect an option.
If a user selects cancel on the confirm screen the check box should remain ticked. The problem I am having is that the check box becomes unchecked even if I return false.
Code example can be found here http://jsfiddle.net/Amjzv/
HTML
<div class="ServiceDesc Alternate">
<span class="expandable">
<input id="ctl01_chk" type="checkbox" name="ctl01$chk" checked="checked">
</span>
</div>
JQuery
$(document).ready(function () {
//each load to persist state
$('.expandable').each(function () {
ToggleCheckboxes($(this),false);
});
$('.expandable').click(function () {
ToggleCheckboxes($(this),true);
});
});
//toggle child checkbox show/hide
function ToggleCheckboxes(checkboxSpan, showConfirm) {
if (checkboxSpan.find(':checked').length > 0) {
checkboxSpan.parent().find('.indent').show();
}
else {
if (showConfirm) {
var answer = confirm("Are you sure?");
if (answer) {
checkboxSpan.parent().find('.indent').hide();
}
else {
return false;
}
}
else {checkboxSpan.parent().find('.indent').hide();}
}
}
Simplest Way
$("#ctl01_chk").click(function() {
if(confirm("Are you sure?")) {
// continue;
} else {
return false;
}
});
Demo
You need to use preventDefault() rather than returning false ... you can do this by passing the event to the function that shows the confirm
$(document).ready(function () {
//each load to persist state
$('.expandable').each(function () {
ToggleCheckboxes($(this),false);
});
$('.expandable').click(function (event) {
ToggleCheckboxes($(this),true,event);
});
});
//toggle child checkbox show/hide
function ToggleCheckboxes(checkboxSpan, showConfirm,event) {
if (checkboxSpan.find(':checked').length > 0) {
checkboxSpan.parent().find('.indent').show();
}
else {
if (showConfirm) {
var answer = confirm("Are you sure?");
if (answer) {
checkboxSpan.parent().find('.indent').hide();
}
else {
event.preventDefault();
}
}
else {checkboxSpan.parent().find('.indent').hide();}
}
}
Working example here
you should pass the click eventObject to your function so you can do
e.preventDefault();
Here's an update
You are returning false inside your custom function, but not inside the function assigned to the click event. just fix the following line:
$('.expandable').click(function () {
return ToggleCheckboxes($(this),true);
});