How to filed form fields based upon user selection in php?

I’ve build a form but I’m kind of stuck at this thing where I have a yes or no field, and upon selecting yes some of the fields should appear otherwise those should be hidden if the user selects no. I’m not sure how to do it.

Here’s the code:

<div class="container">
            <h1>Research</h1>
            <div class="form-group col-md-3">
            <p>Do you have previous research experience? If yes, answer Questions...</p>
               <input type="checkbox" name="yes" value="yes">
                <label for="yes">Yes</label><br>
                 <input type="checkbox" name="no" value="no">
               <label for="no">No</label><br>
            </div> 

            <div class="form-group col-md-6" style="display: none">
                <label for="lengthinresearch">Length of time in Research</label>
                <input type="text" class="form-control" id="lengthinreseasrch" name="lengthinresearch">
            </div>
            <div class="form-group col-md-3">
            <p>Type of Research</p>
               <input type="checkbox" name="basic" value="basic">
                <label for="basic">Basic</label><br>
                 <input type="checkbox" name="clinical" value="clinical">
               <label for="clinical">Clinical</label><br>
            </div>
            <div class="form-group col-md-6">
                <label for="researchinstitution">Research Institution</label>
                <input type="text" class="form-control" id="researchinstitution" name="researchinstitution">
            </div>
            <div class="form-group col-md-6">
                <label for="researchmentor">Research Mentor</label>
                <input type="text" class="form-control" id="researchmentor" name="researchmentor">
            </div>
            </div>

Answer

New here and also learning. Hope I’m following conventions ok. Here is an example of Gopi’s suggestion. I know you asked for PHP, but with just PHP you can’t change the page once it’s loaded.

<script>

    function hideDiv(){

        let checked = document.getElementById("experience").checked

        if (checked) {
            document.getElementById("id_of_div_to_hide").style.display="block"
        }
        else {
            document.getElementById("id_of_div_to_hide").style.display="none"
        }
    }

</script>

<div class="form-group col-md-3">
    <p>Do you have previous research experience? If yes, answer Questions...</p>
    <input onclick="hideDiv()" type="checkbox" id="experience" name="experience" >
    <label for="yes">Yes</label><br>

</div>

<div id="id_of_div_to_hide" class="form-group col-md-6" style="display: none">
    <label for="lengthinresearch">Length of time in Research</label>
    <input type="text" class="form-control" id="lengthinreseasrch" name="lengthinresearch">
</div>

Advertisement

Answer