Не удается прочитать свойство «Значение»

Я буквально потратил большую часть своего дня, пытаясь решить эту проблему. Небольшая предыстория: я разрабатываю многошаговую форму, один из шагов — выбрать один из двух вариантов (оба — переключатели).

Так, например, шаг 1 — выбрать пол «мужской» или «женский», а второй шаг — ввести что-то в поле ввода текста. У меня проблема в том, что когда я выбираю пол, он не переходит на второй шаг. У меня также была проблема, когда он перешел ко второму шагу, но возвращаемое значение было «неопознанным».

$('#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>


javascript forms radio-button multi-step
person Neo    schedule 30.01.2015    source источник
comment
Какой у Вас вопрос?   -  person confile    schedule 30.01.2015
comment
HTML не позволяет <div> внутри области <label>   -  person Roko C. Buljan    schedule 30.01.2015
comment
Как вы можете запросить getElementById(gender), если ни один из ваших тегов не имеет пола в качестве идентификатора?   -  person Amina    schedule 30.01.2015
comment
Также нет элементов show_data, display_gender или display_input.   -  person Barmar    schedule 30.01.2015
comment
@confile Мой вопрос: в чем, черт возьми, проблема? Как я уже сказал, я провел большую часть своего дня сегодня, и я прочитал так много статей, пытаясь это исправить. Вы видите ошибку в коде?   -  person Neo    schedule 30.01.2015
comment
Где твои родители #step1 и #step2? Они у тебя есть?   -  person Roko C. Buljan    schedule 30.01.2015
comment
Ни один из идентификаторов, к которым вы обращаетесь в коде, не существует.   -  person Barmar    schedule 30.01.2015
comment
Я чувствую себя действительно глупо прямо сейчас. Ты прав @Амина. Но теперь, независимо от того, что я выбираю, я получаю тот же результат. Так что, если я выберу Женский, я все равно верну Мужской.   -  person Neo    schedule 30.01.2015
comment
Сначала исправьте проблему с идентификаторами, чтобы мы могли четко понять, что вы хотите сделать.   -  person Amina    schedule 30.01.2015
comment
Я отредактировал пост, и теперь он включает в себя фактический код, который у меня есть. Имейте в виду, что эта форма находится внутри модального блока. Поэтому, когда пользователь нажимает кнопку, она появляется.   -  person Neo    schedule 30.01.2015
comment
Хорошо, есть еще одна проблема. Вы не можете дать один и тот же идентификатор разным элементам. Идентификаторы должны быть уникальными.   -  person Amina    schedule 30.01.2015
comment
Не размещайте свой код в комментариях. Отредактируйте свой пост. Это цель функции!   -  person Amina    schedule 30.01.2015

Ответы (2)


arrow_upward
1
arrow_downward

  • Вы не можете использовать <div> внутри <label>.
  • Убедитесь, что селекторы идентификаторов, на которые вы ориентируетесь, действительно существуют.
  • Вы можете обернуть все, что вам нужно, внутри метки без необходимости использования атрибутов for и id:

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>

person Roko C. Buljan    schedule 30.01.2015
comment
Спасибо, что нашли время все исправить. К сожалению, еще раз, какой бы переключатель я ни нажимал, возвращаемое значение всегда равно m для мужчины, даже когда я выбираю женщину. - person Neo; 30.01.2015
comment
Извини, приятель, я новичок на этом сайте :) Как, черт возьми, это вообще возможно? Что я делаю не так, лол... Я также ввел ваш точный код на свой сайт... - person Neo; 30.01.2015
comment
Назовите меня идиотом. Оба значения были установлены на m. хахаха Ваш код тоже отлично работает. Спасибо чувак! - person Neo; 30.01.2015

arrow_upward
0
arrow_downward

Возможно, измените свой код на:

function next1() {

   var gender_controls = document.getElementsByName("gender");
   gender = gender_controls[0].checked ? gender_controls[0].value : gender_controls[1].value;

  _("step1").style.display = "none";
  _("step2").style.display = "block";
}
person Chris du Preez    schedule 30.01.2015
comment
getElementById не возвращает массив. Идентификаторы должны быть уникальными, поэтому это просто возвращает один узел. - person Barmar; 30.01.2015
comment
Спасибо за ответ. При этом ничего не происходит, когда я нажимаю «Далее». Я проверил консоль, и там ошибка почти идентична. Но на этот раз Невозможно прочитать свойство «проверено» неопределенного. - person Neo; 30.01.2015
comment
извините, getElementById возвращает один элемент. - person Chris du Preez; 30.01.2015
comment
Протестировали gender = _("gender").value; (на последнем хроме), и первый контроль пола возвращается из DOM, независимо от того, проверяется он или нет. другими словами, значение всегда равно 'm', могу ли я предложить немного другой подход - обновлю свой ответ. - person Chris du Preez; 30.01.2015
comment
Обновите мой ответ (и протестируйте его). я не получаю никаких ошибок в chrome, и multi-stps, кажется, ведут себя правильно - person Chris du Preez; 30.01.2015