CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
Viktor
Viktor

Reputation: 547

PHP Javascript Single Form Call Submit to Two Forms

Have you seen?
submit a form inside another form

Submitting form data to two locations using Javascript and PHP?

None of them actually answer the question.

Let me explain the scenario. I have a form that asks for Name, Email and Phone Number and it needs to be submitted to TWO locations on two different vendors.

1) Aweber 2) The Company

One possibility is to create a Javascript piece of code that when people click 'submit' it sends it to two form calls in two different browser windows (that would be my preferred method)

The second possibility would be to send it first to Aweber (autorespnder) and then pass the variables to a custom PHP page. Fetch the variables with $_GET and then pass those into an automatic form submit that passes those on to the 2nd form that goes to the company.

For example - I can submit the form to Aweber first and then pass the results back to form.php:

$name = $_get['name'];
$email = $_get['email'];
$phone = $_get['phone'];

What would the rest of the form look like with Curl or javascript?

I tried passing the variables into the company post form. It won't accept any GET commands - it only accepts a POST command, so CURL is probably not going to work, (unless there's a way to POST a form via CURL?)

Anyone have an elegant solution that doesn't look bad to end users?

What ideas do you have? Thanks in advance!

Upvotes: 3

Views: 373

Answers (1)

Rick Calder
Rick Calder

Reputation: 18705

Without any real data to go on or real forms to call, this should give a basic idea of how to do it with AJAX and jQuery.

*Updated

I updated the answer to show how to pass the form variables as a post rather than a get.

HTML

<form id="test-form">
  <input type="text" id="name" name="name"/>
  <input type="submit" value="submit"/>
</form>

<p class="response1">
  Response 1 goes here
</p>
<p class="response2">
  Response 2 goes here
</p>

jQuery

$("#test-form").on("submit", function(e) {
  e.preventDefault(); //stops the form from actually submitting
  var root = 'https://jsonplaceholder.typicode.com';

  $.ajax({
    url: root + '/posts/1',
    method: 'POST',
    data: $("#test-form").serialize()
  }).then(function(data) {
    if(data) {
        $(".response1").text(data.title);
        $.ajax({
          url: root + '/posts/2',
          method: 'POST',
          data: $("#test-form").serialize()
        }).then(function(data) {
          if(data) {
            $(".response2").text(data.title);
          }
        });
    }
  });
})

Obviously you'd have to set the URL's correctly and pass the post data, which isn't happening here because I don't have an API to query that accepts post data. After the first form submits, it sends the data to the second form. How you handle the data is going to depend on what the responses are from the servers.

Fiddle: https://jsfiddle.net/calder12/t0fos3kk/1/

Upvotes: 1

Related Questions