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"> 
       <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

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...