jQuery use multiple condition in if statement

Question

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?

You might want to listen to an event and run that code every time that event occurs. — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Nov 30, 2013 at 11:42
Use console.log(jQuery('#from-price').val().length) in firefox / chrome to see what values they output — Catalin
– Catalin, Commented Nov 30, 2013 at 11:44

adeneo · Accepted Answer · 2013-11-30 11:57:22Z

5

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

answered Nov 30, 2013 at 11:57

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ram · Accepted Answer · 2013-11-30 11:58:50Z

3

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

answered Nov 30, 2013 at 11:58

Ram

145k16 gold badges174 silver badges201 bronze badges

Comments

Arun P Johny · Accepted Answer · 2013-11-30 11:49:46Z

1

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

answered Nov 30, 2013 at 11:49

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

2 Comments

Shomz Over a year ago

If you could only minify the code - it would make a beginner developer's life much easier...

Shomz Over a year ago

You know:

jQuery(function(e){var t=e("#from-price"),n=e("#to-price"),r=e("#price"),i=e("#add-fields");t.add(n).add(r).change(function(){i.prop("disabled",!(e.trim(t.val()).length&&e.trim(n.val()).length&&e.trim(r.val()).length))})})

Dhaval Bharadva · Accepted Answer · 2013-11-30 12:02:52Z

1

Replace your if condition with the following:

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

JSFIDDLE DEMO

edited Nov 30, 2013 at 12:02

answered Nov 30, 2013 at 11:44

Dhaval Bharadva

3,0852 gold badges26 silver badges36 bronze badges

7 Comments

Joachim Isaksson Over a year ago

I suspect he wants to check if val > 0 or similar instead, since he wants to enable only if all fields have something filled in.

Dhaval Bharadva Over a year ago

@JoachimIsaksson OP's if condition is contain the syntax error that's the main issue.

Abhitalks Over a year ago

@JoachimIsaksson: "@Dh.." seems to be correct in his interpretation

Joachim Isaksson Over a year ago

@abhitalks "I want that when the values entered in all the fields it will show a button"

NewUser Over a year ago

@Dh...every time I am getting length 0 why?

|

user2445124 · Accepted Answer · 2013-11-30 11:44:23Z

0

    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.

answered Nov 30, 2013 at 11:44

user2445124

Comments

Shomz · Accepted Answer · 2013-11-30 12:00:32Z

0

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

edited Nov 30, 2013 at 12:00

answered Nov 30, 2013 at 11:43

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

3 Comments

Abhitalks Over a year ago

Op is asking about multiple conditions in if statement. The event and handler he probably has already figured out.

Shomz Over a year ago

@abhitalks I'm not sure about that: "I want that when the values entered in all the fields it will show a button"

Abhitalks Over a year ago

That is where he is explaining his use-case. Please see the question title for the problem he is facing.

techMonster · Accepted Answer · 2013-11-30 12:04:15Z

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.

Joke_Sense10 · Accepted Answer · 2013-11-30 12:04:21Z

0

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

edited Nov 30, 2013 at 12:04

answered Nov 30, 2013 at 11:50

Joke_Sense10

5,3972 gold badges20 silver badges22 bronze badges

2 Comments

Shomz Over a year ago

@NewUser Because you need a listener in order to check the values on every change and not only on the page load.

NewUser Over a year ago

@Joke_Sense10 it is fine when I am entering values for the first time but when I am removing the values by backspace then it should again disable the button but in your fiddle when I am removing the values still its showing the button in active?

Bhadra · Accepted Answer · 2013-11-30 11:45:01Z

-1

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

});

answered Nov 30, 2013 at 11:45

Bhadra

2,1041 gold badge13 silver badges19 bronze badges

Collectives™ on Stack Overflow

jQuery use multiple condition in if statement

9 Answers 9

Comments

Comments

2 Comments

7 Comments

Comments

3 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

Comments

2 Comments

7 Comments

Comments

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related