Grabbing info before form processed

[bejitto101]

I have an interesting predicament. I have a form that connects to an external website for credit card payments. Thing is, I want to save all the information before it gets processed, otherwise I never get to see it. The form looks something like this:

<form action="https://www.myvirtualmerchant.com/VirtualMerchant/process.do" method="post">
<input type="hidden" name="ssl_pin" value="1234" />
<input type="hidden" name="ssl_transaction_type" value="ccsale" />
<input type="hidden" name="ssl_show_form" value="false" />
<input type="text" maxlength="30" size="35" name="ssl_card_number"/>
<input type="text" maxlength="7" size="7" name="ssl_cvv2cvc2" /> 

And so on and so forth...

Is it possible to have the form redirect to the current page then save all the variables, add them to my dbases, then somehow send them all as POST variables like they're supposed to, to the http://www.myvirtualmerchant.com/Vir...ant/process.do website?

[neilemrich]

There a a couple of ways I would think about doing it. The simplest way doing something like saving the variables and loading the page with a new form of hidden variables to post to the merchant and then putting a form submit command in the body onLoad trigger.

Another good but more complicated way is to use ajax to first load a simple page into a div which saves the variables and then submits the form. I could provide more detail but it could be somewhat complicated if you haven't used ajax before.

[bejitto101]

I've used ajax before, you mind providing more detail?

[neilemrich]

I tend to use the scripts from script.aculo.us for my ajax but just prototype should do for this.

You could use the Ajax.Updater function to load a page into an invisible div that saves the data and then uses javascript to submit the form.

You could have a normal linked image onClick or use a onSubmit call in the form but the javascript on the submit should look something like this:

new Ajax.Updater('you_div', 'record_data.php', {parameters:Form.serialize(document.data_form), evalScripts:true});

In this case record_data.php is loaded into the div 'your_div' which can save the data for you. The 'parameters' option passes the form values as post variables and the 'evalScripts' option means that any javascript in record_data.php is also run when it is loaded in. You might be able just do that in the onSubmit call in the form and then it submits normally without anything else needing doing but I'm not sure. That will probably require the 'asynchronous: false, ' option so that the page waits for the record_data page to be loaded before submitting the form.

Hope this helps

[bejitto101]

Where would I put the asynchronous: false part? Or could I just run the actual submital of the form off a window.onload on the record_data?

[neilemrich]

I'm thinking that you could just put the following in your form:

<form onSubmit="new Ajax.Updater('your_div', 'record_data.php', {parameters:Form.serialize(document.data_form), asynchronous: false});">

I would hope that the page would then wait for record_data.php to be loaded before submitting the form.

If it didn't then I would put a 'false;' return after the ajax call so that the form didn't submit and then run the ajax call with the 'evalScripts:true' option and then put

document.myform.submit();

in the record_data.php page to submit the form when it is done loading.

[bejitto101]

What do you mean by a false return after the ajax call? I think I know what youre getting at, and everything seems to be working ok, but I would just like to make sure.

And also, thanks for your help, this looks to be a very clean, quick method to do this.

[neilemrich]

I just meant that maybe you would need to put

return false;

after the ajax call to stop the form submitting if the ajax page didn't have time to update the data. If though it's all being saved properly then you don't need to worry.

Glad to hear it's working for you

[artemis]

That wouldn't work if the user had javascript turned off though.

Why not have two pages, the first being the form and the inputs that is submitted to your site. On the next page it will echo the data out and say something like "Please can you check all your details are correct" then have a hidden form will all the data and a submit button to the external site..

[neilemrich]

Well if you were worried about people not having javascript running then you could have the javascript degrade gracefully so that the javascript will send the form to the right place and if not it will go to the non-javascript page you speak of.

[artemis]

Yeah that would work - it's just that things that involve money should be taken seriously and if its imperitive that the data is needed then relying on javascript is too much of a risk

[neilemrich]

Indeed, it is worth considering.

[bejitto101]

Why would relying on javascript be too much of a risk?

[artemis]

Well I was just saying that if you *really* need the form data if its to do with paying you etc then there is always a chance that the user will not have javascript turned on. if this is the case then the ajax method wont work and you have the data for that 'transaction'. it is only a small thing as the majority of people have it turned on but i find it best that when dealing with money transactions to try to account for all eventualities - just my two cents though, you can of course do it however you like