CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
user2656127
user2656127

Reputation: 665

Load jQuery modal based on which div was clicked

So what I'm trying to do is, load a payment modal (which will have a payment/credit card form), and dynamically load the "selected plan" into the modal.

Below is the "Choose a Plan" HTML - what I'm trying to do/need help with is a jQuery function that opens the modal and loads "You selected this plan".

PS. Here is a fiddle if it's easier http://jsfiddle.net/9xyJn/

This is what I have on the JS side so far:

$(".planSelector").click(function() {
            console.log("got that clcik.");
            var selectedPlan = //Get the selected plan
            $("#paymentModal").modal("show");
        });

HTML:

    <div class="container">
    <div class="row">
        <hr>
        <div class="span12 pick-plan-intro">
            <h2>Great sales teams come in all sizes</h2>
            <h6>All plans are including all features</h6>
        </div>
        <div id="Free" class="span3">
            <div class="sparta-plan">
                <h4 id="freePlan">Free</h4>
                <p>Free</p>
                <p>Up to 5 users</p>
                <a 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="smallPlan">Small</h4>
                <p>$99</p>
                <p>Up to 15 users</p>
                <a 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="mediumPlan">Medium</h4>
                <p>$199</p>
                <p>Up to 30 users</p>
                <a 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>
    </div>
</div>

Upvotes: 0

Views: 62

Answers (1)

Saurabh Sharma
Saurabh Sharma

Reputation: 2462

I have modified your code a little and added id to your <a> attributes.

Here's the jsfiddle update: http://jsfiddle.net/saurabhsharma/9xyJn/1/

Upvotes: 1

Related Questions