Jquery - Unable to dynamically change action of a form and submit it inside the success event of ajaxForm()

Question

This is a payment form to be posted to Worldpay payment gateway. It has all the parameters as per the WorldPay documentation and it works fine if directly posted.

But, now I am trying to

• AJAX post the form first to my site (using jquery.form, and that part is working fine) then do some database operations
• and then change the action attribute using javascript and post it to Worldpay. But the worldpay post is not working and anything alerted after the $("form#wpftuf").submit(); line in the following code is also not alerting too.

The payment form

<form name="wpftuf" id="wpftuf" method="post" action="http://url/of/ajax/file/add_credit"&gt; 
       <input type="hidden" name="operation" value="add_credit" id="operation" /> <?php // for ajax validation ?>
 <input type="hidden" name="worldpayUrl" value="<?php echo WPurl?>" id="worldpayUrl" />
...
..
...other necessary fields
</form>

Here I am passing the worldpay URL as a parameter

The AJAX binding

$(document).ready(function() 
 {

  var options = {
            dataType:  'json',
            beforeSubmit: function()
            {
       //alert("submitting");
      },
            success: function(data)
            {
                if(data)
                {
                 if(data.success)
                 {
                  var worldpayUrl = $("input[id=worldpayUrl]").val();
                            $("form#wpftuf").attr("action",worldpayUrl);

     alert("this works");
                            $("form#wpftuf").submit();

                                        //This alert does not work
                    alert("this alert does not work "+$("form#wpftuf").attr("action"));
                 }
                }
            }
            ,
            error:function()
            {
             alert("validation failed");
            }
        };

  $("form#wpftuf").ajaxForm(options);


 });

I guess the error is happening because I am trying to change the action and submitting inside the ajax form's success event and the form is still binded. So, I tried by blindly putting $("form#wpftuf").unbind(options); , $("form#wpftuf").unbind(); $("form#wpftuf").unbind(ajaxForm); after the $("form#wpftuf").attr("action",worldpayUrl); line (one by one) but in all cases I get this error uncaught exception: Permission denied to call method XMLHttpRequest.open

How do I submit the form dynamically to worldpay after the ajax form processing success. Does the form need to be unbinded first? Please help. This may have an easy solution but I am not able to get it. I searched a lot.

Please Note
The worldpay payment gateway needs the user to fill up some forms there after posting, so an AJAX submission again using ajaxSubmit() won't work. I need a normal form submission there.

Thanks,
Sandeepan

Answer 1

What if you try to change the form's action and resubmit it not in AJAX's success? E.g. you could use setTimeout in success callback and do the code after let's say 1 second?

Just for reference: http://www.w3schools.com/js/js_timing.asp

Answer 2

I'm not sure I get why you want to do it the way you're doing it, but it looks to me like the XMLHttpRequest is failing because scripts can only make requests back to their originating server.

The XMLHTTPRequest object is not allowed to make cross-domain, cross-protocol, or cross-port requests. There are ways you can circumvent this restriction, but I'm not sure I would recommend that.

What I would do is using your server as a proxy for posting it to worldpay. ie. the user posts the form to your server through ajax. Your server does all neccessary manipulations and resubmits the form to worldpay, parses the result and returns the result to the client through ajax.

• Why do you need to submit it through ajax from the client?
• Why do you need to submit it to your server first?

you have all kinds of domain and sandbox specific problems going on the way you're trying to. I don't think it's possible.

Answer 3

i'm not using the malsup plugin, but if i'm right, your problem is the .submit(); when you use an ajax request with form, usually it will be set to take no action return false; so when you submit it, it is still blocked!

your code should be something like this:

UPDATED

$("#wpftuf").submit(function(e) {
    e.preventDefault(); // prevent normal form submission, same as return false;
    $form = $(this);
    var worldpayUrl = $("#worldpayUrl").val(); //get the World Pay php url
    var mySiteFirstUrl = $("#mySiteFirstUrl").val(); //get Your Site First php url
    // if ( valid ) { // make a validation here...
    var posts = $(this).serialize(); // get all form fields in form like: name=value
    //start the first ajax request...
    $.ajax({
        type: "POST",
        url: mySiteFirstUrl,
        data: posts,
        success: function(data) { // send back a json formatted response ?
            var result = $.parseJSON(data); //prepare json
            // if ( result ) { //make another validation here...
            // start making the changes to the form here
            // fill all the form fields with the returned json data...
            $form.attr('action' , worldpayUrl ); //give it the action url ); 
            $form.unbind('submit').submit(); //submit it...
            //}
        }
    });
    //}
});

in substance use this $("#wpftuf").unbind('submit').submit(); //submit it...