1

So I have a block of HTML, and what I want to do is generate a modal based on which "plan" a user picked. Everything is working except the planPrice variable. I can't seem to pull it frmo the HTML.

I'm certain this is the line that is wrong, but can't seem to get the sytnax right, I am thinking I need to use "this" in some way?

Here is a fiddle, and the goal is to get the planPrice to alert. http://jsfiddle.net/6xD7D/

var planPrice = $(".span3 p.planPrice").val(); //Doesn't work. 

jQuery:

    $(".planSelector").click(function() {
            var selectedPlan = this.id;
            console.log("You've selected " + selectedPlan);
            $('#passedSelectedValue').val(selectedPlan);
            var planPrice = $(".span3 p.planPrice").val(); // This line not working
            $('#planPrice').val(planPrice);
            $('#paymentModal').modal('show');
    });

HTML :

       <div id="Free" class="span3">
            <div class="sparta-plan">
                <h4 id="1">Free</h4>
                <p class="planPrice">Free</p>
                <p>Up to 5 users</p>
                <a id="1" class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
            </div>
        </div>
        <div id="Small" class="span3">
            <div class="sparta-plan">
                <h4 id="2">Small</h4>
                <p class="planPrice">$99 / month</p>
                <p>Up to 15 users</p>
                <a id="2" class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
            </div>
        </div>
        <div id="Medium" class="span3">
            <div class="sparta-plan">
                <h4 id="3">Medium</h4>
                <p class="planPrice">$199 / month</p>
                <p>Up to 30 users</p>
                <a id="3" class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
            </div>
        </div>
        <div id="Mega" class="span3">
            <div class="sparta-plan">
                <h4>Custom</h4>
                <p>...</p>
                <p>Please contact us</p>
                <a class="btn btn-large btn-info btn-block" href="#">Contact us</a>
            </div>
        </div>

1 Answer 1

1

You need to use .siblings() or combination of .closest() and .find()

Use

var planPrice = $(this).siblings(" p.planPrice").text();

OR

var planPrice = $(this).closest('.span3').find(" p.planPrice").text();

DEMO

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.