0

Здравствуйте

Не работает "показ/скрытие" поля текст. вообще задача такая: изначально ни одно радио выбрано быть не должно(!). И если это так то вывести сообщение пользователю, иначе если выбран первый радио, то поле текст остается скрытым, если выбран второй радио, то поле текст появляется, вот код формы:

<div class="text_error_form"></div>
<div class="registration_form">
  <form method="post" onsubmit="return RegFormValid();">
    <p>
      <input type="text" name="name" id="name" />
    </p>
    <p>
      <input type="text" name="lastname" id="lastname" />
    </p>
    <p class="user_type">
      <input type="radio" name="user" value="privato" />
      <input type="radio" name="user" value="giuridica" />
    </p>
    <p>
      <input type="email" name="email" id="email" />
    </p>
    <p>
      <input type="text" name="login" id="reglogin" />
    </p>
    <p>
      <input type="password" name="pass" id="regpass" />
    </p>
    <p>
      <input type="text" name="mobile" id="mobile" />
    </p>
    <p>
      <input type="text" name="iva" id="iva" style="display: none;" />
    </p>
    <p>
      <input type="text" name="town" id="town" />
    </p>
    <p>
      <input type="submit" name="register_user" value="Reg" />
    </p>
  </form>
</div>

Нужно, что бы когда выбран один radio, то блок #iva закрывался, а при клике на второй - открывался. Но если не выбран ни один radio, то пользователю выводится сообще, где написано, что он должен выбрать. На данный момент если ни выбран ни один радио пользователю не сообщается а должно. если кто-то считает нужным может оптимизировать скрипт

3
  • В смысле не советовать библиотеку, если у вас и так написано на JQuery?)
    – Yuri
    10 фев 2017 в 9:19
  • 1
    я бы рекомендовал сократить код до момента, пока не останется только проблемная часть. такое полотно вряд ли кому-то захочется анализировать. Как создать минимальный, самодостаточный и воспроизводимый пример
    – lexxl
    10 фев 2017 в 9:21
  • То есть Вам нужно создать полноценный компонент? Тогда это на фриланс биржи(!)
    – user220409
    10 фев 2017 в 9:32

1 ответ 1

1

Всё делается очень просто:

JQuery вариант:

$('[name="register_user"]').click(function() {
  
  // Сама проверка
  if($('[name="user"]:checked').length){
    if($('[name="user"]:checked').val() == 'privato'){
      $('#iva').hide();
    }else{
      $('#iva').show();
    };
  }else{
    console.log('Вы не выбрали ничего!');
  };
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="text_error_form"></div>
<div class="registration_form">
  <form onsubmit="RegFormValid()">
    <p>
      <input type="text" name="name" id="name" />
    </p>
    <p>
      <input type="text" name="lastname" id="lastname" />
    </p>
    <p class="user_type">
      <input type="radio" name="user" value="privato" />
      <input type="radio" name="user" value="giuridica" />
    </p>
    <p>
      <input type="email" name="email" id="email" />
    </p>
    <p>
      <input type="text" name="login" id="reglogin" />
    </p>
    <p>
      <input type="password" name="pass" id="regpass" />
    </p>
    <p>
      <input type="text" name="mobile" id="mobile" />
    </p>
    <p>
      <input type="text" name="iva" id="iva" style="display: none;" />
    </p>
    <p>
      <input type="text" name="town" id="town" />
    </p>
    <p>
      <input type="submit" name="register_user" value="Reg" />
    </p>
  </form>
</div>

JS вариант:

document.querySelector('[name="register_user"]').onclick = function() {
  
  // Сама проверка
  if(document.querySelectorAll('[name="user"]:checked').length){
    if(document.querySelector('[name="user"]:checked').value == 'privato'){
      document.querySelector('#iva').style.display = 'none';
    }else{
      document.querySelector('#iva').style.display = 'block';
    };
  }else{
    console.log('Вы не выбрали ничего!');
  };
  
};
<div class="text_error_form"></div>
<div class="registration_form">
  <form onsubmit="RegFormValid()">
    <p>
      <input type="text" name="name" id="name" />
    </p>
    <p>
      <input type="text" name="lastname" id="lastname" />
    </p>
    <p class="user_type">
      <input type="radio" name="user" value="privato" />
      <input type="radio" name="user" value="giuridica" />
    </p>
    <p>
      <input type="email" name="email" id="email" />
    </p>
    <p>
      <input type="text" name="login" id="reglogin" />
    </p>
    <p>
      <input type="password" name="pass" id="regpass" />
    </p>
    <p>
      <input type="text" name="mobile" id="mobile" />
    </p>
    <p>
      <input type="text" name="iva" id="iva" style="display: none;" />
    </p>
    <p>
      <input type="text" name="town" id="town" />
    </p>
    <p>
      <input type="submit" name="register_user" value="Reg" />
    </p>
  </form>
</div>

Сначала мы должны проверить нажат ли хотя бы на один radio. Если нет, то мы выводим сообщение, а если да, то переходим к следующей проверке.
Во втором мы проверяем, какой был отмечен, если первый, то мы скрываем input, а если второй, то показываем

2
  • спасибо Ваш ответ мне помог, помогите немного доработать js вариант: как правильно повесить событие onclic на radio а не на submit и когда отмечен radio == 'privato' то сразу идет отправка формы, однако этого не должно быть потому что ниже есть еще поля которые должны проверяться!
    – privetsh
    10 фев 2017 в 11:20
  • @privetsh, вам нужно сразу проверять radio? Если да, то можно использовать события onchange или oninput и от туда всё так же будет
    – Yuri
    10 фев 2017 в 11:22

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.