时间戳

首页 > 解决方案 > php中的多步表单

php - php中的多步表单

问题描述

我想用 php 创建这个多步骤表单时遇到问题。在每个表单中，您可以存储当前步骤（以便脚本知道用户已达到哪个阶段）以及用户在其他步骤中已经输入的数据。当用户提交当前步骤时，脚本会运行该函数以将用户带到另一个阶段。带有“name”firstName、lastNmae 和 comments 的输入工作得非常好，但是当用户返回上一步时，选择框和单选按钮不保留值......我该怎么办......

<!DOCTYPE html>
<html>
<head>
    <title>membership form</title>
</head>
<body>

      <?php  

      if (isset($_POST["step"]) AND $_POST["step"] >= 1 AND $_POST["step"] <= 3 ) { // note that this will only return true when the form containing the input with name "step" has been submitted..dont get confused that the input has its attr of "value" already set eg "value = 1"; that is why if you load the page the "displayStep1();" runs.

      call_user_func("processStep" .(int)$_POST["step"]); 

      }else{
        displayStep1();
      }

      function setInputValue($fieldName){
            if (isset($_POST[$fieldName])) {
                echo $_POST[$fieldName];
            }
        }

     function setChecked($fieldName , $fieldValue){
        if (isset($_POST[$fieldName]) AND $_POST[$fieldName] == $fieldValue) {
            echo 'checked = "checked" ';
        }
     }

     function setSelected($fieldName , $fieldValue){

        if (isset($_POST[$fieldName]) AND $_POST[$fieldName] == $fieldValue) {
            echo 'select = "selected"';
        }
     }


      function displayStep1(){?>

        <form action="registration_multistep.php" method="post">
            <h1>Member Signup: Step 1</h1>
            <div  style="width: 30em;">

                <!--to keep track of the steps-->
                <input type="hidden" name="step" value="1"> <!-- note that even if u set the value of a form element in the attr "value", php script will not return true unless the form has been submitted-->

             <!--notice the input for gender is only 1 here and the value is what the setInputValue() function echoed and the only argument passed is 'gender' for $fieldValue--> 
             <label></label><input type="hidden" name="gender" value=" <?php setInputValue('gender'); ?>" ><br><br>

                <label for = "favourite"></label><input type="hidden" name="favourite" id="favourite" value = "<?php setInputValue('favourite');?>" > <br><br>

                <label for = "comments"></label><input type="hidden" name="comments" id="comments" value="<?php setInputValue('comments'); ?>"><br><br>
                <label for = "password"></label><input type="hidden" name="password" id="password"><br><br>
                <label for = "passwordRetype"></label><input type="hidden" name="passwordRetype" id="passwordRetype"><br><br>

                <label for = "firstName">first name</label><input type="text" name="firstName" id="firstName" value="<?php setInputValue('firstName'); ?>"><br><br>
                <label for = "lastName">last name</label><input type="text" name="lastName" id="lastName" value="<?php setInputValue('lastName'); ?>"><br><br>
                <input type="submit" name="submitButton" value="next &gt;">
            </div>
        </form>

     <?php } ?>

     <?php
        function processStep1(){
            displayStep2();
        }

        function displayStep2(){?>

            <form action="registration_multistep.php" method="post">
            <h1>Member Signup: Step 1</h1>
            <div  style="width: 30em;">
                <input type="hidden" name="step" value="2"> <!-- note that even if u set the value of a form element in the attr "value", php script will not return true unless the form has been submitted-->
                your gender<br>

             <label for = "male">male</label><input type="radio" name="gender" id="male" value="male" <?php setChecked('gender' , 'male'); ?> >  <br><br>
             <label for = "female">female</label><input type="radio" name="gender" id="female" value="female"  <?php setChecked('gender' , 'female'); ?> > <br><br>

                <select name="favourite">

                    <option value="default" <?php setSelected('favourite' , 'default');?> >selected</option>
                    <option value="rice" <?php setSelected('favourite' , 'rice'); ?> >rice</option>
                    <option value="beans" <?php setSelected('favourite' , 'beans'); ?> >beans</option>

                </select>
                <label for = "comments"></label><input type="hidden" name="comments" id="comments"  value="<?php setInputValue('comments'); ?>"><br><br>

                <label for = "firstName"></label><input type="hidden" name="firstName" id="firstName"  value="<?php setInputValue('firstName'); ?>"><br><br>
                <label for = "lastName"></label><input type="hidden" name="lastName" id="lastName"  value="<?php setInputValue('lastName'); ?>"><br><br>

                <input type="submit" name="submitButton" id ="back" value="&lt; back">
                <input type="submit" name="submitButton" id ="next" value="next &gt;">
            </div>
        </form>


        <?php }?>

        <?php
        function processStep2(){

            if (isset($_POST["submitButton"]) AND $_POST["submitButton"] == "< back") {
                displayStep1();
            }else{
                displayStep3();
            }
        }

        function displayStep3(){?>

            <form action="registration_multistep.php" method="post">
            <h1>Member Signup: Step 1</h1>
            <div  style="width: 30em;">
                <input type="hidden" name="step" value="3"> <!-- note that even if u set the value of a form element in the attr "value", php script will not return true unless the form has been submitted-->


                 <!--notice the input for gender is only 1 here and the value is what the setInputValue() function echoed and the only argument passed is 'gender' for $fieldValue--> 
             <label></label><input type="hidden" name="gender" value=" <?php setInputValue('gender'); ?>" ><br><br>

                <label for = "favourite"></label><input type="hidden" name="favourite" id="favourite" value="<?php setInputValue('favourite'); ?>"><br><br>
                your comment<br>
                <label for = "comments"></label><input type="text" name="comments" id="comments"  value="<?php setInputValue('comments'); ?>"><br><br>

                <label for = "firstName"></label><input type="hidden" name="firstName" id="firstName"  value="<?php setInputValue('firstName'); ?>"><br><br>
                <label for = "lastName"></label><input type="hidden" name="lastName" id="lastName"  value="<?php setInputValue('lastName'); ?>"><br><br>

                <input type="submit" name="submitButton" id ="back" value="&lt; back">
                <input type="submit" name="submitButton" id ="next" value="next &gt;">
            </div>
        </form>


        <?php }?>

        <?php


        function processStep3(){

            if (isset($_POST["submitButton"]) AND $_POST["submitButton"] == "< back" ) {
                displayStep2();
            }else{
                displayThanks();
            }
        }

        function displayThanks(){
            echo "successful";
        }

        ?>









</body>
</html>

标签： php

解决方案

它不是 ：

echo 'select = "selected"';

它应该是 ：

echo 'selected = "selected"';

此外，要使用 HTML5 自动完成功能，您可以在每个表单上使用 autocomplete="on"：

<form action="registration_multistep.php" method="post" autocomplete="on">


<form action="registration_multistep.php" method="post"  autocomplete="on">

<form action="registration_multistep.php" method="post" autocomplete="on">

它将有助于选择框。但我想它不会在单选按钮上工作。如果您不想在步骤之间使用 php 会话或 javascript，可以将其更改为“选择框”。

推荐阅读