Cannot read property 'Value'

Question

I just literally spent most of my day trying to fix this issue. A little background: I'm designing a mutli-step form, one of the steps is to choose between two options (both are radio buttons).

So for example, step 1 is to choose the gender "male" or "female" and the second step is to enter something in the text input. The problem I have is that when I choose a gender, it doesn't go to the second step. I also had an issue where it did go to the second step but the value returned was "unidentified".

$('#gpadding input:radio').addClass('input_hide');
$('label').click(function() {
   $(this).addClass('selected').siblings().removeClass('selected');
});

var gender, fname, lname;
function _(x) {
   return document.getElementById(x);
}

function next1() {
      gender = _("gender").value;
      _("step1").style.display = "none";
      _("step2").style.display = "block";
}

function next2() {
   fname = _("firstname").value;
   lname = _("lastname").value;
      _("step2").style.display = "none";
      _("show_all_data").style.display = "block";
      _("display_gender").innerHTML = gender;
      _("display_fname").innerHTML = fname;
      _("display_lname").innerHTML = lname;
}

<div class="step" id="step1">
  <h3>Gender</h3>
  <div>
     <div class="gender-box">
        <div id="gpadding">
           <input type="radio" name="gender" id="gender" value="m" />
           <label for="malereg"><img src="images/icons/male-register.png" /><span>MALE</span></label>
           <input type="radio" name="gender" id="gender" value="f" />
           <label for="femalereg"><img src="images/icons/female-register.png" /><span>FEMALE</span></label>
        </div>
     </div>
     <button onclick="next1()">Next</button>
     <button id="bstep" class="md-close">Close</button>
     <div class="clearfix"></div>
  </div>
  </div>
  <div class="step" id="step2">
  <h3>Name</h3>
  <div>
     <input type="text" id="firstname" name="firstname" />
     <input type="text" id="lastname" name="lastname" />
     <button onclick="next2()">Next</button>
     <button id="bstep" class="md-close">Close</button>
     <div class="clearfix"></div>
  </div>
  </div>
  <div class="step" id="show_all_data">
  <h3>Complete</h3>
     <span id="display_gender"></span> <br />
     <span id="display_fname"></span> <br />
     <span id="display_lname"></span> <br />
     <button onlick="submitForm()">Register</button>
     <button id="bstep" class="md-close">Close</button>
  </div>

Answer 1

• You cannot use <div> inside a <label>.
• Make sure the ID selectors you're targeting they actually exist.
• You can wrap all you need inside a label without the need to use for and id attributes:

function _(x)  { return document.getElementById(x); }
function _n(x) { return document.getElementsByName(x); } //Needed to get elements by Name

var gender, input;

function next1() {
  var radio = _n("gender"); // get the elements by Name !!

  for (var i=0, j=radio.length; i<j; i++) { // Loop all radio buttons
    if (radio[i].checked) {                 // If one is Checked...
        gender = radio[i].value;            // All fine
        _("step1").style.display = "none";
        _("step2").style.display = "block";
        break;                              // and exit the loop.
    }
  }
  if(!gender) return alert("Please select a gender"); // If no value, alert something
}

function next2() {
  input = _("input").value; // Use the right ID !!!!!
  if(!input) return alert("Please enter your name");

  _("step2").style.display = "none";
  _("show_data").style.display = "block";
  _("display_gender").innerHTML = gender;
  _("display_input").innerHTML = input;
}

label{display:block;}
#step1, #step2m #show_data{
  background:#eee;
  width:200px;
  padding:30px;
}
#step2, #show_data{display:none;}

    <div id="step1">
      <label>
        <input type="radio" name="gender" value="m">
        <img src="images/icon/male.png" />
        <span>MALE</span>
      </label>
      <label>
      <input type="radio" name="gender" value="f">
        <img src="img/icon/female.png">
        <span>FEMALE</span>
      </label>
      <button onclick="next1()">Next</button>
    </div>
    
    <div id="step2">
      <label>
        Enter your name:
        <input type="text" id="input" name="input">
      </label>
      <button onclick="next2()">Next</button>
    </div>
    
    <div id="show_data">
      <p id="display_gender"></p>
      <p id="display_input"></p>
    </div>