CODEWITHSUNDEEP
jqueryajaxformspaypalpaypal-ipn
user577732
user577732

Reputation: 4056

Submit form values before paypal

I'm trying to override the paypal submit form below to run some ajax before submitting but for some reason everything up till submitting the actual form is working.

Paypal Form

<form name="_xclick" id="payWithPaypal" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="[email protected]">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="item_name" value="Item Name Here">
    <input type="hidden" name="amount" value="12">
    <input type="hidden" name="return" value="http://www.website.com">
    <input type="hidden" name="notify_url" value="http://www.website.com/ipn.php">
    <input type="submit" id="submitPaypal" class="mailsubmit" value="Pay Now" border="0" name="submit">
</form>

Overriding the submit button

<script>
    $(function(){
        $('#submitPaypal').on("click", function(e){
            event.preventDefault();
            tailor();
        });
    });
</script>

Ajax that should run then submit the above form

   <script type="text/javascript">
        function tailor(){
             $.ajax({
                url: "info.php",
                type: "POST",
                data: {NAME:"test"},
                success: function(data){
                     $('#payWithPaypal').submit();
                }
           });
        }
    </script>

Any insight as to why $('#payWithPaypal').submit(); isn't working would be greatly appreciated

Upvotes: 0

Views: 2232

Answers (2)

thaevok
thaevok

Reputation: 166

Your event.preventDefault(); bound to the button click doesn't prevent the form submit. This is why your .ajax() works only when the submit button is placed outside of the form.

I'd recommend something like this instead:

<script type="text/javascript">

$('#payWithPaypal').submit(function(e) {

    var self = this;

    e.preventDefault();

  $.ajax({
      url: 'info.php',
      type: 'post',
      data: $(':input', self),
      success: function(json) {
        self.submit();
      }
    });
});

</script>

Upvotes: 4

user577732
user577732

Reputation: 4056

Finally figured this one out for some reason which I'm still not really sure why but the submit button needs to be placed out side of the form tags and then it works as it should. If anyone knows why this is the case I'd love to know

Upvotes: -2

Related Questions