Submit Multiple Forms on One Page at the Same Time with PHP

I've been having trouble creating a custom step-by-step form. I have 8 different forms on one page, where each one is hidden using CSS after each step is complete. I've done some research here, but all the posts I've found involve submitting each form separately. The issue I'm having is with posting all forms at the same time. My HTML looks essentially like this:

<form  method="post" action="">
  <h1>Choose an animal</h1>
  <label for="step1-a">
    Dog<input id="step1-a" value="dog" type="radio" name="step1">
  </label>
  <label for="step1-b">
    Owl<input id="step1-b" value="owl" type="radio" name="step1">
  </label>
  <label for="step1-c">    
    Moose<input id="step1-c" value="moose" type="radio" name="step1">
  </label>
  <input id="submit-button" type="submit" value="I'm hidden">
</form>
<form method="post" action="">
  <h1>Next, choose a color</h1>
  <label for="step2-a">
    Red<input id="step2-a" value="red" type="radio" name="step2">
  </label>
  <label for="step2-b">
    Green<input id="step2-b" value="green" type="radio" name="step2">
  </label>
  <label for="step2-c">    
    Blue<input id="step2-c" value="blue" type="radio" name="step2">
  </label>
  <input id="submit-button" type="submit" value="I'm hidden">
</form>
<label for="submit-button>Submit All</label>

The code above will get the first result but nothing else. I'm using the PHP:

<?php
  echo "You chose " . $_POST['step1']."and ".$_POST['step2'].". Well done.";
?>

This gives the following result:

You chose dog and . Well done.

How can I get all forms to post? Am I doing this all wrong? Thanks!

3 answers

  • answered 2018-02-13 02:35 Darryl.K

    $_POST['step2']
    

    You don't have any fields with the name 'step2' on your form. Try changing it to 'step1'or change the names of fields in your second form.

  • answered 2018-02-13 02:35 JunXamLop

    You can use ajax.

    form.php

    <?php if(isset($_POST['step1'])&&isset($_POST['step2'])&&isset($_POST['step3'])){
      echo "You chose " . $_POST['step1']." and ".$_POST['step2']." and ".$_POST['step3'].". Well done.";die;
    }?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"0"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Data form</title>
    </head>
    <script>
    $(document).ready(function(){
        $("a.btn").click(function(){
            var datastring = $("#form1").serialize();
            datastring +="&" + $("#form2").serialize();
            datastring +="&" + $("#form3").serialize();
            $.ajax({
                type: "POST",
                url: "form.php",
                data: datastring,
                success: function(data) {
                    console.log(data);
                    alert(data);
                },
                error: function() {
                    alert('error handing here');
                }
            });
        });
    });
    
    </script>
    <body>
    <form id="form1">
     <input name="step1" value="1" type="text"/>
    </form>
    <form id="form2">
     <input name="step2" value="2" type="text"/>
    </form>
    <form id="form3">
     <input name="step3" value="3" type="text"/>
    </form>
     <a class="btn btn-success">Submit All</a>
    </body>
    </html>
    

  • answered 2018-02-13 02:35 David Zhang

    It is not available because it's not supported by HTTP.

    1. Use JavaScript to gather all the inputs and submit.
    2. Combine two forms into one.