Hello

The "show / hide" text field does not work. In general, the problem is this: initially no radio should be selected (!). And if so, then display the message to the user, otherwise if the first radio is selected, the text field remains hidden, if the second radio is selected, the text field appears, here is the form code:

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

It is necessary that when one radio is selected, the #iva block #iva , and when clicked on the second, it opens. But if no radio is selected, the user is displayed where it says that he should choose. At the moment, if no radio is selected, the user is not informed and should. if someone considers it necessary to optimize the script

  • In the sense of not advising the library, if you have it written on jQuery?) - Yuri
  • one
    I would recommend to reduce the code to the moment until there is only the problem part. such a canvas is unlikely to anyone want to analyze. How to create a minimal, self-sufficient and reproducible example - lexxl
  • That is, you need to create a complete component? Then it's on the freelance exchange (!) - user220409

1 answer 1

Everything is done very simply:

Jquery option:

 $('[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 option:

 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>

First we have to check if at least one radio is pressed. If not, then we display a message, and if so, proceed to the next check.
In the second, we check what was marked, if the first, then we hide the input , and if the second, then we show

  • Thank you. Your answer helped me, help develop the js version a little: how to properly hang the onclic event on radio and not on submit, and when radio == 'privato' is marked, the form is sent immediately, but this should not be because there are more fields below must be checked! - privetsh
  • @privetsh, do you need to check the radio right away? If yes, then you can use onchange or oninput and everything will be the same from there - Yuri