2

How do I submit two forms with only one click? There are two forms in my web page: one of them is displayed and has a submit button. And the other is hidden. Like the following:

<form id="form1" action="/url1" method="post">
  ...
  <input type="submit" value="Submit">
</form>

<!-- Hidden form -->
<form id="form2" action="/url2" method="post">
  <input type="hidden" ...>
  <input type="hidden" ...>
  ...
</form>

How can I submit both of them by only clicking the button in the first form?

Randy Tang
  • 4,283
  • 12
  • 54
  • 112

1 Answers1

1

You'll have to use jQuery or plain ol' JavaScript. Here is a working example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#submitButton").click(function () {
                $.post($("#form1").attr("action"), $("#form1").serialize(),
                  function () {
                      alert('Form 1 submitted');
                  });

                $.post($("#form2").attr("action"), $("#form1").serialize(),
                  function () {
                      alert('Form 2 submitted');
                  });
            });
        });
    </script>
</head>
<body>
    <form id="form1" action="PostPage1.aspx" method="post">
        <input type="button" id="submitButton" value="Submit" />
    </form>

    <!-- Hidden form -->
    <form id="form2" action="PostPage2.aspx" method="post">
        <input type="hidden" id="data1" value="testing1" />
        <input type="hidden" id="data2" value="testing2" />
    </form>
</body>
</html>
Jason Willett
  • 375
  • 2
  • 13