How to Make multiple submit action on a single sub

Question

I have a 3 forms w/ different url actions,input text field name and input submit field name. I want to have a single visible OPTIN FORM for only purposed to input user email address and when the user submit the FORM it will get the same email address and send to my 3 other FORMS on the background. I know it will do some jquery and ajax can you show me example codes how to do it?

My code:

This Code will be visible and this is the only form that the user put their email address

    <!--VISIBLE FORM -->
<form action="" method="post">
    <input type="text" name="email" placeholder="email" />
    <br />
    <input type="submit" value="GET FREE QOUTE" name="submit" />
</form>
<!--VISIBLE FORM -->

This Area will be on background and handle the 3 FORMS w/ different action I want to get the email address on the visible form to put on every email fields on the background and submit it individual on the background. I really want your help guys. thanks on advance. sorry for bad English :)

    <!--BACKGROUND FORM-->
<form action="pretong_newsletter.html" method="post">
    <input type="text" name="newsletter_email" placeholder="email" />
    <br />
    <input type="submit" value="Register" name="Register" />
</form>

<form action="jason_newsletter.html" method="post">
    <input type="text" name="n_email" />
    <br />
    <input type="submit" value="Get Free Qoutes" name="Submit" />
</form> 

<form action="register.html" method="post">
    <input type="text" name="user_email" />
    <br />
    <input type="submit" value="Be a Member" name="Submit" />
</form> 
<!--BACKGROUND FORM-->

Answer 1

To make multiple submit action on a single form you can use the HTML onclick event attribute. To post it in a new window use target="_blank" in your form.

 <form action="" target="_blank" method="post">
    <input type="text" name="newsletter_email" placeholder="email" />
    <br />
    <input type="submit" value="Register" name="Register" onclick="this.form.action='pretong_newsletter.html'" />
    <input type="submit" value="Get Free Qoutes" name="Submit" onclick="this.form.action='jason_newsletter.html'" />
    <input type="submit" value="Be a Member" name="Submit" onclick="this.form.action='register.html'" />
</form>

Hope this helps!

Answer 2

You don't have to have a physical form on the page to submit to those end points. Post the data when you click your submit button using the jQuery post() function.

---

http://api.jquery.com/jQuery.post/

---

<input id="email" type="text" name="email" placeholder="email" />
<br />
<input id="blast" type="button" value="GET FREE QOUTE" name="submit" />

---

post as json:

<script type="text/javascript">
    $(function(){
        $("#blast").click(function(){
            var email = $("#email").val();
            $.post("pretong_newsletter.html", { newsletter_email: email });
            $.post("jason_newsletter.html", { n_email: email });
            $.post("register.html", { user_email: email });
        });
    });
</script>

post as string:

<script type="text/javascript">
    $(function(){
        $("#blast").click(function(){
            var email = $("#email").val();
            $.post("pretong_newsletter.html", "newsletter_email=" + email);
            $.post("jason_newsletter.html", "n_email=" + email);
            $.post("register.html", "user_email=" + email);
        });
    });
</script>