CODEWITHSUNDEEP
jquery
NewUser
NewUser

Reputation: 13333

jQuery use multiple condition in if statement

i have 3 input fields like this

<input type="text" id="from-price" name="from-price"/>
<input type="text" id="to-price" name="to-price"/>
<input type="text" id="price" name="price"/>

and I want that when the values entered in all the fields it will show a button So for that I have my code like this

var val1 = jQuery('#from-price').val().length;
        var val2 = jQuery('#to-price').val().length;
        var val3 = jQuery('#price').val().length;
if (val1 && val2 && val3  < 1 ) {
                jQuery('#add-fields').attr("disabled", false);
            }

But this is not working.

Update Every time I am getting length 0 why? Even after text entered?

Upvotes: 0

Views: 19664

Answers (9)

Joke_Sense10
Joke_Sense10

Reputation: 5402

I am assuming that you want to enable the button if all the fields are filled, if so then your if condition is incorrect. It should be greater then 0 which indicates that the field is not empty.Try this:

if (val1 > 0 && val2 > 0 && val3 > 0 ) {
     jQuery('#add-fields').attr("disabled", false);
     }

Updated answer:If you want to check instantly, then you need to attach an event handler.Try this:

$("input").on("keyup",function(){
    var val1 = jQuery('#from-price').val().length;
    var val2 = jQuery('#to-price').val().length;
    var val3 = jQuery('#price').val().length;
if (val1 >0 && val2 > 0 && val3  > 0 ) {
            jQuery('#add-fields').attr("disabled", false);
}
});

Demo

Upvotes: 0

techMonster
techMonster

Reputation: 226

I have put up a fix for this problem as part of this fiddle. Do let me know if that works for you.

http://jsfiddle.net/3STqm/

As part of the fiddle, the HTML code looks like:

<input type="text" id="from-price" name="from-price"/>
<input type="text" id="to-price" name="to-price"/>
<input type="text" id="price" name="price"/>
<button id="theButton">Submit</button>

And the jQuery code looks like:

var items = $("#from-price,#to-price,#price");

var button = $("#theButton").hide();

items.change(function(){
    var availableDataSize http://jsfiddle.net/3STqm/= items.map(function(){
        return $.trim($(this).val()) != "" ? true : null;
    }).length;                    
    availableDataSize == items.length ? button.show() : button.hide();
});

It simply tries to find the amount of data available and if that is equal to the number of fields, then show the button else hide it.

Upvotes: 0

Dhaval Bharadva
Dhaval Bharadva

Reputation: 3083

Replace your if condition with the following: 

if (val1 > 0 && val2 > 0 && val3 > 0 ) {
    jQuery('#add-fields').attr("disabled", false);
}

JSFIDDLE DEMO

Upvotes: 1

Shomz
Shomz

Reputation: 37701

Seems like you're checking the values only on page load. That's why it always shows 0 unless you prefill the form some way.

To make the check dynamic, put your code into a function and wrap it inside a change function:

$('input').change(my_function);

Of course, it would be great to add a class to those three inputs you have and then use a class selector (in case there are more inputs on the page): $('input.my_class')...

Also, your if clause can be something like this: 

if (val1 > 0 && val2 > 0 && val3 > 0) {
    jQuery('#add-fields').attr("disabled", false);
}
else {
    jQuery('#add-fields').attr("disabled", true);
}

Upvotes: 0

Ram
Ram

Reputation: 144659

var $i = $('input.prices').on('change', function(){
    var b = $i.filter(function() {
       return $.trim(this.value).length > 0; 
   }).length !== $i.length;

   $('#add-fields').prop("disabled", b);
});

Upvotes: 3

adeneo
adeneo

Reputation: 318182

var elems = $('#from-price, #to-price, #price');

elems.on('keyup', function() {
    var hasValue = elems.filter(function() {
        return this.value.length
    }).length != elems.length;

    $('#add-fields').prop("disabled", hasValue);
});

FIDDLE

Upvotes: 5

Arun P Johny
Arun P Johny

Reputation: 388316

Use .prop() to set the disabled state

jQuery(function ($) {
    var $from = $('#from-price'),
        $to = $('#to-price'),
        $price = $('#price'),
        $add = $('#add-fields');

    $from.add($to).add($price).change(function () {
        $add.prop('disabled', !($.trim($from.val()).length && $.trim($to.val()).length && $.trim($price.val()).length))
    });
})

Demo: Fiddle

Upvotes: 1

Bhadra
Bhadra

Reputation: 2104

$(document).on('change','#from-price, #to-price, #price',function(){
    var val1 = jQuery('#from-price').val();
    var val2 = jQuery('#to-price').val();
    var val3 = jQuery('#price').val();
       if (val1!="" && val2!="" && val3!="" ) {
            jQuery('#add-fields').attr("disabled", false);
        }else{
            jQuery('#add-fields').attr("disabled", true); 
         }

});

Upvotes: -1

user2445124
user2445124

Reputation: 

    var val1 = jQuery('#from-price').val().length;
    var val2 = jQuery('#to-price').val().length;
    var val3 = jQuery('#price').val().length;

    if (val1 > 0 && val2 > 0 && val3  > 0 ) {
            jQuery('#add-fields').attr("disabled", "false");
    }

This should work.

Upvotes: 0

Related Questions