vendredi 31 juillet 2015

Pass single textbox value to the ajax call using jquery

I am using pricing tables. It is having multiple plans with Amount Textbox. Every plan have submit Button. So user can change the textbox value. By clicking submit function the particular pricing table value should pass to the ajax function.

Html Code:

<div class="pricing_table">
            <h3 class="title">RD195</h3>
                <span class="price">Rs.195</span>
                   <ul class="features">
                        <li>10 items</li>
                        <li>Unlimited</li>
                         <li><input type="text" class="discountAmount" value="176" style="width:75px;" /></li>
                        <li>7 Days</li>
                  </ul>
                   <a href="#" class="btn btn-default" onclick="javascript:Plans.Subscribe('RD195','RDPurchase','195');return false;">Subscribe</a>
                  <%--<a href="#" class="btn btn-default" onclick="return vas_confirmcandi('RD195','RDPurchase','195')">Subscribe</a>--%>
             </div>
          </div>

         <div class="pricing_table">

            <h3 class="title">RD545</h3>
                <span class="price">Rs.545</span>
                   <ul class="features">
                        <li>50 items </li>
                        <li>Unlimited</li>
                          <li><input type="text" class="discountAmount" value="491" style="width:75px;" /></li>
                        <li>30 Days</li>
                  </ul>
                   <a href="#" class="btn btn-default" onclick="javascript:Plans.Subscribe('RD545','RDPurchase','545');return false;">Subscribe</a>
                  <%--<a href="#" class="btn btn-default" onclick="return vas_confirmcand('RD545','RDPurchase','545')">Subscribe</a>--%>
             </div>

i want to take the value of discount amount to pass the ajax function. But when i click second table amount of 545, the submit function it is always taking the first value of 176

My Ajax Code:

Plans.Subscribe = function (planName, Description, amount){
var data = $('input[class=discountAmount]').val();
$("#wait").show();
if (planName != undefined) {
    $.ajax({
        type: "POST",
        url: "/plans/getdetail",
        data: { 'Plan': plan, 'Type': Description, 'Amount': amount, 'DiscountAmount': data },
        dataType: "json",
        success: function (response) {
            if (response.Success) {
                $("#wait").hide();
            } else {
               $("#wait").hide();
            }
        },
        error: function (xhr, status, error) {
            $("#wait").hide();
        }
    });
}

};

Aucun commentaire:

Enregistrer un commentaire