How can I show messages depending on selected radio buttons?

Question

I am struggling to find a way how to display information based on two options in a forms.

What I mean is, there are two options in "Select Gender". If they choose "Male", then a paragraph should appear. If they choose "Female", then another paragraph should appear on the website. How can I do this?

This is the forms code:

<form>
    Select Gender
    <br />
    <input type="radio" name="gender" id="male">
    <label for="male">Male</label>
    <br />
    <input type="radio" name="gender" id="female">
    <label for="female">Female</label>
    <br />
    <br />
</form>

Answer 1

Use CSS only

Note that I added div s around your inputs and the .popup-description s, otherwise this does not work.

 .popup-description{ display: none; } [type="radio"]:checked ~ label ~.popup-description{ display: block; }

 <form> Select Gender <div> <input type="radio" name="gender" id="male"> <label for="male">Male</label> <p class="popup-description"> This text is shown when the user selects <b>male</b>. </p> </div> <div> <input type="radio" name="gender" id="female"> <label for="female">Female</label> <p class="popup-description"> This text is shown when the user selects <b>female</b>. </p> </div> </form>

Use javascript with jQuery

Note that I added a value to your input s, otherwise this does not work.

 $(document).ready(function(){ $("[name='gender']").on("change", function(){ var v = $(this).val(); var n = $(this).attr("name"); $(".popup-description[data-for='" + n + "']").hide(); $(".popup-description[data-for='" + n + "'][data-selected-value='" + v + "']").show(); }); });

 .popup-description{ display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> Select Gender <br /> <input type="radio" name="gender" id="male" value="male"> <label for="male">Male</label> <p class="popup-description" data-for="gender" data-selected-value="male"> This text is shown when the user selects <b>male</b>. </p> <br /> <input type="radio" name="gender" id="female" value="female"> <label for="female">Female</label> <p class="popup-description" data-for="gender" data-selected-value="female"> This text is shown when the user selects <b>female</b>. </p> <br /> </form>

Use plain javascript

Note that I added a value to your input s, otherwise this does not work.

 (function(){ var radios = document.querySelectorAll("[name='gender']"); if(radios;== null){ for(var i = 0. i < radios;length. i++){ var el = radios;item(i). el,addEventListener("change". function(){ if(this.checked){ var v = this;value. var n = this;name. var h = document.querySelectorAll(";popup-description[data-for='" + n + "']"); if(h.== null){ for(var j = 0; j < h.length; j++){ var e = h.item(j). if(e.getAttribute("data-selected-value") == v){ e;style.display = "block". } else{ e;style;display = "none"; } } } } }); } } })();

 .popup-description{ display: none; }

 <form> Select Gender <br /> <input type="radio" name="gender" id="male" value="male"> <label for="male">Male</label> <p class="popup-description" data-for="gender" data-selected-value="male"> This text is shown when the user selects <b>male</b>. </p> <br /> <input type="radio" name="gender" id="female" value="female"> <label for="female">Female</label> <p class="popup-description" data-for="gender" data-selected-value="female"> This text is shown when the user selects <b>female</b>. </p> <br /> </form>