• 0

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


Question

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

6 answers to this question

Recommended Posts

  • 0

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.

  • 0
  On 30/01/2013 at 23:36, Axel said:

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.

  • 0

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:

post-33944-0-80493500-1359625214.png

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:'<ple="font-weight:bold; padding-bottom: 10px;"&gt;The following errors have been found:&lt;/p&gt;' + 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:

post-33944-0-14885600-1359626225.png

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

  • 0

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.

  • 0

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!

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • They are shifting into AI now. Don't you see?
    • Exactly. No need to pay to rent a license. I'd rather own it.
    • Weekend PC Game Deals: Automation fests, Civilization for free, charity specials, and more by Pulasthi Ariyasinghe Weekend PC Game Deals is where the hottest gaming deals from all over the internet are gathered into one place every week for your consumption. So kick back, relax, and hold on to your wallets. The Epic Games Store unlocked a big strategy game giveaway earlier this week: Civilization VI: Platinum Edition. Coming in from Firaxis Games, the turn-based 4X experience has you starting world-conquering campaigns to explore, expand, exploit, and exterminate everything in your empire's reach. PvP and co-op multiplayer are also options if the various forms of AI prove to be too easy or even too troublesome. The Sid Meier’s Civilization VI: Platinum Edition giveaway is live until July 24, and it comes with two massive expansions as well as six DLC packs with extra scenarios, leaders, and more. Next week, tower defense title Legion TD 2 will become the latest freebie on the Epic Games Store. The Humble Store brought a new bundle for action game fans this weekend, and it's all about the Devil May Cry franchise. The Devil Trigger Collection begins with DmC: Devil May Cry and Devil May Cry HD Collection for $10. If you want to complete the bundle, it will set you back $20, which gets you Devil May Cry 4 Special Edition as well as the most recent entry, Devil May Cry 5, as well as its Vergil DLC. This bundle has two weeks left on its counter before it goes away. Big Deals Most publishers are returning to their usual weekend specials after the massive summer sales, so there are plenty of discounts to go around. There's even a special Make a Wish charity sale running on Steam with some discounted viral hits. With all those and more, here's our hand-picked big deals list for the weekend: Satisfactory – $27.99 on Steam Captain of Industry – $24.49 on Steam No Man's Sky – $23.99 on Steam Persona 5 Royal – $23.99 on Steam No More Room in Hell 2 – $22.49 on Steam FOUNDRY – $20.99 on Steam Banishers: Ghosts of New Eden – $19.99 on Steam SULFUR – $19.99 on Steam Assassin's Creed Mirage – $19.99 on Steam Alan Wake 2 – $19.99 on Epic Store Grand Theft Auto V Enhanced – $19.79 on Steam Norland – $19.49 on Steam Stray – $17.99 on Steam V Rising – $17.49 on Steam Dyson Sphere Program – $15.99 on Steam The Outlast Trials – $15.99 on Steam Warhammer 40,000: Darktide – $15.99 on Steam The Outlast Trials – $15.99 on Steam Red Dead Redemption 2 – $14.99 on Steam Turing Complete – $13.99 on Steam Eden Crafters – $13.99 on Steam Core Keeper – $13.99 on Steam Thank Goodness You're Here! – $12.99 on Steam Opus Magnum – $9.99 on Steam Autonauts – $9.99 on Steam EXAPUNKS – $9.99 on Steam DRAGON BALL XENOVERSE 2 – $9.99 on Steam Superliminal – $9.99 on Steam Heaven's Vault – $9.99 on Steam RAILGRADE – $9.89 on Steam Goat Simulator 3 – $9.89 on Steam Tchia – $9.89 on Steam ACE COMBAT 7: SKIES UNKNOWN – $9.59 on Steam PAYDAY 3 – $8.99 on Steam Assassin's Creed Origins – $8.99 on Steam Viewfinder – $8.74 on Steam Escape Academy – $7.99 on Steam Pit People – $7.99 on Steam Skull and Bones – $7.99 on Steam Immortals Fenyx Rising – $7.99 on Steam Imperator: Rome – $7.59 on Steam SHENZHEN I/O – $7.49 on Steam Tom Clancy’s The Division 2 – $7.49 on Steam Bassmaster Fishing – $7.49 on Steam Let's Build a Zoo – $6.99 on Steam The Forgotten City – $6.24 on Steam Control Ultimate Edition – $5.99 on Steam Bramble: The Mountain King – $5.99 on Steam Assassin’s Creed Rogue – $5.99 on Steam RoboCop: Rogue City – $4.99 on Steam Kingdom Two Crowns – $4.99 on Steam Scott Pilgrim vs. The World: The Game – $4.94 on Steam Castle Crashers – $4.49 on Steam BattleBlock Theater – $4.49 on Steam TOEM: A Photo Adventure – $3.99 on Steam Supraland – $3.99 on Steam Vampire Survivors – $3.99 on Steam Darkwood – $3.74 on Steam Valiant Hearts: The Great War – $3.74 on Steam TIS-100 – $3.49 on Steam PAYDAY 2 – $3.29 on Steam Cake Bash – $2.99 on Steam Ragnarock – $1.99 on Steam Alan Wake – $1.49 on Steam Civilization VI Platinum Edition – $0 on Epic Store DRM-free Specials Lastly, here are some highlights from the DRM-free discounts available on the GOG store this weekend: Age of Wonders 4 - $29.99 on GOG Pathfinder: Wrath of the Righteous - Game of the Year Edition - $19.99 on GOG Tomb Raider IV-VI Remastered - $19.49 on GOG The Thaumaturge - $19.24 on GOG Chained Echoes - $13.74 on GOG Tyranny - Gold Edition - $12.49 on GOG Tomb Raider I-III Remastered Starring Lara Croft - $11.99 on GOG Baldur's Gate: Enhanced Edition - $9.99 on GOG Baldur's Gate II: Enhanced Edition - $9.99 on GOG Neverwinter Nights: Enhanced Edition - $9.99 on GOG Old World - $9.99 on GOG Icewind Dale: Enhanced Edition - $9.99 on GOG Neverwinter Nights: Doom of Icewind Dale - $7.99 on GOG Kingdom Come: Deliverance - $5.99 on GOG Might and Magic 6-pack Limited Edition - $4.99 on GOG Heroes of Might and Magic 3: Complete - $4.99 on GOG Blood Omen: Legacy of Kain - $3.49 on GOG Might and Magic 8: Day of the Destroyer™ - $2.99 on GOG Worms Armageddon - $2.99 on GOG ATOM RPG: Post-apocalyptic indie game - $2.99 on GOG Keep in mind that availability and pricing for some deals could vary depending on the region. That's it for our pick of this weekend's PC game deals, and hopefully, some of you have enough self-restraint not to keep adding to your ever-growing backlogs. As always, there are an enormous number of other deals ready and waiting all over the interwebs, as well as on services you may already subscribe to if you comb through them, so keep your eyes open for those, and have a great weekend.
  • Recent Achievements

    • One Month Later
      Helen Shafer earned a badge
      One Month Later
    • One Month Later
      ambani880 earned a badge
      One Month Later
    • Week One Done
      ambani880 earned a badge
      Week One Done
    • First Post
      artistro08 earned a badge
      First Post
    • First Post
      paul29 earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      498
    2. 2
      ATLien_0
      223
    3. 3
      Michael Scrip
      196
    4. 4
      Xenon
      161
    5. 5
      +FloatingFatMan
      138
  • Tell a friend

    Love Neowin? Tell a friend!