Jquery - operators in if statement

Question

Hi All,

I'm trying to submit a form to a different location depending on which (of two) form fields have been filed in.

It work when both fields have a value but when only one if field has a value it always submits to the suppliers/category/ URL. Here is my code.

$('#suppliersForm').submit(function() {

catVal = $('#category').val()
keywordVal = $('#keywords').val()

if( $('#category').val() && $('#keywords').val() ) 
{
var searchString = 'http://<cfoutput>#cgi.server_name#</cfoutput>/suppliers/searchresults/' + catVal + '/' + keywordVal
window.location.replace(searchString);
}
else if( $('#category').val() || $('#keywords').val() )
{   
var searchString = 'http://<cfoutput>#cgi.server_name#</cfoutput>/suppliers/category/' + catVal
window.location.replace(searchString);  
}
else if( $('#keywords').val() || $('#category').val() )
{   
var searchString = 'http://<cfoutput>#cgi.server_name#</cfoutput>/suppliers/keywords/' + keywordVal
window.location.replace(searchString);  
}
return false;
});

Any help would be appreciated

Answer 1

Remove the second checks on both else if:

else if( $('#category').val() || $('#keywords').val() ) --> else if( $('#category').val() )
else if( $('#keywords').val() || $('#category').val() ) --> else if( $('#keywords').val() )

Answer 2

Basically there is no difference between

else if( $('#category').val() || $('#keywords').val() )

and

else if( $('#keywords').val() || $('#category').val() )

So if at least one field contains some value the first else if is executed.

Answer 3

$('#suppliersForm').submit(function() {

var catVal = $('#category').val();
var keywordVal = $('#keywords').val();
var searchString = "";

if( catVal != "" && keywordVal !="" ) 
{
     searchString = 'http://<cfoutput>#cgi.server_name#</cfoutput>/suppliers/searchresults/' + catVal + '/' + keywordVal;
}
else if( catVal != ""  )
{   
     searchString = 'http://<cfoutput>#cgi.server_name#</cfoutput>/suppliers/category/' + catVal;
}
else if( keywordVal != "" )
{   
     searchString = 'http://<cfoutput>#cgi.server_name#</cfoutput>/suppliers/keywords/' + keywordVal;
}
window.location.replace(searchString);  
return false;
});

Answer 4

 jQuery('#suppliersForm').click(function(event){       

    var searchString = '';
    var catVal  = $('#category').val();
    var keywordVal = $('#keywords').val();



    if( catVal.length > 0 && keywordVal.length > 0 ){
        searchString = 'http://<cfoutput>#cgi.server_name#</cfoutput>/suppliers/searchresults/' + catVal + '/' + keywordVal;
    } else if( catVal.length > 0 ) {
        searchString = 'http://<cfoutput>#cgi.server_name#</cfoutput>/suppliers/category/' + catVal;
    } else if( keywordVal.length > 0  ) {
        searchString = 'http://<cfoutput>#cgi.server_name#</cfoutput>/suppliers/keywords/' + keywordVal
    } else {
        alert( 'Please enter at least on value' );   
    }


    window.location.replace(searchString);  

});

http://jsfiddle.net/g8AUZ/

Answer 5

I'd probably make it much more concise like this:

var catVal = $('#category').val()
,   keywordVal = $('#keywords').val()
,   searchString = 'http://<cfoutput>#cgi.server_name#</cfoutput>/suppliers/';

if( catVal && keywordVal ) 
    searchString += ('searchresults/' + catVal + '/' + keywordVal);
else if( catVal )
    searchString += ('category/' + catVal);
else if( keywordVal )
    searchString += ('keyword/' + keywordVal);
else return;

window.location.replace(searchString);
return false;