I have this function, see below:
function checkStartPrice (){
if ($('#StartingPrice')[0].value.length == 0){
alert("The 'Starting Price' cannot be left empty!");
return false;
} else {
var BuyItNowPrice = parseFloat($('#BuyItNowPrice').val());
var StartingPrice = parseFloat($('#StartingPrice').val());
var Reserve = parseFloat($('#Reserve').val());
if((BuyItNowPrice <= StartingPrice) && (StartingPrice > 0)){
alert("The 'Buy It Now' price must be higher...");
return false;
}
if((Reserve <= StartingPrice) && (StartingPrice > 0)){
alert("Your 'Reserve Price' must be higher...");
return false;
}
return true;
}
}
Question: How do I call it on blur? I tried this code below but it doesn't seem to work:
$('#StartingPrice').blur(function(){
checkStartPrice();
});
This is the correct way to call it.
The only reason it may fail is that the #StartingPrice element does not exist at the time of the .blur() call.
If it is present in the page, use this:
$(document).ready(function() {
$('#StartingPrice').blur(checkStartPrice)
})
If it is dynamically added via AJAX, use this:
$(document).ready(function() {
$('#StartingPrice').live('blur',checkStartPrice)
})
Note that the second solution requires at least jQuery 1.4.1
Related
I have written this scrip to take out ads on a website. Was working on it the whole day.
This is the JS code:
var timer = setInterval(deletor, 1);
function deletor() {
timer;
var slider = document.querySelector("#slider-con");
var bannerTop = document.querySelector("#MainContent > div:nth-child(2)")
var bannerMiddle = document.querySelector("#MainContent > iframe");
var bannerRandom = document.querySelector("#MainContent > div:nth-child(7)");
var bannerRandom2 = document.querySelector("#MainContent > div:nth-child(6)");
if (slider == undefined) {
return false;
} else {
slider.parentNode.removeChild(slider);
};
if (bannerTop == undefined) {
return false;
} else {
bannerTop.parentNode.removeChild(bannerTop);
};
if (bannerMiddle == undefined) {
return false;
} else {
bannerMiddle.parentNode.removeChild(bannerMiddle);
};
if (bannerRandom == undefined) {
return false;
} else {
bannerRandom.parentNode.removeChild(bannerRandom);
};
if (bannerRandom2 == undefined) {
return false;
} else {
bannerRandom2.parentNode.removeChild(bannerRandom2);
};
};
Now, as you can see, it gets the values first and then goes through if statements. Idea behind this is: On first try, it deletes the elements and on the second one, it stops the function.
But when I inserted this last element, it won't delete it. The ID is correct, everything is correct but it won't delete the element, so I keep getting the same alert over and over.
Also, I found out that, I get this banner ad on two places. When I have "var bannerRandom = document.querySelector("#MainContent > div:nth-child(7)");" this, it appears as "document.querySelector("#MainContent > div:nth-child(6)")" this, and when I have both, it appears as "document.querySelector("#MainContent > div:nth-child(6)")" this. And it's not deleted.
Console shows no errors.
Your various statements in the form:
if (slider == undefined) {
return false;
} else {
slider.parentNode.removeChild(slider);
};
mean this: "If slider wasn't found in the DOM, exit the function. Otherwise, remove the slider and continue the function."
So that means your function will terminate the first time one of the elements you're looking for doesn't exist. Since it terminates then, none of the other elements after it is checked. That seems unlikely to be what you want to do.
You probably just wanted:
if (slider) {
slider.parentNode.removeChild(slider);
}
...and so on.
Note that you don't put ; at the end of a block attached to a flow-control statement like if or else, which is why I've removed it above. (Doing so is harmless, because JavaScript ignores them; but it's pointless.)
Here's my problem: the following code stops working if elements above #sizem and/or #sizedivided is not present. The ecommerce store removes the elements/id when a product doesn't require said elements/id.
It seems to me that the code only works if all elements are present at the same time.
Is there another way to do this and avoid the code stopping?
This is supposed to be aplied to a a dropdown with an alert if the user hasn't selected a size and/or color when attempting to purchase/add to basket
$('#prod-buy').click(function(){
if ($("#color")[0].selectedIndex <= 0) {
alert("Select color");
return false;
}
if ($("#sizem")[0].selectedIndex <= 0) {
alert("Select size");
return false;
}
if ($("#sizedivided")[0].selectedIndex <= 0) {
alert("Select size");
return false;
}
});
You should be checking whether each element is present.
With jQuery use the length property:
if($('#sizem').length) {
if ($("#sizem")[0].selectedIndex <= 0) {
alert("Select size");
return false;
}
}
you need to test on whether there's an element. Straight from your code you could do this
$('#prod-buy').click(function(){
if ($("#color")[0] && $("#color")[0].selectedIndex <= 0) {
alert("Select color");
return false;
}
if ($("#sizem")[0] && $("#sizem")[0].selectedIndex <= 0) {
alert("Select size");
return false;
}
if ($("#sizedivided")[0] && $("#sizedivided")[0].selectedIndex <= 0) {
alert("Select size");
return false;
}
});
that way you test wether there's an object before trying to access a property of it (or of undefined). There are other ways to clean it up, but requires more restructuring your code and would thus hide the cuase for you
$(document).ready(function (){
var postcode = $('#postcode-form').val();
function errors(){
if(postcode == ""){
$('#postcode-form').addClass("form-error");
}else{
$('#postcode-form').removeClass("form-error");
}
}
$('#submit-form').click(errors);
});
The class adds when the form is empty but doesn't remove when I enter details in the form. I don't understand why?
Move the postcode chunk of code within your function. Otherwise it gets the value only once when the page loads. By placing it within the function, it'll check the value on each click.
function errors() {
var postcode = $('#postcode-form').val();
if (postcode == "") {
$('#postcode-form').addClass("form-error");
} else {
$('#postcode-form').removeClass("form-error");
}
}
So now you know why it isn't working. I would take advantage of the blunder though, and refactor to cache the selector!
$(document).ready(function (){
var $postcode = $('#postcode-form');
function errors(){
if($postcode.val() == ""){
$postcode.addClass("form-error");
}else{
$postcode.removeClass("form-error");
}
}
$('#submit-form').click(errors);
});
I have this code that validates if ContentPlaceHolder1_locationTextBox has text in it before newIndex can become 3.
if ((newIndex === 3 && $("#ContentPlaceHolder1_locationTextBox").val() == "")) {
$('#ContentPlaceHolder1_locationLabelV').show();
return false;
}
else {
$('#ContentPlaceHolder1_locationLabelV').hide();
}
However I also have ContentPlaceHolder1_countryTextBox & ContentPlaceHolder1_seaTextBox on the page with thier respective labels, how can I modify the script so that it validates against all textboxes?
I tried adding a horrible or statement however this was causing the page to freeze. What s the best method to check against all three textboxes?
You can add class for all inputs, example: validate
After you can create JS function. You can fire this function as you wish.
function check(){
$('.validate').each(function(){
label = $("label[for='"+$(this).attr('id')+"']");
if ((newIndex === 3 && $(this).val() == "")) {
label.show();
return false;
}
else {
label.hide();
}
});
}
function validate(value) {
if ...
//show div
else ...
// hide div
}
$("input[type='text']").each(function(){
//value from input text field
var myval = $(this).val();
//call validation function
validate(myval);
});
Hands up - I can't figure it out what's wrong with it. Is that a bug or a wrong code ?
$(document).ready(function() {
$("#rem_but").click(function(){
var mail_name = $("#mail_rem").val();
var dataString = 'mail_name='+ mail_name;
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").removeAttr("disabled"); };
}); });
So when there's no input the button returns false correctly - when there's an input in the field - still the button returns false, hence the removeAttr() doesn't work - why ? Regards.
try (mail_name.val() == "") change to (mail_name == "")
Are you using jQuery 1.6.x?
If so then you should try using the .prop() function. See below:
Disable/enable an input with jQuery?
Also, in your if statement no need to keep selecting $("#rem_but"). Based on your code I would recommend $(this) instead -
$(this).prop('disabled', true);
This should work -
$(document).ready(function() {
$("#rem_but").click(function(e) {
e.preventDefault();
var mail_name = $.trim($("#mail_rem").val());
var dataString = 'mail_name='+ mail_name;
if (mail_name === "") {
$(this).prop("disabled", true); }
else {
$(this).prop("disabled", false); }
});
});
Here is the working jsFiddle code -
http://jsfiddle.net/4rPc5/
Updated code -
http://jsfiddle.net/4rPc5/2/
Perhaps you need to set the disabled attribute to 'false'?
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").attr("disabled",false); };
}
Or set it to an empty string
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").attr("disabled",""); };
}