Button Redirect Using JQuery

Question

In my PHP site, I am trying to get a button to redirect to a PayPal page for payment if a user has chosen PayPal from the dropdown. Normally, the button would go to the next page to authorize the credit card payment, but since the addition of PayPal, I need that button to redirect only if PayPal is chosen, otherwise it should still go to the next page in the payment process.

Can someone help me make my code work? I'm not very experienced, so I appreciate any help.

<tr>
    <td class="required req_poss" colspan="2">
        <label>Card Type <span>*</span>
        <select name="CardType" id="CardType">
             <option value="" selected="selected">--Please Select--</option>
             <option value="Amex">American Express</option>
     <!--<option value="Discover">Discover</option>-->
             <option value="MasterCard">MasterCard</option>
     <option value="PayPal">PayPal</option>
             <option value="Visa">Visa</option>
         </select>
         </label>
     </td>
 </tr>

 <tr>
     <td colspan="2" align="right"><br />
         <button type="button" class="prev" style="float:left">&laquo; Back</button>
         <button type="button" class="next right">Proceed &raquo;</button>
     </td>
 </tr>

What I want is something like this:

<script type="text/javascript">
    if ($('#CardType').val() == 'PayPal'){
        $('next').click(window.location.href = "https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=BUSINESSNAME");    
    }
</script>

$('.next') instead of $('next'). But there are other things as well. You might want to write a click event & check for if condition inside. — Venkata Krishna
– Venkata Krishna, Commented Dec 26, 2013 at 21:14
Do you have event listener? How are you planning to trigger it? — Gokhan Arik
– Gokhan Arik, Commented Dec 26, 2013 at 21:18

Josh Beam · Accepted Answer · 2013-12-26 21:37:50Z

1

check out this jsfiddle
(the link won't actually go anywhere in jsfiddle because the site doesn't allow cross-origin framing; however, if you open up your console, you'll see that the code does in fact work.)

<select id="CardType">
        <option value="PayPal">PayPal</option>
</select>

<input type="text" id="orderAmt" />

<button class="next">Next</button>

/*this would go in an external script file and placed in the header
of your html document after your jQuery script tag; or this could
go in a script tag at the end of the body of your html doc*/

 $(function() {
    $('.next').on('click',function() {
        var val = $('#CardType').val(),
            orderAmt = $('#orderAmt').val();

        /*the typeof argument adds security by checking to see
          that the input is a number, and not something else like a string*/

        if (val === 'PayPal' && typeof orderAmt === "number") {

            /*obviously here the url would need be changed as you see fit,
              but this is just an example to show how to add variables as
              PHP parameters to the end of your url*/

            window.location.href = "https://www.paypal.com/?amount=" + orderAmt;
        }
    });
 });

edited Dec 26, 2013 at 21:37

answered Dec 26, 2013 at 21:16

Josh Beam

19.9k5 gold badges48 silver badges69 bronze badges

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

6 Comments

Jamie Over a year ago

This is just what I need, thank you! One more little question....can I use PHP variables in the link to PayPal since it's in the script blocks?

Josh Beam Over a year ago

Do you mean parameters at the end of the url? (cgi-bin/webscr?cmd=_xclick&business=BUSINESSNAME) --- There shouldn't be any reason why you can't. It should work just fine.

Josh Beam Over a year ago

window.location href = "paypal.com/cgi-bin/webscr?cmd=_xclick&business=BUSINESSNAME" ...... That should do fine.

Jamie Over a year ago

I tried adding &amount=$orderAmt to the end of the url and paypal got mad saying there was something wrong. If that should work, then it's probably just something I'm not doing right with the variable in the php. Thanks for the help!

Josh Beam Over a year ago

$orderAmt is a PHP style variable that would normally go inside a PHP doc (i.e. $orderAmt = $_POST['amount']). As far as appending that parameter to the end of the url, it would typically just be something like '&amount=orderAmt' (where 'orderAmt' would be the value of a JavaScript variable)

|

Gokhan Arik · Accepted Answer · 2013-12-26 21:24:04Z

0

Try this. When the page is ready it will bind click event. After that whenever you click button it will check the CardType and set the location.

$( document ).ready(function() {
    $( ".next" ).click(function() {
      if ($('#CardType').val() == 'PayPal')
          window.location.href = "...";
      else
          window.location.href = "...";
    });       
});

Here is the fiddle: http://jsfiddle.net/3DA5m/

answered Dec 26, 2013 at 21:24

Gokhan Arik

2,7842 gold badges26 silver badges51 bronze badges

Collectives™ on Stack Overflow

Button Redirect Using JQuery

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related