javascript - 构建类似 RSVP 的表格(下一个问题基于上一个问题)

Question

我现在正在自学 html/javascript/php，我正在尝试构建一个非常简单的页面，其表单类似于 RSVP。我想让它变得更复杂一点，所以并不是所有问题都显示在开头，而不是下一个问题基于以前的答案(如步骤中)。我也喜欢将所有内容都放在一页上(而不是下一个下一个风格)。当所有问题都得到解答后，我使用 php 将结果输出到文件中。

就这么简单。但是，我有以下问题:如果用户在问题之间来回移动，所有答案都会保留在缓存(或内存)中，并且在提交时所有内容都会被输出，而不是仅选择的单选按钮(实际答案)。如何清除“错误”答案，仅保留最新选择的按钮？比方说，如果我单击单选按钮"is"，在下一部分中选择某些内容，然后返回并单击“否”，结果将是所有三个答案，而不仅仅是最后一个“否”...

我的表单问题的 html 部分示例。他们根据用户点击的内容继续执行步骤。

        <form id="QuestionsForm" action="process.php" method="post" class="w3-      container"> 

     <div id="vn-rsvp" class="w3-container w3-row w3-border">
          <h2>
               Questions
          </h2>

<div id="stepOne" class="w3-container w3-border w3-card-4">         
               <br><label>Name: </label>
               <input class="w3-input w3-animate-input" type="text" name="name" style="width:120px"><br>

               <p><label>RSVP?</label></p>

               <p>
                <input type="radio" name="rsvp" id="rsvp-yes" value="yes" onclick="ClickYes()" class="w3-radio">
                <label class="w3-validate">Yes!</label></p>

    <div id="stepTwo" class="w3-container w3-border w3-card-4 w3-hide">   
                    <p><label>Are you bringing someone?</label></p>

                    <p>
                    <input type="radio" name="PlusOne" id="plus-yes" value="yes" onclick="ClickGuestYes()" class="w3-radio">
                    <label class="w3-validate">Yes</label></p>               

        <div id="stepThree" class="w3-container w3-hide">  
        <label>Great! What's their name?</label>
        <input class="w3-input w3-border w3-animate-input" type="text" name="Guest" style="width:50%"><br>
        </div> 

                    <p>
                    <input type="radio" name="PlusOne" id="plus-no" value="no" onclick="ClickGuestNo()" class="w3-radio">
                    <label class="w3-validate">No.</label></p> 
    </div>  

               <p>
                <input type="radio" name="rsvp" id="rsvp-no" value="no" onclick="ClickNo()" class="w3-radio">
                <label class="w3-validate">No, I'm sorry...</label></p>

    <div id="stepOneNo" class="w3-container w3-border w3-hide">
    <p><strong>We're sorry too! :(</strong>.</p>
    </div>              

               <p>
                <input type="radio" name="rsvp" id="rsvp-maybe" value="maybe" onclick="ClickMaybe()" class="w3-radio">
                <label class="w3-validate">Maybe.</label></p>    

    <div id="stepOneMaybe" class="w3-container w3-hide">  
    <br><label>When can we expect an answer?</plabel>
    <input class="w3-input w3-border w3-animate-input" type="text" name="text-maybe" style="width:50%"><br>
    </div>

</div>
.
.
.
.
<div id="stepTen" class="w3-container w3-border w3-card-4 w3-hide">
<p><strong>Additional comments:</strong></p><br>
  <textarea textarea name="Comments"></textarea><br><br>

    <br><input type="button" onclick="SubmitForm()" class="w3-btn w3-ripple" value="Submit >>"><br><br>

</div>  

     </form>

然后我使用以下 JavaScript 来切换显示/隐藏这些 div。这可能不是最好的解决方案，但它满足了我的需要，除了如果您单击每个按钮一次然后提交表单，绝对所有答案都会从 $_POST[''] 中写入每个元素，而不是仅选择的元素(在提交之前保持选择)。

示例

function ClickYes() {
    //opens next step
    document.getElementById("stepTwo").className = "w3-container w3-border w3-card-4 w3-show";

    //defaults all other steps
    document.getElementById("stepThree").className = "w3-container w3-hide";
    document.getElementById("stepOneNo").className = "w3-container w3-border w3-hide";
    document.getElementById("stepOneMaybe").className = "w3-container w3-border w3-hide";
    document.getElementById("stepFour").className = "w3-container w3-border w3-card-4 w3-hide";
    document.getElementById("stepTen").className = "w3-container w3-border w3-card-4 w3-hide";

}

function ClickGuestYes() {
    //opens next step
    document.getElementById("stepTwo").className = "w3-container w3-border w3-card-4 w3-show";
    document.getElementById("stepThree").className = "w3-container w3-show";
    document.getElementById("stepFour").className = "w3-container w3-border w3-card-4 w3-show";

    //defaults all other steps
    document.getElementById("stepOneNo").className = "w3-container w3-border w3-hide";
    document.getElementById("stepOneMaybe").className = "w3-container w3-border w3-hide";
    document.getElementById("stepTen").className = "w3-container w3-border w3-card-4 w3-hide";
}

function ClickGuestNo() {
    //opens next step
    document.getElementById("stepTwo").className = "w3-container w3-border w3-card-4 w3-show";
    document.getElementById("stepFour").className = "w3-container w3-border w3-card-4 w3-show";

    //defaults all other steps
    document.getElementById("stepThree").className = "w3-container w3-hide";
    document.getElementById("stepOneNo").className = "w3-container w3-border w3-hide";
    document.getElementById("stepOneMaybe").className = "w3-container w3-border w3-hide";
    document.getElementById("stepTen").className = "w3-container w3-border w3-card-4 w3-hide";
}

function ClickNo() {
    //opens next step
    document.getElementById("stepOneNo").className = "w3-container w3-border w3-show";
    document.getElementById("stepTen").className = "w3-container w3-border w3-card-4 w3-show";

    //defaults all other steps
    document.getElementById("stepTwo").className = "w3-container w3-border w3-card-4 w3-hide";
    document.getElementById("stepThree").className = "w3-container w3-hide";
    document.getElementById("stepFour").className = "w3-container w3-border w3-card-4 w3-hide";
    document.getElementById("stepOneMaybe").className = "w3-container w3-border w3-hide";
}

function ClickMaybe() {
    //opens next step
    document.getElementById("stepOneMaybe").className = "w3-container w3-border w3-show";
    document.getElementById("stepTen").className = "w3-container w3-border w3-card-4 w3-show";

    //defaults all other steps
    document.getElementById("stepOneNo").className = "w3-container w3-border w3-hide";
    document.getElementById("stepTwo").className = "w3-container w3-border w3-card-4 w3-hide";
    document.getElementById("stepThree").className = "w3-container w3-hide";
    document.getElementById("stepFour").className = "w3-container w3-border w3-card-4 w3-hide";
}

我希望我能够把问题问清楚。请原谅我缺乏经验，如果您能提供帮助，请告诉我!

谢谢， 五、

Answer 1

您在这里使用的逻辑是“逐步”的，这意味着它只检查当前答案并显示下一个问题，而不知道整个过程(状态)。

你需要做的是安排你的逻辑，使其不仅负责下一个问题，而且负责所有其余问题，同时清除 for 值。

伪代码如下:

clickYes() {
  // hide all steps after the initial "Yes" answer and clear their form values
  // show the step that is directly after "Yes" answer
}

对所有其余答案执行相同的操作。

显然有更好的方法来管理表单的状态，但现在我建议您尝试使用暴力方式来做到这一点，然后您可能会找到一些库/框架来帮助以更简单的方式做到这一点。