I was trying to do conditional feilds fo the HTML form, And unable to do and need to know how to ach-CodePudding

I was trying to achieve to show the fields when a user select a radio option and if he choose other it has to show another text box

Let me be clear

from below code if user choose "chaitanya school" option it should show the "Enter EPN number" and hide the "school name field"

if user choose other the "enter school name" has to be shown and "EPN number" has to be hidden

Code i used to achieve

<!--Single Line-->
<label>First Name of the student 
<em>*</em>
</label>
<input  type="text" name="SingleLine" value="" fieldType=1 maxlength="255" />
<!--Single Line-->
<label>Last Name of the student 
<em>*</em>
</label>
<input  type="text" name="SingleLine2" value="" fieldType=1 maxlength="255" />
<!--Date-->
<label>Date of Birth 
<em>*</em>
</label>
<input type="text" name="Date" value="" maxlength="25"/><label>dd-MMM-yyyy</label>
<!--Dropdown-->
<label>Class studying in school
<em>*</em>
</label>
<select name="Dropdown"><option selected="true" value="-Select-">-Select-</option>
<option value="V">V</option>
<option value="VI">VI</option>
<option value="VII">VII</option>
<option value="VIII">VIII</option>
<option value="IX">IX</option>
</select>
<!--Single Line-->
<label>Parent/Guardian Name 
<em>*</em>
</label>
<input  type="text" name="SingleLine1" value="" fieldType=1 maxlength="255" />
<!--Email-->
<label>Email 
<em>*</em>
</label>
<input type="text" maxlength="255" name="Email" value="" fieldType=9 />
<!--Phone-->
<label>Phone
<em>*</em>
</label>
<input type="text" compname="PhoneNumber" name="PhoneNumber_countrycode" phoneFormat="isCountryCodeEnabled=false maxlength="20" value="" fieldType=11 id="international_PhoneNumber_countrycode" />
<label>Number</label>
<!--Dropdown-->
<label>Mode of Exam
</label>
<select name="Dropdown1"><option selected="true" value="-Select-">-Select-</option>
<option value="Online">Online</option>
<option value="Offline">Offline</option>
</select>
<!--Dropdown-->
<label>Exam Dates
<em>*</em>
</label>
<select name="Dropdown2"><option selected="true" value="-Select-">-Select-</option>
<option value="Dec&#x20;4,&#x20;2021">Dec 4, 2021</option>
<option value="Dec&#x20;18,&#x20;2021">Dec 18, 2021</option>
<option value="Jan&#x20;22,&#x20;2022">Jan 22, 2022</option>
<option value="Jan&#x20;29,&#x20;2022">Jan 29, 2022</option>
</select>
<!--Radio-->
<label>School studying in
</label>
<input type="radio" id="Radio_1" name="Radio" value="chaitanya School">
<label name="Radio1" for="Radio_1" >Chaitanya&#x20;School</label>
<input type="radio" id="Radio_2" name="Radio" value="Other">
<label name="Radio2" for="Radio_2" >Other</label>
<!--Number-->
<label>EPN 
</label>
<input data-show-if="Radio1" data-hide-if="Radio2" type="text" name="Number" value="" maxlength="18"/>
<!--Single Line-->
<label>School Name 
</label>
<input data-show-if="Radio2" data-hide-if="Radio1"  type="text" name="SingleLine3" value=""  fieldType=1 maxlength="255" />
<button type="submit"><em>Submit</em></button></form>

CodePudding user response：

You can use CSS element1~element2 Selector and CSS Attribute Selectors:

<style>
[data-show-if] {
    display: none;
}

#Radio_1:checked ~ [data-show-if="Radio1"] {
    display: block;
}
#Radio_2:checked ~ [data-show-if="Radio2"] {
    display: block;
}
</style>

check snippet below:

<style>
    [data-show-if] {
        display: none;
    }

    #Radio_1:checked ~ [data-show-if="Radio1"] {
        display: block;
    }
    #Radio_2:checked ~ [data-show-if="Radio2"] {
        display: block;
    }

</style>
<!--Single Line-->
<label>First Name of the student
    <em>*</em>
</label>
<input  type="text" name="SingleLine" value="" fieldType=1 maxlength="255" />
<!--Single Line-->
<label>Last Name of the student
    <em>*</em>
</label>
<input  type="text" name="SingleLine2" value="" fieldType=1 maxlength="255" />
<!--Date-->
<label>Date of Birth
    <em>*</em>
</label>
<input type="text" name="Date" value="" maxlength="25"/><label>dd-MMM-yyyy</label>
<!--Dropdown-->
<label>Class studying in school
    <em>*</em>
</label>
<select name="Dropdown"><option selected="true" value="-Select-">-Select-</option>
    <option value="V">V</option>
    <option value="VI">VI</option>
    <option value="VII">VII</option>
    <option value="VIII">VIII</option>
    <option value="IX">IX</option>
</select>
<!--Single Line-->
<label>Parent/Guardian Name
    <em>*</em>
</label>
<input  type="text" name="SingleLine1" value="" fieldType=1 maxlength="255" />
<!--Email-->
<label>Email
    <em>*</em>
</label>
<input type="text" maxlength="255" name="Email" value="" fieldType=9 />
<!--Phone-->
<label>Phone
    <em>*</em>
</label>
<input type="text" compname="PhoneNumber" name="PhoneNumber_countrycode" phoneFormat="isCountryCodeEnabled=false maxlength="20" value="" fieldType=11 id="international_PhoneNumber_countrycode" />
<label>Number</label>
<!--Dropdown-->
<label>Mode of Exam
</label>
<select name="Dropdown1"><option selected="true" value="-Select-">-Select-</option>
    <option value="Online">Online</option>
    <option value="Offline">Offline</option>
</select>
<!--Dropdown-->
<label>Exam Dates
    <em>*</em>
</label>
<select name="Dropdown2"><option selected="true" value="-Select-">-Select-</option>
    <option value="Dec&#x20;4,&#x20;2021">Dec 4, 2021</option>
    <option value="Dec&#x20;18,&#x20;2021">Dec 18, 2021</option>
    <option value="Jan&#x20;22,&#x20;2022">Jan 22, 2022</option>
    <option value="Jan&#x20;29,&#x20;2022">Jan 29, 2022</option>
</select>
<!--Radio-->
<label>School studying in
</label>
<input type="radio" id="Radio_1" name="Radio" value="chaitanya School">
<label name="Radio1" for="Radio_1" >Chaitanya&#x20;School</label>
<input type="radio" id="Radio_2" name="Radio" value="Other">
<label name="Radio2" for="Radio_2" >Other</label>
<!--Number-->
<label>EPN
</label>
<input data-show-if="Radio1" data-hide-if="Radio2" type="text" name="Number" value="" maxlength="18"/>
<!--Single Line-->
<label>School Name
</label>
<input data-show-if="Radio2" data-hide-if="Radio1"  type="text" name="SingleLine3" value=""  fieldType=1 maxlength="255" />
<button type="submit"><em>Submit</em></button></form>

CodePudding user response：

To achieve this I used jquery to get the checkbox change event by its id and perform show hide on another element it's quite simple.

  $("#Radio_1").change(function(){
     $("#shcoolName,#shlabel").hide();
    });

and for on-page load select any radio button you have to use this

$("#Radio_1").prop("checked", true).trigger("change");

check this working demo it's easier to understand.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#Radio_1").change(function(){
 $("#shcoolName,#shlabel").hide();
 $("#epn,#lblepn").show();
});
$("#Radio_2").change(function(){
 $("#shcoolName,#shlabel").show();
 $("#epn,#lblepn").hide();
});
$("#Radio_1").prop("checked", true).trigger("change");
});
</script>
</head>
<body>

 <!--Single Line-->
<label>First Name of the student 
<em>*</em>
</label>
<input  type="text" name="SingleLine" value="" fieldType=1 maxlength="255" />
<!--Single Line-->
<label>Last Name of the student 
<em>*</em>
</label>
<input  type="text" name="SingleLine2" value="" fieldType=1 maxlength="255" />
<!--Date-->
<label>Date of Birth 
<em>*</em>
</label>
<input type="text" name="Date" value="" maxlength="25"/><label>dd-MMM-yyyy</label>
<!--Dropdown-->
<label>Class studying in school
<em>*</em>
</label>
<select name="Dropdown"><option selected="true" value="-Select-">-Select-</option>
<option value="V">V</option>
<option value="VI">VI</option>
<option value="VII">VII</option>
<option value="VIII">VIII</option>
<option value="IX">IX</option>
</select>
<!--Single Line-->
<label>Parent/Guardian Name 
<em>*</em>
</label>
<input  type="text" name="SingleLine1" value="" fieldType=1 maxlength="255" />
<!--Email-->
<label>Email 
<em>*</em>
</label>
<input type="text" maxlength="255" name="Email" value="" fieldType=9 />
<!--Phone-->
<label>Phone
<em>*</em>
</label>
<input type="text" compname="PhoneNumber" name="PhoneNumber_countrycode" phoneFormat="isCountryCodeEnabled=false maxlength="20" value="" fieldType=11 id="international_PhoneNumber_countrycode" />
<label>Number</label>
<!--Dropdown-->
<label>Mode of Exam
</label>
<select name="Dropdown1"><option selected="true" value="-Select-">-Select-</option>
<option value="Online">Online</option>
<option value="Offline">Offline</option>
</select>
<!--Dropdown-->
<label>Exam Dates
<em>*</em>
</label>
<select name="Dropdown2"><option selected="true" value="-Select-">-Select-</option>
<option value="Dec&#x20;4,&#x20;2021">Dec 4, 2021</option>
<option value="Dec&#x20;18,&#x20;2021">Dec 18, 2021</option>
<option value="Jan&#x20;22,&#x20;2022">Jan 22, 2022</option>
<option value="Jan&#x20;29,&#x20;2022">Jan 29, 2022</option>
</select>
<!--Radio-->
<label>School studying in
</label>
<input type="radio" id="Radio_1" name="Radio" value="chaitanya School">
<label name="Radio1" for="Radio_1" >Chaitanya&#x20;School</label>
<input type="radio" id="Radio_2" name="Radio" value="Other">
<label name="Radio2" for="Radio_2" >Other</label>
<!--Number-->
<label id="lblepn">EPN 
</label>
<input data-show-if="Radio1" id="epn" data-hide-if="Radio2" type="text" name="Number" value="" maxlength="18"/>
<!--Single Line-->

<label id="shlabel">School Name 
</label>
<input data-show-if="Radio2" data-hide-if="Radio1" id="shcoolName" type="text" name="SingleLine3" value=""  fieldType=1 maxlength="255" />
 
<button type="submit"><em>Submit</em></button></form>

</body>
</html>