If/Else Form For Zip Code/County Filter

问题

I have a website that has specific content for certain counties in the region where I live. I want to create a form that will help the user get to the specific page they need. Because I don't want a dropdown list of counties. I want the user to enter the zipcode, and then choose a county if there is an overlap within that zipcode.

I'm not sure if this is possible, but I am trying to create a form that will do this:

First Part of Form: Textbox to enter Zip Code, then click Submit, then show a hidden to Show Radio Group Option for available Counties, depending on which county they select, they get directed to a specific URL.

I'm trying to base it on this code I saw on Fiddle

Here is what I am using (and failing with)

<form  id="zip_form">
Zip Code: <input type="text" name="zipcode" id="id_zip_code"/><input type="submit"    
value="Submit"/>
</form>

<div id="id_div_one">Option County1, County2 or Other</div>

<div id="id_div_two">Option County3, County4 or Other</div>    

<div id="id_div_sorry">Please call our office for a quote</div>

jQuery:

$(function () {
var zipCode1 = ['11111', '22222', '33333'];
$('#id_div_one, #id_div_sorry').hide();

var zipCode2 = ['44444', '55555', '66666'];
$('#id_div_two, #id_div_sorry').hide();

$('#zip_form').submit(function () {
    $('#id_div_one, #id_div_two, #id_div_sorry').hide();
    if (jQuery.inArray($('#id_zip_code').val(), zipCode1) > -1) {
        $('#id_div_one').css('display', 'inline');
    }
    if (jQuery.inArray($('#id_zip_code').val(), zipCode2) > -1) {
            $('#id_div_two').css('display', 'inline');
    } else {
            $('#id_div_sorry').css('display', 'inline');
    }
        return false;
    });

});

See It Fail In Action

Is this possible?

Thanks In Advance

回答1:

Yes it's possible and your code will almost work. The only fault is, that you overwrite the zipCodes array in line 5, because both zipCode variables have the same name.

So change the name of the secound zipCode array and all will work.

var zipCodeOne = ['11111', '22222', '33333'];
$('#id_div_one, #id_div_sorry').hide();

var zipCodeTow = ['44444', '55555', '66666'];
$('#id_div_two, #id_div_sorry').hide();

For some further improvements see:

http://jsfiddle.net/E2cMT/4/

来源：https://stackoverflow.com/questions/17178520/if-else-form-for-zip-code-county-filter

标签

jquery

arrays

validation

if-statement

multi-select