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

Question

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>

Why don't you use javascript to handle the logic , try giving id's to each inputs div tag and upon selecting of yes or no you can call a javascript function and hide / unhide the input sections. — Gopi krishna, Nov 03 '20 at 16:36
I treid doing that but it didn't work. I followed the following question: https://stackoverflow.com/questions/40581263/how-to-have-an-html-input-field-appear-when-the-value-other-is-selected-with-p Can you show how to do it? — HAM, Nov 03 '20 at 16:46

score 2 · Answer 1 · answered Nov 03 '20 at 16:55

This can be done using JQuery, take a look at the following example:

Html:

<input id="boxid" type="checkbox"><label for="boxid">not checked</label>

JQuery:

$('#boxid').click(function() {
  if ($(this).is(':checked')) {
    $(this).siblings('label').html('checked');
  } else {
    $(this).siblings('label').html(' not checked');
  }
});

http://jsfiddle.net/zpzxM/

Ricky · Accepted Answer · 2020-11-03T22:37:25.643

2

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>

edited Nov 03 '20 at 22:37

answered Nov 03 '20 at 17:30

Ricky

66
4

This works but I want the opposite of it like when they select yes, only then some of the fields should appear, otherwise those should be hidden. – HAM Nov 03 '20 at 18:48
I've edited. Now it starts with the "yes" unchecked and the example field hidden. When you check "yes", the field appears. I've also removed the "no" checkbox because checkboxes are not exclusive of each other. If you want to display a "yes" and "no", you would use radio buttons instead of the checkbox. – Ricky Nov 03 '20 at 22:42
Okay I'll change it to radio buttons. But in this case, while I refresh the page, the fields are there, and then when I select and unselect the yes, it appears and disappears. I want them to be hidden. I had to use the style="display: none" for those columns, Ill edit the code above in the question. Thanks – HAM Nov 04 '20 at 00:27
I'm not sure I understand your question. In my example, when you refresh the page, the example field starts hidden. – Ricky Nov 05 '20 at 18:39

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

2 Answers2