我现在正在自学html / javascript / php，我试图用类似于RSVP的表格构建一个非常简单的页面。我想让它变得更复杂，所以并非所有问题都在开头显示，而不是根据之前的答案（如步骤）显示下一个问题。我也更喜欢把所有东西放在一个页面上（而不是下一个 - 下一个 - 下一个样式）。当所有问题都得到解答时，我使用php将结果输出到一个文件中。
就这么简单。但是，我有以下问题：如果用户在问题中来回移动，所有答案都保留在缓存（或内存）中，并且在提交时正在输出所有内容，而不是唯一选择的单选按钮（实际答案）。如何清除＆＃34; false＆＃34;答案，只保留最新选择的按钮？比如说，如果我点击单选按钮＆＃34;是＆＃34;在下一部分选择一些内容，然后返回并点击＆＃34; no＆＃34;，结果将是所有三个答案，而不仅仅是最后一个＆＃34; no＆＃34; ...
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";
}
我希望我能够清楚地问这个问题。请原谅我缺乏经验，如果你能提供帮助，请告诉我！
谢谢， 诉
答案 0 :(得分：0)
即使它被认为非常笨拙，下面的简单功能也提供了我想要的东西
InkCanvases