Can I stop <a> action? - javascript

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;
}
}

Related

jQuery function to work on load

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();
});

jQuery - trying to do a function inside an if statement

I'm trying to add some validation to a form. I have a jQuery function that is doing exactly what I want:
jQuery('#post').submit(function() {
if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
return true;
}else{
alert("Please set a Featured Image!");
jQuery('#ajax-loading').hide();
jQuery('#publish').addClass('button-primary-disabled');
return false;
}
return false;
});
However, I want to change it so that this function only runs if a radio button elsewhere on the page is selected. So I tried this:
if (jQuery('#top').checked) {
jQuery('#post').submit(function() {
if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
return true;
}else{
alert("Please set a Featured Image!");
jQuery('#ajax-loading').hide();
jQuery('#publish').addClass('button-primary-disabled');
return false;
}
return false;
});
}
That doesn't work - the function doesn't get called even if #top is checked. Can anyone explain why? I'm used to PHP, and JavaScript often throws curveballs at me.
What does firebug or Chrome console tell you? You could try something like this:
$('#top').is(':checked')
as in (thanks RET):
jQuery('#post').submit(function() {
if ($('#top').is(':checked')) {
if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
return true;
}else{
alert("Please set a Featured Image!");
jQuery('#ajax-loading').hide();
jQuery('#publish').addClass('button-primary-disabled');
return false;
}
}
return false;
});
try
$('#top').is(':checked')
but the function submit only binds the function and calls it every time submit is clicked.
so you must put the checked check in the submit function
jQuery('#post').submit(function() {
if(!$('top').is(':checked')){ return };
if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
return true;
}
alert("Please set a Featured Image!");
jQuery('#ajax-loading').hide();
jQuery('#publish').addClass('button-primary-disabled');
return false;
});
Yeah, that logic won't quite do what you're hoping for. Try something like:
jQuery('#post').submit(function() {
if ($('#top').is(':checked')) {
// all your existing code
I could be wrong, but I don't think the answer given by #greener is going to work, because that will only declare the submit function if #top is checked at page create time.

jquery beforeunload messages depending on button clicked

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;
}

Checkbox confirm message - Remain checked if 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);
});

Jquery simple if statement confusion

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>

Categories

Resources