Tag Archives: send 2 forms

How to send 2 HTML forms at once

Code Snippets,

I was doing a project and it required that I sent the same information to 2 different sites using 2 different forms. It wasn’t easy to edit the back end code so I couldn’t used the API. After researching I came up with this solution.

  1. Hide the second form with CSS 
     <form style="display:none;"....
  2. When the first form is submitted do 3 things.
    1. Populate the second form using the values from the first. I used jQuery .val 
       var name = $("#name").val();

 $("#name2").val(name);
    2. Send the first form through an IFrame. 
       <form target="iFrameID"....
    3. Set the thank you page for the form to come back to an html file with basic HTLM code and a script like this to trigger a function to send the second form. This page has to be on the original domain so it doesn’t violate the cross domain rules. 
       <script>

 parent.sendForm2();

 </script>

 

Example of code for the main page….

<iframe id="iFrame1" name="iFrame1"></iframe>

<form id="form1" target=”iFrame1″>
   Name: <input type=”text” id=”name” name=”name”/>
</form>

<form id=”form2″ style=”display:none;”>
   Name: <input type=”text” id=”name2″ name=”name”/>
</form>

<script>
function sendForm1(){
   $(“#form1”).submit();
}

function sendForm2(){
   $(“#form2”).submit();
}

function populateForm2(){
   var name = $(“#name”).val();
   $(“#name2”).val(name);
   sendForm1();
}

$("#form1").submit(function() {
   populateForm2();
   return false;
});
</script>

 

Example of code for the thank you page (for the first form) HTML file ….

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<script>
parent.sendForm2();
</script>
</head>
<body>
<p>Sending...</p>
</body>
</html>

Note: This page has to be on the original domain so it doesn’t violate the cross domain rules. If you need to do it with a subdomain you could add document.domain = “subdomain.mydomain.com”; to the main page and the thank you page.