Make div appears depending on multiple text inputs with jQuery

Question

I am trying to make a div fade depending on whether a value (zip code) has been entered in the input, with a predefined character set. I managed to get it to work on a single value, but I would like it to work with multiple inputs, because in the end there will be a lot of zip codes. It would be nice if I could ignore the spaces and cases, so I could just put one value for each zip code, and not five, as I did here:

$(".postcode-checker").click(function() { var name = $("#postcode-form input").val(); if(name != '') { if ($("#postcode-form input").val().indexOf("BS2 9","bs2 9","BS29","bs29","Bs2 9","Bs29") > -1) { $('#bpwdp').fadeIn(500); } } }); 

http://jsfiddle.net/x8NwW/

If you enter "BS2 9", it works, but none of the following values, for example. 'bs2 9' do not.

I read and I'm not sure if the regular expression .indexOf or .match will be the answer, but I'm not sure how to implement them in this context.

Any help would be greatly appreciated.

Answer 1

Remove the space, convert to uppercase, and then you can simply compare the beginning of the line with BS29 :

 $(".postcode-checker").click(function() { var name = $("#postcode-form input").val().replace(/\s+/g, '').toUpperCase(); $('#bpwdp')[name.match(/^BS29/) ? 'fadeIn' : 'fadeOut'](500); }); 

Here is the violin

Answer 2

Your if condition is incorrect, since indexof is correct, so use the code below:

 var postcode = ["BS2 9","bs2 9","BS29","bs29","Bs2 9","Bs29"]; if (postcode.indexOf($("#postcode-form input").val()) > -1){...} 

The correct syntax for indexOf is:

 array1.indexOf(searchElement[, fromIndex]); ^^^ ^^^ data that you will search data from which you search 

The tutorial is here .