CODEWITHSUNDEEP
jqueryajax
travis_arnold
travis_arnold

Reputation: 77

Send form contents to external url with ajax

i'm having trouble sending form data to an external url. i understand i need to build a php bridge to accomplish this, but that is where i'm falling.

Form markup:

<div class='done' style='background:#fffee1;border:1px solid #fdf96c;padding:10px;'>
    Success!  We'll be in touch soon
</div>
<div class='form'>
    <form method='post' action='http://example.com/external-url'>
        <input type="hidden" name="idstamp" id="idstamp" value="would need to pass this too" />
        <p class='element'>
            <label for='account'>Client Name</label>
            <input type='text' id='account' name='account' class='text' />
        </p>
        <p class='element stack'>
            <label for='user'>User Name</label>
            <input type='text' id='user' name='user' class='text' />
        </p>                    
        <p class='element stack'>
            <input type='submit' class='button orange' value='Submit' style='padding:0; width:130px;height:30px' id='submit'/>
            <div class='loading'></div>
        </p>
    </form>
</div>

The action is basic, just show a success div then hide the entire form div:

$('.form').fadeOut('slow');                 

//show the success message
$('.done').fadeIn('slow');
$('.toggle').delay(5000).fadeOut('slow');

The missing piece is sending to a local .php file, parsing out the data then sending to the external url. i've searched for this everywhere and can't seem to find a straightforward solution and hoping to find one on here.

Upvotes: 0

Views: 1356

Answers (1)

Kevin B
Kevin B

Reputation: 95020

Here's the jquery part:

$(function(){
...
$(".form form").submit(function(e){
  e.preventDefault();
  var formData = $(this).serialize();
  $.post("bridge.php",formData).done(function(rdata){
    if (window.console && window.console.log) {
      console.log(rdata);
    }
  }).fail(function(){
    if (window.console && window.console.log) {
      console.log(arguments);
    }
  });
});
...
});

now you just need to build bridge.php that accepts POST vars and sends them to the external url.

Upvotes: 1

Related Questions