How do I intercept a form's values before sending it?

Question

I currently have a large form that gets sent to our payment authorizer (done so by action="paymentautherizerURL" ), however I am not getting all of the information I require back from them when I go to store the transaction in my DB.

I either need to intercept the form data before it submits so that I can store it in the session (we are using PHP / jQuery), or I have also tried sending it to an intermediary scriptlet that grabs the information I need, and then using jQuery's $.post() to re-build and send off the data to the authorizer.

the second approach does not seem to work, however, at least to the best of my efforts. I'm not sure that a $.post properly emulates the form's send action, or at least I have not done it right.

<?php
session_start();

$post = $_POST;

//gets all of the information that beanstream does not return to approved.php, but is still required to make
//a legitimate database entry. gets from the POST and stores in the session array for approved.PHP to access

$_SESSION['approvedArray']['billAddress'] = $_POST['ordAddress1'];
$_SESSION['approvedArray']['billProvince'] = $_POST['ordProvince'];
$_SESSION['approvedArray']['billCountry'] = $_POST['ordCountry'];
$_SESSION['approvedArray']['billPostalCode'] = $_POST['ordPostalCode'];
$_SESSION['approvedArray']['billCity'] = $_POST['ordCity'];

$_SESSION['approvedArray']['shipAddress'] = $_POST['shipAddress1'];
$_SESSION['approvedArray']['shipPostal'] = $_POST['shipPostalCode'];
$_SESSION['approvedArray']['shipCity'] = $_POST['shipCity'];
$_SESSION['approvedArray']['shipProvince'] = $_POST['shipProvince'];
$_SESSION['approvedArray']['shipCountry'] = $_POST['shipCountry'];

session_write_close();
//the javascript below will send what is required to beanstream as though it were sent from the form

<script type='text/javascript'>
$.post(, {
    <?php
    //rebuild the POST such that "name: value, " except the last name/value will not be followed by a comma
    $keys = array_keys($_POST);
    for($i = 0; $i < count($_POST); $i++) {
        $currentKey = $keys[$i];
        $currentPost = $_POST[i];
        echo $currentKey . ": " . $currentPost;
        if ($i < (count($_POST) - 1)) {
            echo ", ";
        }
    }
    ?>
});
</script> 

?>

normally, the transaction authorizer will re-direct the user to one of 3 pages (approved, declined, error), and our website does the job from there. however, it's currently stuck at this page, which makes me think it's not sending off properly.

i'm open to all forms of criticism, approaches and ideas. thanks very much in advance, and if any other information is needed, please let me know!

Answer 1

How about changing the form tag to include an onSubmit attribute:

<form action="notmal_action.whatever" onSubmit="return save_data_function()">

Where the save_data_function reads the values from the form and sends it to a script on your server to save in a database (or where ever). I use hidden iframes to make this request hidden from the user...

<script>
function save_data_function() {
$('#iframe_id').attr('src', 'data_saving_script.extension?data_1=' + $('form_data_1').val().serialize() + '&data_2=' + $('form_data_2').val().serialize());
}
</script>

You can set a timeout if the data isn't being passed quick enough to the "data_saving_script.extension" file.

Answer 2

Since your existing example already has a dependency on javascript, you could move to saving the data with AJAX and then using a traditional submit to do the "real" POST to the payment gateway.

Assuming that your form has id="foo", you could do something like this:

<script>
$('form#foo').submit(function(event, doRealSubmit) {
    // this executes on the second pass
    if (doRealSubmit) {
        // returning true gets browser to do a real submit
        return true; 
    }

    // this executes on the first pass
    $.ajax({
        url: '/url/to/post/to/your/server',
        type: 'POST',
        // this serializes the form data in "application/x-www-form-urlencoded"
        data: $(this).serialize(),
        success: function(data) {
            // trigger 'submit' event again, but pass the doRealSubmit flag
            $('form#foo').trigger('submit', [true]);
        }
    });

    // returning false prevents browser from processing the real submit
    return false;
});
</script>