Building RSVP-like form (next questions based on previous)

Question

I'm self-learning html/javascript/php at the moment and I'm trying to build one very simple page with forms similar to RSVP. I'd like to make it a bit more complicated, so not all questions are displayed at the beginning, rather than the next questions to be based on previous answers (like in steps). I also prefer to have everything on one page (not next-next-next style). When all questions are answered, I use php to output the results in a file.

It's that simple. However, I have the following issue: If the user goes back and forth among the questions, all answers remain in the cache (or memory) and on submit everything is being output, instead of the only selected radio buttons (the actual answers). How can I clear the "false" answers, keeping only the latest selected buttons? Say, if I click on radio buttons "yes" select something at the next section, then go back and click "no", the result would be all three answers, instead of only the last "no"...

Example part of my form questions in html. They go on steps, based on what the user has clicked.

        <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>

Then I use the following javascript to toggle show/hide these divs. This might not be the best solution, but it does what I need, except that if you click on each buttons once and then submit the form, absolutely all answers get written form the $_POST[''] of each element, instead of the ones only selected indeed (kept selected before submit).

Example

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";
}

I hope I was able to ask the question clear. Please excuse my lack of experience and please let me know if you can help!

Thanks, V.

Answer 1

Even it could be considered very clumsy, the simple function below delivered what I was looking for

document.getElementById("text-maybe").value = "";

Answer 2

The logic you used here is "stepwise", meaning it only checks the current answer and shows the next question, without knowing the whole process (states).

What you need to do is arrange your logic to make it responsible for not only the next question, but all rest questions, and at the same time clear the for values.

The pseudo code is like:

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

And do the same for all rest answers.

Obviously there are better ways to manage the states of a form, but for now I suggest you try the bruteforce way to do it, then you may find some libs/frameworks to help to do it in an easier way.