CODEWITHSUNDEEP
javascriptjquery
user2656127
user2656127

Reputation: 665

Get multiple variables from HTML using jQuery

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>

Upvotes: 1

Views: 111

Answers (1)

Satpal
Satpal

Reputation: 133403

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

Upvotes: 1

Related Questions