How to Submit Form using JQuery with Multiple Submit Buttons?

Question

I am trying to make a Form in which there are two Submit buttons. Here is the form.

<form method="POST" id="addCreditsForm">
    <div class="row">
        <div class="col s12 m10 offset-m1 l10 offset-l1 input-field">
            <input type="number" name="amount" id="amount" required/>
            <label for="amount">Amount</label>
        </div>
        <div class="col s12">
            <p id="addWithPaypal" style="margin-top:5px;margin-bottom:5px;" class="btn blue">Pay with Paypal</p>
            <p id="addWithInstamojo" style="margin-top:5px;margin-bottom:5px;" class="btn blue">Pay with Instamojo</p>
        </div>
    </div>
</form>

I am trying to do this with JQuery. Here is the JQuery Code.

$(document).ready(function(){
    $("#addWithPaypal").click(function(){
        $("#addCreditsForm").attr('action'."paypal/add/credits");
        $("#addCreditsForm").submit();
    });

    $("#addWithInstamojo").click(function(){
        $("#addCreditsForm").attr('action'."instamojo/add/credits");
        $("#addCreditsForm").submit();
    });
});

But When I click on any of the elements responsible for calling JQuery functions on Event, JQuery is not working. I tried to fire Alert on click event of both the buttons but it's not working too!

I have no Idea what's wrong. Please Help me out!

Dinesh undefined · Accepted Answer · 2017-06-18 13:02:57Z

1

Typo instead of , you kept . in

`$("#addCreditsForm").attr('action',"instamojo/add/credits");`
                                       ^here  

$("#addCreditsForm").attr('action',"paypal/add/credits");

$(document).ready(function(){
    $("#addWithPaypal").click(function(){
        $("#addCreditsForm").attr('action',"paypal/add/credits");
        $("#addCreditsForm").submit();
    });

    $("#addWithInstamojo").click(function(){
        $("#addCreditsForm").attr('action',"instamojo/add/credits");
        $("#addCreditsForm").submit();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="addCreditsForm">
    <div class="row">
        <div class="col s12 m10 offset-m1 l10 offset-l1 input-field">
            <input type="number" name="amount" id="amount" required/>
            <label for="amount">Amount</label>
        </div>
        <div class="col s12">
            <p id="addWithPaypal" style="margin-top:5px;margin-bottom:5px;" class="btn blue">Pay with Paypal</p>
            <p id="addWithInstamojo" style="margin-top:5px;margin-bottom:5px;" class="btn blue">Pay with Instamojo</p>
        </div>
    </div>
</form>

answered Jun 18, 2017 at 13:02

Dinesh undefined

5,5262 gold badges22 silver badges41 bronze badges

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

2 Comments

Adarsh Sojitra Over a year ago

Yes, That's the solution! How can I be so dumb, Lol!

Dinesh undefined Over a year ago

You can accept the answer if it helped you @AdarshSojitra

Collectives™ on Stack Overflow

How to Submit Form using JQuery with Multiple Submit Buttons?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related