Do something depend on element id with jQuery - javascript

I have some function inside click action. I need to stop this function if the last of my html list element will be have some id, so I do this but function does not work... Can you help me?
carousel_controls_buttons.on('click', function(){
var settings_list_last_element_id = settings_menu_element.attr('id') == 'r_00';
if (settings_menu_element.last(id === settings_list_last_element_id)) {
}
else {
renumNext();
}
});

Try changing:
if (settings_menu_element.last(id === settings_list_last_element_id))
to
if (settings_menu_element.last().attr('id') === settings_list_last_element_id)
Edit:
if (settings_menu_element.last().attr('id') === settings_list_last_element_id){
return false;
} else {
renumNext();
}
Or even better:
if (settings_menu_element.last().attr('id') !== settings_list_last_element_id){
renumNext();
}

Your if-statement looks a bit odd. Try something like this instead:
carousel_controls_buttons.on('click', function(){
// Do nothing if last element has a certain id-attribute
if (settings_menu_element.last().attr("id") === 'r_00') {
return false;
}
renumNext();
});

Related

jQuery callback not working properly

I have the following code and the callback doesn't seem to work properly. My understanding is that if the username is undefined or blank then the #username-error div should show and the error class should be added to the get added to the username input. Only once all of that is done should the alert get fired. However, when I look in my browser, the error div does not show, and the alert gets triggered. So clearly the class 'error' is getting added, and therefore it's reasonable to suggest that the #username-error div is having the .show() function called upon it but it sure does't look like it. Any help you can give me getting the alert to fire only once the #username-error div has appeared would be greatly appreciated.
<script type="text/javascript">
$(document).ready(function() {
$("input[name='username']").bind("blur", function() {
validateUsername(myFunction);
});
$("input[type='submit']").bind("click", function() {
validateUsername(myFunction);
});
$("#username-error").hide();
$("#username-success").hide();
});
function myFunction() {
if ($(".error").length > 0) {
alert("errors on page");
return false;
}
}
function validateUsername(callback) {
var $username = $("input[name='username']");
if (typeof $username.val() === "undefined" || $username.val() === "") {
$("#username-error").show();
$("#username-success").hide();
$username.addClass("error");
} else {
$("#username-error").hide();
$("#username-success").show();
$username.removeClass("error");
}
if (callback) {
callback();
}
}
</script>
You need to add a return the button click
$("input[type='submit']").bind("click", function() {
return validateUsername(myFunction);
});
and you should return true
function myFunction() {
if ($(".error").length > 0) {
alert("errors on page");
return false;
}
return true;
}
and add return in the validate method
function validateUsername(callback) {
var $username = $("input[name='username']");
if (typeof $username.val() === "undefined" || $username.val() === "") {
$("#username-error").show();
$("#username-success").hide();
$username.addClass("error");
} else {
$("#username-error").hide();
$("#username-success").show();
$username.removeClass("error");
}
if (callback) {
return callback();
}
}
but the use of the callback in this really does not make much sense.

Handling Multiple IDs In A Single jQuery Statement

I've tried searching the site, but am really struggling to find what I want... Basically I have some jQuery code that checks the state of three IDs, they are tied to three checkboxes;
$('#submitButton').click(function(){
if($("#cb1,#cb2,#cb3").is(':checked'))
return true;
else
return false;
});
How would I restructure this jQuery statement to make it so that all three checkboxes have to be CHECKED? At the moment, either one can be checked for the action to be performed
I'm betting there is a really simple solution to all of this, but I have been lpooking at it for so long, I just can't see it. Could someone with a fresh pair of eyes and a less addled brain please steer me in the right direction?
You need to use:
$('#submitButton').click(function(){
if ($('#cb1').is(':checked') && $('#cb1').is(':checked') && $('#cb3').is(':checked')) {
return true;
} else {
return false;
}
});
Use
if($("#cb1").is(':checked') && $("#cb2").is(':checked') && $("#cb3").is(':checked'))
$("#cb1,#cb2,#cb3").is(':checked') will return result for the 1st element only
Try:
$('#submitButton').click(function(){
if($("#cb1:checked,#cb2:checked,#cb3:checked").length === 3)
return true;
else
return false;
});
You can use:
if ($('#cb1:checked,#cb2:checked,#cb3:checked').length == 3) {
//all three are checked.do something
}
or
if ($('#cb1:checked,#cb2:checked,#cb3:checked').length == $('#cb1,#cb2,#cb3').length) {
//all three are checked.do something
}
You could try:
$('#submitButton').click(function(){
if($('#cb1')[0].checked && $('#cb2')[0].checked && $('#cb3')[0].checked)return true;
return false;
});
You can just add a class to your checkboxes and use like so:
$('#submitButton').click(function(){
if($(".myCheckbox:checked").length == 3) {
console.log('true');
}
else {
console.log('false');
}
});
Here is the JSFiddle Example:
http://jsfiddle.net/cLH8s/1/

how to stop execution with return false in javascript?

i have the fallowing example:
<input type="button" id="create_account" value="Save">
var Misc = {
validateForm: function () {
if(x == 1){
return false;
}
// this is a simplified example, but sometimes x != 1 and there is no return
}
}
$(document).on('click', '#create_account', function() {
Misc.validateForm();
alert('continue');
});
the issue i'm having is that i get continue, even though i return false.
what i would like to happen is to run the alert only if Misc.validateForm(); doesn't return anything
any ideas on this issue?
if (Misc.validateForm() !== false) {
alert('continue');
}
You need to
$(document).on('click', '#create_account', function() {
if(Misc.validateForm() === false){
return;
}
alert('continue');
});
Right now you are returning false but that does not determine that execution stops. You should use something along the lines of:
if (!Misc.validateForm()) {
alert('continue');
}

How to improve my codes to implement 'return false'?

I am trying to return false after a conditional statement fail.
I have
$('#btn').click(function() {
$('.title').each(function() {
if (id == $(this).attr('id')) {
alert('The name already exists.')
return false; //I hope my codes would stop here if condition is true
}
})
// my codes still call the doSomething function even if the conditional
//statement is true
doSomething();
})​
I want do call the doSomething function ONLY if id != $(this).attr('id).
The codes below gave me what I want but it seems ugly.
$('#btn').click(function() {
var nameExist = false
$('.title').each(function() {
if (id == $(this).attr('id')) {
alert('The name already exists.')
nameExist = true;
return false; //I hope my codes would stop here if condition is true
}
})
if (!nameExist) {
doSomething();
}
})​
Anyone has a better approach for this? Thanks a lot!
Switch to a basic for loop.
$('#btn').click(function() {
var elements = $(".title");
for (var i = 0; i < elements.length; i++) {
if (id == elements[i].id) {
alert('The name already exists.')
return false; //I hope my codes would stop here if condition is true
}
}
doSomething();
})​
You don't need to iterate thrue the elements, you can get it by the id and class like, #myId.myClass.
$('#btn').click(function() {
if($('#' + id + '.title').length) {
alert('The name already exists.');
} else {
doSomething();
}
});
If you don't mind not exiting the loop early, you can use jQuery filter
$('#btn').click(function(){
var itensWithSameName = $('.title').filter(function(){
return id == $(this).attr('id');
})
if(itensWithSameName.size() > 0)
alert('The name already exists.');
});
I think what you have is fine, but this avoids the extra conditional:
var func = doSomething;
...
if (id == $(this).attr('id')) {
func = $.noop;
...
func();

jQuery: check the value of all <select>s on a page

I have a form with several <select> elements on it.
I'd like to check that the value of all select elements is '0'. How can I do this elegantly?
Currently I have this:
var all_zero = true;
$('myform select').each(function() {
if ($(this).val() !== '0') {
all_zero = false;
}
});
if (all_zero) { //do something
Does anyone know a nicer way to do it?
Test for the value in the selector.
var non_zero = $('myform select[value!="0"]').length;
if (non_zero === 0) { //do something
So if there's no select that does not have the value "0", non_zero === 0 will be true.
That is the correct way to do it, one way for getting it cleaner is only declaring a variable when necessary. like so:
$('myform select').each(function() {
if ($(this).val() !== '0') {
some_zero = true;
}
});
if (!some_zero) { //do something
Your code is nice and you can try :
var all_zero = $('myform select').filter(function(){return $(this).val()!='0'}).length>0

Categories