Add one of two divs on button click based on input from form field

Question

Let me apologize for my noob javascript and jQuery skills. I am trying display one of two divs based on input from a form. More specifically, I have button next to a form field that prompts users to enter their zip code to check if they are in our service area. If they are, a div with text "saying that yes you are in the service area". If they are not in the service area (!=60614) then a div saying "sorry...." Here is the code I am trying and failing with: Html:

<div class="large-3 small-6 large-centered small-centered columns"> 
    <input type="text" placeholder="Zip Code" />
    <a id="checkZipButton" class="button">Check your zip</a>
    <!--<div class="zipResultsNegative"><p>Sorry we are not doing pickups in your area yet, but we will be soon. Please sign up, so when we get to your area you will be ready yo go.</p></div>
     <div class="zipResultsPositive"><p>We are in you area, so sign up and give us a whirl!</p></div>-->
</div>

JavaScript:

$(function(){
    var NewContent=' <div class="zipResultsNegative"><p>Sorry we are not doing pickups in your area yet, but we will be soon. Please sign up, so when we get to your area you will be ready yo go.</p></div>'

    var OtherConent= '<div class="zipResultsPositive"><p>We are in you area, so sign up and give us a whirl!</p></div>'

    $(".checkZipButton").click(function(){
        if (NewContent != '60614') {
            $("#checkZipButton").after(NewContent);
            NewContent = '';
        } else OtherContent ==='60614'{
            $("#checkZipButton").after(OtherContnent);
            OtherContent = '';
        } else{
            $('#checkZipButton').next().toggle();
        }
    });
});

First of all: check your spelling. In a quick look I could see OtherConent, OtherContnent and OtherContent, all referring to the same variable. — mathielo
– mathielo, Commented Feb 24, 2014 at 22:32
Also, misspelling is not the source of the problem.. I'll be posting an answer fixing your code to get it working. — mathielo
– mathielo, Commented Feb 24, 2014 at 22:34
Thank you @mathielo ... spelling still gets me unfortunately, but thank you for helping out. It is very much appreciated. — user2209914
– user2209914, Commented Feb 24, 2014 at 22:39

mathielo · Accepted Answer · 2014-02-24 22:59:15Z

If I understood correctly, there are a few problems with your code. First of them: strong misspelling. Check your variables as you type them! It's a common mistake to mistype variable names and you won't want to struggle/waste your time with that.

As for your JavaScript checks, you almost got it. You are just using the wrong source for comparison. Check this out:

<div class="large-3 small-6 large-centered small-centered columns"> 
    <!-- Added an ID attribute to the input -->
    <input type="text" id="inputZipcode" placeholder="Zip Code" />
    <a id="checkZipButton" class="button">Check your zip</a>
    <!--<div class="zipResultsNegative"><p>Sorry we are not doing pickups in your area yet, but we will be soon. Please sign up, so when we get to your area you will be ready yo go.</p></div>
     <div class="zipResultsPositive"><p>We are in you area, so sign up and give us a whirl!</p></div>-->
</div>

JavaScript:

$(function(){
    // Make sure to always add ';' at the end of your commands in JavaScript.
    // It is not required, but is Good Practice and helps with code validation/minifying.
    var NewContent = '<div class="zipResultsNegative"><p>Sorry we are not doing pickups in your area yet, but we will be soon. Please sign up, so when we get to your area you will be ready yo go.</p></div>';

    var OtherContent = '<div class="zipResultsPositive"><p>We are in you area, so sign up and give us a whirl!</p></div>';

    $("#checkZipButton").click(function(){

        // Whenever .checkZipButton is clicked, you need to know the value
        // of the ZipCode the user provided.
        var zipcode = $('#inputZipcode').val();

        // Maybe you'll also desire to "clean" it up, as the user may type
        // characters other than numbers
        zipcode = zipcode.replace(/[^0-9]/g, '');

        if (zipcode != '60614') {
            $("#checkZipButton").after(NewContent);

            // This is not needed
            // NewContent = '';
        } else {
            $("#checkZipButton").after(OtherContent);

            // Also not needed
            // OtherContent = '';
        }
        // ...and I don't know where you tried to get with this:
        //} else{
        //  $('#checkZipButton').next().toggle();
        //}

        return false;
    });
});

If anything was unclear, let me know. I hope this may help you.

I was too late :( , Use this one it checks for valid zipcodes mine doesn't
@Puzzle84 there are important reminders at the and of your answer that user2209914 should pay attention to! Well pointed ;) Our both answers are somewhat about the same =p

Puzzle84 · Accepted Answer · 2014-02-24 22:50:34Z

How about this? http://jsfiddle.net/Wzja4/

<div class="large-3 small-6 large-centered small-centered columns"> 
    <input type="text" id="zipcode" placeholder="Zip Code" />
    <a id="checkZipButton" class="button" href="#">Check your zip</a>
</div>

$(function () {
    var NewContent = ' <div class="zipResultsNegative"><p>Sorry we are not doing pickups in your area yet, but we will be soon. Please sign up, so when we get to your area you will be ready yo go.</p></div>'

    var OtherContent = '<div class="zipResultsPositive"><p>We are in you area, so sign up and give us a whirl!</p></div>'

    $("#checkZipButton").click(function () {
        if ($("#zipcode").val() != '60614') {
            $(".zipResultsPositive").remove();
            $(".zipResultsNegative").remove();
            $("#checkZipButton").after(NewContent);
        } else if ($("#zipcode").val() === '60614') {
            $(".zipResultsPositive").remove();
            $(".zipResultsNegative").remove();
            $("#checkZipButton").after(OtherContent);
        } else {
            $('#checkZipButton').next().toggle();
        }
    });
});

don't use classes if something can only exist once. use id's
you're checkign if a value is set on the div you're going to add "if (NewContent)"
your else is missing parentheses and again checking against wrong object
you should probably use a button instead.

Collectives™ on Stack Overflow

Add one of two divs on button click based on input from form field

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related