How to form in stages?

Question

I’m creating a system and wanted to know how to make a form per step , it works by checkbox and input and type just wanted to know how to pass the data from the first form to the two to be inserted into mysql.

</tr>
    <tr>
    <td width="280" bgcolor="#00BFFF">Refeição</td>
	<td width="70" bgcolor="#00BFFF">Quantidade</td>
	
    </tr>

	<tr>
		<td width="280"><input type="checkbox" name="pedido_refeicao[]" value="Costela de Tambaqui sem Espinha">Costela de Tambaqui sem Espinha</td>
		<td width="20"><input type="text" name="num_refeicao[]" size="7"></td>
		
	</tr>
	<tr>
		<td width="280"><input type="checkbox" name="pedido_refeicao[]" value="Lombo de Tambaqui Frito sem Espinha">Lombo de Tambaqui Frito sem Espinha</td>
		<td width="20"><input type="text" name="num_refeicao[]" size="7"></td>
	
	</tr>
		<tr>
		<td width="280"><input type="checkbox" name="pedido_refeicao[]" value="Caldeirada de Tambaqui sem Espinha">Caldeirada de Tambaqui sem Espinha</td>
		<td width="20"><input type="text" name="num_refeicao[]" size="7"></td>

 
</table>
 <br>
<input class="btn" type="submit" value="Proximo" name="Proximo"> 
</form>

And on page two of the form is the one below but in the first step of the form I work with checkbox and as I will select several of them I will have to use the implode to get all the checkbox and input how could I do ? Thanks in advance

     if($_POST)
    {  
        $numero_mesa = $_POST['numero_mesa'];
        $pedido_refeicao = implode(', ', $_POST['pedido_refeicao']);
        $num_refeicao = implode(', ', $_POST['num_refeicao']);
}





<?php

session_start();

$nome = isset($_POST['nome']) ? $_POST['nome'] : '';
$_SESSION['nome'] = $nome;

$email = isset($_POST['email']) ? $_POST['email'] : '';
$_SESSION['email'] = $email;

$telefone = isset($_POST['telefone']) ? $_POST['telefone'] : '';
$_SESSION['telefone'] = $telefone;

?>

Answer 1

Use javascript!

The idea is how Pope Charlie responded in the comment of his question.

I thought of the following proposal:

Step1 - As soon as the imput "Submit/next" is triggered, Event.preventDefault() does not allow data to be sent, while Etapa2 appears on the screen.

Etapa2 - At Etapa2, once you call "send", the data is sent via POST with Fetch API (or any other way you want).

The rest is up to you.

(function () {

const form = document.getElementById('form');
const etapa1 = document.getElementById('etapa1');
const etapa2 = document.getElementById('etapa2');
const URL = ""; //colocar a url desejada
        
form.addEventListener('submit', function (event) {
  event.preventDefault();
  submit(this)//recuperar dados enviados
  .then(trocarEtapa) //trocar a div do form
  .then(post)//enviar dados
  .catch(error => console.error(error));
});
        
async function submit(context) {
  const formData = new FormData(context);
  return formatFormData(formData);
}

function trocarEtapa(data){
     etapa1.style.display = "none"; //esconder etapa1
     etapa2.style.display = "block"; //mostrar etapa2
     return data;
}
    
function post(data) {
    document.getElementById('btn-send').addEventListener('click', function () {
        fetch(URL, 
            {
               method: 'POST',
               headers: {
                           'Content-Type': 'application/x-www-form-urlencoded'
               },
               body: 'json=' + JSON.stringify(data)
            }
       ).then(response => {
            if (response.status === 200) {
            } else if (response.status === 403)
                console.log('Access denied');
              else if (response.status === 404)
                console.log('Page not found');
              else if (response.status === 503)
                console.log('Be right back');
        });
   });
          
 })(document);

<form id="form"> 
   
        <div id="etapa1"> 
             <input class="btn" id="submit" type="submit" value="Next" name="Next">
        </div> 
             
        <div id="etapa2" style="display: none;">
             <input class="btn" id="btn-send" type="button" value="Send" name="Send">
        </div>
        
</form>

Answer 2

You can use the PHP variable SESSION[ ]

<?php

session_start();

if(isset($_POST['Proximo1'])){
    $_SESSION["v1"] = "xx";
    $_SESSION['refeicao'] = $_POST['refeicao'];
}
if(isset($_POST['Proximo2'])){
    $_SESSION["v2"] = "xx";
    $_SESSION['refeicao1'] = $_POST['refeicao1'];
}
?>
<form action=""  method="post">
    <table>
        <tr>
            <td width="280" bgcolor="#00BFFF">Refeição</td>
            <td width="70" bgcolor="#00BFFF">Quantidade</td>
        </tr>

        
        <tr>
            <td width="280"><input type="checkbox" name="pedido_refeicao[]" value="Caldeirada">Caldeirada</td>
            <td width="20"><input type="text" name="refeicao" size="15"></td>
            <td><input class="btn" type="submit" value="Proximo" name="Proximo1"></td>
    </table>
</form>
<?php

if(isset($_SESSION["v1"])) {
    ?>
    <form action=""  method="post">
        <table>
            <tr>
                <h3><?php echo $_SESSION['refeicao']; ?></h3>
                <td width="280" bgcolor="#00BFFF">Refeição</td>
                <td width="70" bgcolor="#00BFFF">Quantidade</td>
            </tr>

            
            <tr>
                <td width="280"><input type="checkbox" name="pedido_refeicao[]" value="Caldeirada">Caldeirada de Tambaqui </td>
                <td width="20"><input type="text" name="refeicao1" size="15"></td>
                <td><input class="btn" type="submit" value="Proximo" name="Proximo2"></td>
        </table>
    </form>
    <?php
}
if(isset($_SESSION["v2"])) {
    ?>
    <form action=""  method="post">
        <table>
            <tr>
                <h3><?php echo $_SESSION['refeicao1']; ?></h3>
                <td width="280" bgcolor="#00BFFF">Refeição</td>
                <td width="70" bgcolor="#00BFFF">Quantidade</td>
            </tr>

            
            <tr>
                <td width="280"><input type="checkbox" name="pedido_refeicao[]" value="Caldeirada">Caldeirada de Tambaqui sem Espinha</td>
                <td width="20"><input type="text" name="num_refeicao[]" size="7"></td>
                <td><input class="btn" type="submit" value="Proximo" name="Proximo"></td>
        </table>
    </form>
    <?php
    session_destroy();

}

Answer 3

I don’t know if that’s what you want, but I think you have to open one form as follows:

Where it is written formulario2 would be your PHP page you created to give a insert in Mysql with PHP.

<form action="formulario2.php"  method="post">
    <table>
        <tr>
            <td width="280" bgcolor="#00BFFF">Refeição</td>
            <td width="70" bgcolor="#00BFFF">Quantidade</td>
        </tr>

        <tr>
            <td width="280"><input type="checkbox" name="pedido_refeicao[]" value="Costela de Tambaqui sem Espinha">Costela de Tambaqui sem Espinha</td>
            <td width="20"><input type="text" name="num_refeicao[]" size="7"></td>
        </tr>
        <tr>
            <td width="280"><input type="checkbox" name="pedido_refeicao[]" value="Lombo de Tambaqui Frito sem Espinha">Lombo de Tambaqui Frito sem Espinha</td>
            <td width="20"><input type="text" name="num_refeicao[]" size="7"></td>
        </tr>
        <tr>
            <td width="280"><input type="checkbox" name="pedido_refeicao[]" value="Caldeirada de Tambaqui sem Espinha">Caldeirada de Tambaqui sem Espinha</td>
            <td width="20"><input type="text" name="num_refeicao[]" size="7"></td>
    </table>
    <br>
    <input class="btn" type="submit" value="Proximo" name="Proximo"> 
</form>

I hope that’s what you’re looking for! Hugs and good luck.