根据用户输入显示和隐藏DIV

Question

I have an input box for zip code entry's, when a user inputs a zip code I want to show a specific DIV.

It starts with everything hidden except for the input box and go button, then the user enters a zip code and the matching DIV shows (the DIV ID will be the zip code) There maybe hundreds of DIVs and possible inputs.

Here is what I have so far, note it starts showing everything (not what I want) but it kinda works

$(document).ready(function(){
    $("#buttontest").click(function(){

        if ($('#full_day').val() == 60538) {   

            $("#60538").show("fast"); //Slide Down Effect
            $("#60504").hide("fast");
        }

         else {
            $("#60538").hide("fast");    //Slide Up Effect
            $("#60504").show("500");
        }

         });
    $("#full_day").change(function() {
        $("#60504").hide("500");
        $("#60538").show("500");
    });


});

LINK to working File http://jsfiddle.net/3XGGn/137/

Answer 1

jsFiddle Demo

Using pure numbers as id's is what was causing the issue. I would suggest you change them to

<div id="zip60538">
   Welcome to Montgomery
</div>
<div id="zip60504">
  <h1>Welcome to Aurora</h1>
</div>

In the html (as well as in the css and the js as can be seen in the linked fiddle)

This will allow them to be properly referenced in the DOM

---

edit

jsFiddle Demo

If you had a lot of these to handle, I would probably wrap the html area in a div to localize it and then use an array to store the accepted zip codes, and make use of both of those approaches in the click event

$(document).ready(function(){
  var zipCodes = [60538,60504];
  $("#buttontest").click(function(){
   var zipIndex = zipCodes.indexOf(parseInt($("#full_day").val()));
   $("#zipMessage > div").hide("fast");
   $("#zip"+zipCodes[zipIndex]).show("fast");
  });
});

Answer 2

Start off with all the div's style of display: none; . On your button click simply check that a div exists with that ID, if so, hide all others (use a common class for this) and show the right one:

$("#buttontest").click(function() {
    var zip = $("#full_day").val();

    if ( $("#" + zip).length ) {
        $(".commonClassDiv").hide();
        $("#" + zip).show();
    }
});