CODEWITHSUNDEEP
phphtmlformspost
Curtis Upshall
Curtis Upshall

Reputation: 91

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!

Upvotes: 1

Views: 3948

Answers (3)

David Zhang
David Zhang

Reputation: 468

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.

Upvotes: 0

JunXamLop
JunXamLop

Reputation: 51

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>

Upvotes: 1

Darryl.K
Darryl.K

Reputation: 7

$_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.

Upvotes: 0

Related Questions