[Javascript?] Capture web page response from form submission.

[Axel 95]

So as you may have noticed I've made a few posts recently regarding form validation and I've appreciated all the help so far. I wanted to make sure my form validated as best as possible client side before being submitted to the server.

The form data is being posted via a PHP submission that I have no control over. It's possible that some of the items may fail server side validation.

<form method="post" action="https://www.website.com/index.php" id="theform">

The form is submitted and any response from the script winds up on "https://www.website.com/index.php" displaying on a freshly loaded webpage.

Rather than send the user to the page I want to capture the response and then display a relevant message or perform an action based on the return. So I suppose what I'm asking is how I would load that page response into a variable instead loading the page in the browser?

I literally don't even know where I want start to go about this!

Many thanks,

Alex

[Axel 95]

Just brain storming ideas:

Is it possible to make the php form submission page appear in an iframe instead of a new page and then grab the response from the iframe?

[Riva 1,338]

just listen to the onsubmit event of the form element and if you are happy with the validation, return true, otherwise, false.

[Axel 95]

This is to relating to stuff I'm not able to validate locally.

E.g. "Credit card declined" would appear on the .php page previously mentioned, but I actually want to capture that somehow and feed it into a dialogue box without leaving the current page.

Unless I've misunderstood you? I've already sorted client side validation, it submits when it passes. If it fails server side (third party) validation I want to parse that response into the current page.

[Jose_49 1,166]

So as you may have noticed I've made a few posts recently regarding form validation and I've appreciated all the help so far. I wanted to make sure my form validated as best as possible client side before being submitted to the server.

The form data is being posted via a PHP submission that I have no control over. It's possible that some of the items may fail server side validation.

<form method="post" action="https://www.website.com/index.php" id="theform">

The form is submitted and any response from the script winds up on "https://www.website.com/index.php" displaying on a freshly loaded webpage.

Rather than send the user to the page I want to capture the response and then display a relevant message or perform an action based on the return. So I suppose what I'm asking is how I would load that page response into a variable instead loading the page in the browser?

I literally don't even know where I want start to go about this!

Many thanks,

Alex

I remember you now! :)

Well, let me see if I can help.

This time, I think you should use jQuery:

Put this script at the top of your page:

<script src="http://code.jquery.com/jquery-latest.js"></script>

Here we go:

$("#theform").submit(function() {
if ($("input:first").val() == "correct")
{
return true;
}
$('#some_where_to_place_the_alert').html('Credit Card Invalid');
return false;
});
[/CODE]

Explaining:

jQuery works this way: (Equally to CSS)

IDs are referred with a sharp symbol -> #

Classes are referred with a dot -> .

Tags are referred without prefixes.

In this case, your form has the id of theform, so we put a sharp symbol before it: # and wrap it up with quotes, like this:

'#theform'

The first one is the first condition, that if succeeded it will enter the IF clause and it will execute the code and exit thanks to the return true statement. If it does not comply, it will return false, the submit will not compute and a message shall be displayed.

[b]If you can provide me with a snip of the form I can instruct you further...[/b]

Note:

I adapted this example, from:

http://api.jquery.com/submit/

This is the same method Riva was telling you. If you don't like to mess with jQuery, then let me know and I'll adapt the script for you.

[Axel 95]

Hi!

Sorry there may have been a misunderstanding here:

I can already get the form to pre-validate and then submit if it passes.

For example:

I'm very happy with the prevalidation and how it works. Basically the way I've achieved it is like so:

function verifyForm() {
    var message = "";
    message += verifyAmount();
    message += verifyFname();
    message += verifyLname();
    message += verifyAddress();
    message += verifyCity();
    message += verifyPostal();
    message += verifyEmail();
    message += verifyCell();
    message += verifyCC();
    message += verifyExpiry();
    message += verifySecurity();
    if (message == "") {
        document.forms["theform"].submit();
    } else {
 TINY.box.show({html:'<p style="font-weight:bold; padding-bottom: 10px;">The following errors have been found:</p>' + message,animate:true,close:false,boxid:'error',top:5})
    }
}

It runs all the subfunctions and then either forwards the form dependent on whether the "message" variable is empty or not.

Now here's where things become a bit sketchy for me, and I don't really know where to go from here. I'll explain the next process:

1. Form passes my pre-validation
   
2. Form gets sent to third party server
   
3. Third party server returns error such as "credit card declined" - this error cannot be pre-validated by my code.
   
4. Third party server display error in the .php page uses for submission like so:
   

I want to capture the php response from form submission. Not load it in a new page as it already does. and then parse the response into an error similar to the one in the first screenshot.

Does this all make sense?

Cheers.

Alex

[Riva 1,338]

Your credit card processor should provide a SOAP service or JASON service you can consume. Either option you can use the request option to do a post to that form. http://www.javascriptkit.com/jsref/ajax.shtml

[Axel 95]

It's actually a strange process.

I'm using Formstack to process the forms. Formstack then send the form data to the payment processor Beanstream. Formstack also offer integration to various payment processors.

What happens is the POST data gets sent to https://www.formstac...forms/index.php with the form ID and various other unique data in hidden fields. The fields including name, credit card number are all appended to this and then when Formstack receive the data, that is then forwarded to Beanstream to process the payment. Beanstream will then respond to formstack with the outcome.

If the card is accepted, it can redirect to a custom thank you page.

If card isn't accepted, it just displays a generic error page "decline" which is not in keeping with the website.

I'd rather create my own error page OR display the error within the current page. I'm just fairly stumped as to how to go about it. After reading through formstack's REST API documentation I can't seem to see anything which indicates how this can be achieved. It seem to be mostly concerned with accessing form data that has been submitted rather than the process of form submission and error responses.

[Axel 95]

I guess what I'm asking is fairly "hacky" in nature, because it's doing something the api isn't designed to. All the same I've emailed the formstack support to see if their does exist and official method. I appreciate all your input guys, without you I wouldn't have been able to learn as much as I have done over the past week!

Cheers!