jQuery logical operator not working as expected

Question

I have below code which is not working.

var book_id = $('#indexBookSearch');
var tag_id  = $('#indexTagSearch');

if((book_id.val() == "") || (tag_id.val() == ""))
{
    $('#userMessages').html('<div class="alert alert-info">'+
        '<button type="button" class="close" data-dismiss="alert">&times;'+
        '</button>'+
        '<strong>Information ! </strong> Please select search criteria first.'+
    '</div>');
    return false;
}

if((book_id.val() == "") || (tag_id.val() == "")) this line is not working if even if either of the field has value inside of it.

Both Book and Tag is select box i have checked their value using console.log() and its coming perfectly.

I have also changed

if((book_id.val() == "") || (tag_id.val() == ""))

to

if(book_id.val() == "" || tag_id.val() == "")

EDIT

HTML FORM

<form id="indexSearchForm" action="books/listTags" method="POST">
    <fieldset>
        <legend>Search Criteria</legend>

        <label>Select Book</label>
        <select class="input-large" name="book_id" id="indexBookSearch">
            <option value="">--Select--</option>
            <option value="109">book 1</option>
        </select>

        <label>Select Tag</label>
        <select class="input-large" name="tag_id" id="indexTagSearch">
            <option value="">--Select--</option>
            <option value="10">adding</option>
            <option value="1">Apples</option>
            <option value="39">article</option>
            <option value="34">bhg</option>
            <option value="40">boon</option>
        </select>       
        <button class="btn btn-primary" type="submit">Submit</button>
    </fieldset>
</form>

jQuery Code

$('#indexSearchForm').submit(function(e)
{
    e.preventDefault();

    var book_id = $('#indexBookSearch');
    var tag_id  = $('#indexTagSearch');

    if( !book_id.val() || !tag_id.val())
    {
        $('#userMessages').html('<div class="alert alert-info">'+
            '<button type="button" class="close" data-dismiss="alert">&times;</button>'+
            '<strong>Information ! </strong> Please select search criteria first.'+
        '</div>');
        return false;
    }
    // more process
});

Thanks.

What is the logic you are looking for? If either one is filled out, then you're ok? Or if both are not filled out, then there is a problem? Something else? — Aiias, Jun 26 '13 at 05:24
@Aiias i want to validate form to ask for user to fill in either of form fields.. — Dipesh Parmar, Jun 26 '13 at 05:26
Would be great if you put your HTML, I think that the "empty" option for your select box is something like " " instead of "" — Aguardientico, Jun 26 '13 at 05:27
@Aguardientico well if you forget to **read question**...i mentioned that i also checking it using `console.log()` and values are coming correctly.. — Dipesh Parmar, Jun 26 '13 at 05:30
what values are you getting in console.log? what are you putting on console.log? — Aguardientico, Jun 26 '13 at 05:31
@DipeshParmar Your code is working condition. Check Fiddle Link : http://jsfiddle.net/B6ZFS/ — som, Jun 26 '13 at 05:41
@DipeshParmar - You should look into using jQuery's [`:selected`](http://api.jquery.com/selected-selector/) selector. — Aiias, Jun 26 '13 at 05:43

Kylie · Accepted Answer · 2013-06-26T05:37:14.770

2

You need to use the === operator for strings...

if((book_id.val() === "") || (tag_id.val() === ""))

You could also do it like this...

if((book_id.val().charAt(0))||(tag_id.val().charAt(0)) {

//stuff if true - if either has a value
//Do whatever you want here, submit the form, navigate away, database...etc

} else {

//return error
$('#userMessages').html('<div class="alert alert-info">'+
    '<button type="button" class="close" data-dismiss="alert">&times;'+
    '</button>'+
    '<strong>Information ! </strong> Please select search criteria first.'+
'</div>');
return false;

}

Like this...

edited Jun 26 '13 at 05:37

answered Jun 26 '13 at 05:25

Kylie

11,421
11
47
78

Damn..You code worked but in different manner...now form is posting when two are blank and showing error when either or are filled with value....hahahaha – Dipesh Parmar Jun 26 '13 at 05:32
Yeah I know, you're supposed to put your code in the bottom else statement, the true stuff is for if they do enter something, so just switch the error to the bottom underneath else.....success goes above – Kylie Jun 26 '13 at 05:33
Try again, put code in bottom half – Kylie Jun 26 '13 at 05:35
WTF thats worked....strange but its worked... Very Very Strange.. – Dipesh Parmar Jun 26 '13 at 05:39
Its checking for values not for emptiness....its working backwards how you expect – Kylie Jun 26 '13 at 05:41
the only benefit to the other way, is you remove the need for an `else`. IF it doesn't meet your criteria, throw the warning and return false. otherwise, just keep executing the function. Its easier to avoid nested If statements. – kmfk Jun 26 '13 at 05:43
Well nothings stops him from doing a single if, and doing the success stuff and returning false.....same effect....then if false, the script just executes the rest....being the error display. No need for else either.....I just used it to keep everything contained, matter of preference I guess – Kylie Jun 26 '13 at 05:46

score 0 · Answer 2 · answered Jun 26 '13 at 05:25

0

What about:

if( !book_id.val().length || !tag_id.val().length )

edit Looking at it again, if neither are filled out, warn them - that's an and statement:

if( !book_id.val().length && !tag_id.val().length )

answered Jun 26 '13 at 05:25

kmfk

3,821
2
22
32

actually, I believe this should be `AND` not an `OR`. – kmfk Jun 26 '13 at 05:29
well i said i want either or condition not `AND`.. – Dipesh Parmar Jun 26 '13 at 05:30
was scrolled down, didnt see the edits to the original question... – kmfk Jun 26 '13 at 05:31
But wait a minute! I see your logic behind that one.....it will work! – Kylie Jun 26 '13 at 05:31
really, the edit in my would warn the user ONLY if BOTH fields were empty. I believe that meets your criteria. If one is selected, that evaluates as false, if both are selected, again, false. - hah, false, being good? :] – kmfk Jun 26 '13 at 05:36
Yeah thats perfect....so now... regardless, if they at least enter one thing, the error wont show, which is exactly what OP wants..... – Kylie Jun 26 '13 at 05:39

score 0 · Answer 3 · answered Jun 26 '13 at 05:32

0

Try this with empty

if( empty(book_id.val()) || empty(tag_id.val()) )

or BETTER also can try with .length like

if ( (book_id.val().length != 0 ) || (tag_id.val().length != 0 ))

You can use trim for the removing the spaces can say trimming

answered Jun 26 '13 at 05:32

GautamD31

28,552
10
64
85

score 0 · Answer 4 · answered Jun 26 '13 at 05:32

0

try to trim your value , it might contain value. Working FIDDLE

if ((book_id.val().trim() === "") || (tag_id.val().trim() === "")) {
    alert('true');
}

answered Jun 26 '13 at 05:32

rajesh kakawat

10,826
1
21
40

jQuery logical operator not working as expected

4 Answers4