Eingabewert nicht angezeigt

Question

Ich habe ein mehrphasiges Formular erstellt, das 3 Schritte hat. Im ersten Schritt können Sie ein Geschlecht auswählen, im zweiten Schritt können Sie Ihr Alter und im letzten Schritt das von Ihnen gewählte Geschlecht sowie das Alter auswählen.

Das Problem ist, dass, wenn ich zum Beispiel "Mann" für Geschlecht, im letzten Schritt wählen, zeigt es nicht den Wert von Geschlecht als Mann (Wert = "m"), sondern zeigt es stattdessen als Frauen (Wert = "w").

Wie kann ich dieses Problem beheben?

Teil Code HTML

<h3 id="status">Phase 1 of 2</h3> 
<form id="multiphase" onsubmit="return false"> 
    <div id="phase1"> 
    <div> 
     <label> 
     <input id="gender" type="radio" name="gender" value="w" /> 
     <img src="https://cdn2.iconfinder.com/data/icons/rcons-user/32/female-shadow-circle-512.png" width="180px" height="180px"> 
     </label> 
     <label> 
     <input id="gender" type="radio" name="gender" value="m"/> 
     <img src="http://www.interport.sk/sites/default/files/inline-images/riaditel-spolocnosti_2.png" width="180px" height="180px"> 
     </label> 
    </div> 
    <button onclick="processPhase1()">Continue</button> 
    </div> 
    <div id="phase2"> 
     <div> 
     <select id="age" name="age"> 
      <option>Choose your age</option> 
      <option>18</option> 
      <option>19</option> 
     </select> 
     </div> 
     <button onclick="processPhase2()" class="button-phase2">Continue</button> 
    </div> 
    <div id="show_all_data"> 
     Gender: <span id="display_gender"></span> <br> 
     Age: <span id="display_age"></span> <br> 
    </div> 
</form> 

Answer 1

Ersatz class="gender" für id="gender". id des Elements in document sollte eindeutig sein.

Verwendung document.querySelector() mit Wahl ".gender:checked" bei processPhase1 Funktion

<div id="phase1"> 
    <div> 
    <label> 
     <input class="gender" type="radio" name="gender" value="w" /> 
     <img src="https://cdn2.iconfinder.com/data/icons/rcons-user/32/female-shadow-circle-512.png" width="180px" height="180px"> 
    </label> 

    <label> 
     <input class="gender" type="radio" name="gender" value="m" /> 
     <img src="http://www.interport.sk/sites/default/files/inline-images/riaditel-spolocnosti_2.png" width="180px" height="180px"> 
    </label> 

    </div> 
    <button onclick="processPhase1()">Continue</button> 

gender = document.querySelector(".gender:checked").value; 

codepen http://codepen.io/anon/pen/ObYrEO

Answer 2

ist dies, weil Sie die gleiche ID-Attribut zu Ihrem Radio-Buttons für Geschlecht und die Sie gegeben haben versuchen, den Wert mit der ID zu erhalten. Für Radio-Taste, die eine Gruppe ist, können Sie die geprüfte Radiobutton von dem Gruppennamen

ändern

<input id="gender" type="radio" name="gender" value="w" /> 
<input id="gender" type="radio" name="gender" value="m"/> 

Um so etwas wie

<input id="genderw" type="radio" name="gender" value="w" /> 
<input id="genderm" type="radio" name="gender" value="m"/> 

und erhalten den Wert des Geschlechts im Skript erhalten wie unten.

gender = document.querySelector('input[name="gender"]:checked').value; 

-Code Stift: http://codepen.io/anon/pen/qqGLyO