Trying to set a conditional within a jQuery blur() event - javascript

I'm trying to get an input box to perform on blur() either set a value of 0.000 if the value entered is an empty string and if it isn't then perform some function. This is what I have. Help me out here, I don't know the appropriate syntax on how to do this.
jQuery("#10kt-weight").blur(function(){
if(valueOf("#10kt-weight") == "") {
jQuery("#10kt-weight").val("0.000");
} else {
calc_value();
}
});

jQuery("#10kt-weight").blur(function(){
if(jQuery("#10kt-weight").val() === "") {
jQuery("#10kt-weight").val("0.000");
} else {
calc_value();
}
});

Since your function is executed by the .blur() method, using this inside the function will refer to #10kt-weight, you can get the actual value of your element with jQuery(this).val() (or this.value) Try this:
jQuery("#10kt-weight").blur(function(){
if(jQuery(this).val() == "") {
jQuery(this).val("0.000");
} else {
calc_value();
}
});

You can try with jQuery.trim() to trim spaces and .length to check if there are characters after trim the input value
jQuery("#10kt-weight").blur(function(){
if(jQuery.trim(jQuery(this)).length) {
jQuery(this).val("0.000");
} else {
calc_value();
}
});

Related

Why the readonly false property is not working for the textbox?

I have an MVC dropdown and when its value changes it should make the textbox readonly and editable for certain values. I tried this, but it doesn't work.
$("#Users_UserGroupID").change(function () {
if ($("#Users_UserGroupID").val != "2") {
$("#Users_ClientName").prop("readonly", true);
$("#Users_ClientName").val("")
} else if ($("#Users_UserGroupID").val == "2") {
$("#Users_ClientName").attr("readonly", false)
$("#Users_ClientName").val("")
}
});
You need to invoke the val() method, not compare the reference to val. Also note that the logic can be simplified. Try this:
$("#Users_UserGroupID").change(function () {
$("#Users_ClientName").prop("readonly", $("#Users_UserGroupID").val() != "2").val("")
});
can you please try
$("#Users_ClientName").attr("readonly", "readonly");
instead of
Users_ClientName").prop("readonly", true);
as because readonly does not accept true or false.
and to remove you can use
$("#Users_ClientName").removeAttr("readonly");
Hope this will work.

jQuery AddClass method not working

I am trying to add a new class to a "submit" input after checking that other form elements are filled up. I´m using .keyup() to trigger the function. This function changes the property "disabled" to "false", but after that it does not add the class " animate pulse ". Thanks!
<script> //checks that all fields are completed before enabling submit button
$(document).ready(function() {
$('input[type="submit"]').prop('disabled', true);
$('input[type="text"],input[type="email"],input[type="password"]').keyup(function() {
if($('#log_password').val() != '' && $('#log_email').val() != '') {
$('input[type="submit"]').prop('disabled', false).addClass("animated pulse");
}
else{
$('input[type="submit"]').prop('disabled',true);
}
});
});
</script>
Your problem is how are you using the prop() function since this function does not return anything, and the addClass() function needs to be called from a jQuery object.
As you can see on the prop defintion it says:
Returns: Anything
This practice is called Chaining and in order to do Chaining functions those functions should return a jQuery Object.
More info
You can rewrite your line of code by something like this:
$('input[type="submit"]')
.addClass('animated pulse')
.prop('disabled', false);
Add seperately the addclass()
$(document).ready(function() {
$('input[type="submit"]').prop('disabled', true);
$('input[type="text"],input[type="email"],input[type="password"]').keyup(function() {
if($('#log_password').val() != '' && $('#log_email').val() != '')
{
$('input[type="submit"]').prop('disabled', false);
//add in next line
$('input[type="submit"]').addClass('animated pulse');
}
else{
$('input[type="submit"]').prop('disabled',true);
}
});
});

If/Else Conditional not running the second time I call the function

When I run the function the first time, either condition will work. But when I run the function a second time, the new value of "cute" will not change the background image.
$("#sbmt-button").click(newImage);
function newImage(){
event.preventDefault();
var cute = $("#cute").val();
$("#cute").val(" ");
if (cute == "kittens") {
$("body").attr("class", "kittens");
console.log(cute);
} else if (cute == "puppies"){
$("body").attr("class", "puppies");
console.log(cute);
}
}
http://codepen.io/ElaineM/pen/jbYbwj
Your code actually works, but only thing is you need to use $("#cute").val(""); instead of $("#cute").val(" ");, which puts a space and it doesn't match the values.
Also, you may try doing the comparison this way by trimming the empty spaces:
function newImage(){
event.preventDefault();
var cute = $("#cute").val().trim();
$("#cute").val(" ");
if (cute == "kittens") {
$("body").attr("class", "kittens");
console.log(cute);
} else if (cute == "puppies"){
$("body").attr("class", "puppies");
console.log(cute);
}
}
The line $("#cute").val(" "); puts a space in the text box. What you want is an empty string: $("#cute").val("");
Replacing it with an empty string seems to give you your desired output.
PROBLEM
You need to use event object e passed to event handler as an argument, otherwise your button acts as a submit button and the page gets refreshed.
SOLUTION
Use the following code instead:
function newImage(e){
e.preventDefault();
var cute = $("#cute").val();
console.log(cute);
if (cute === "kittens") {
$("body").attr("class", "kittens");
} else if (cute === "puppies"){
$("body").attr("class", "puppies");
}
// Reset input
$("#cute").val("");
}
EXAMPLE
See updated example for demonstration.

how to change textbox background color through javascript?

my javascript-
function validate_loginform(loginform)
{
var uid = loginform.uid.value;
var pass = loginform.pass.value;
if(uid == "")
{
color('uid');
return false;
}
if(pass == 0)
{
color('pass');
return false;
}
return true;
}
function color(traget)
{
var targetbox = document.getElementById(target);
targetbox.style.backgroundColor="red";
}
but background color is not getting changed even it is not returning fasle value. if I remove the color('uid'); nad put alert("user name required"); then this script is working fine.Whats wrong?
it backgroundColor in actual program I just missed it here only
With jQuery you could try this:
$("#textbox").css("background-color", "red");
dont call color function, change color inside if condition like-
if(uid == "")
{
//alert("You must enter User ID.","error");
loginform.uid.style.borderColor='red';
loginform.uid.focus();
return false;
}
Typo?
backgroungColor
^
Update
Typo?
function color(traget)
^^^^^^
{
var targetbox = document.getElementById(target);
Seriously, actual code does matter.
Beware your spelling. It should be "target", not "traget".
function color(traget)
You've spelt target wrong in your function header and background wrong in the last line of the function.
just remove the single quote (') from color('uid')
and write it as color(uid);

How to check if a Textarea is empty in Javascript or jQuery?

How do I check if a textarea contains nothing?
I tried with this code:
if(document.getElementById("field").value ==null)
{
alert("debug");
document.getElementById("field").style.display ="none";
}
But it doesn't do what I expect.
I expect that it should appear a messagebox "debug" and that the textarea is not shown.
How can I fix that issue?
You wanna check if the value is == "", not NULL.
if(document.getElementById("field").value == '')
{
alert("debug");
document.getElementById("field").style.display ="none";
}
UPDATE
A working example
And another one using TRIM in case you wanna make sure they don't post spaces
Implementation for TRIM()
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
}
You can use following jQuery to escape white spaces as well.
if($("#YourTextAreaID").val().trim().length < 1)
{
alert("Please Enter Text...");
return;
}
There is a world of difference between null and empty !
Try this instead:
if(document.getElementById("field").value == "")
{
alert("debug");
document.getElementById("field").style.display ="none";
}

Categories