mercredi 14 août 2019

Display fields depending on output checkbox - laravel

My form contains multiple fields. One of the fields is a selection. If in the select box yes is selected, two extra fields should appear. But for some reason, it isn't working. I am using jquery to let the fields appear. Bellow, you can find my code. Thanks for the help.

<script type="text/javascript">
function displayFields() {
    if (document.getElementById("isYes").selected) {
        document.getElementById("ifyes").style.display = "block";
        document.getElementById("ifno").style.display = "none";
    } else {
        document.getElementById("ifno").style.display = "none";
        document.getElementById("ifyes").style.display = "none";
    }
}

            ...
                    <div class="d-flex">                    
                        <div class="flex-fill p-2">
                        <select name="condition" class="form-control" onchange="displayFields()" required>
                                <option></option>
                                <option id="isYes">Yes</option>
                                <option id="isNo">No</option>
                            </select>
                        </div>
                    </div> 
                </div>
            </div> 
              <div class="row">
                <div class="col-2">
                    <div class="d-flex">
                        <div class="p-1">
                            <label class="p-2" for="type" id="ifyes" style="display: none;">Type</label>
                        </div> 
                    </div>
                </div> 
                <div class="col-4"> 
                    <div class="d-flex">                       
                        <div class="flex-fill p-2">
                            <input  id="ifyes" style="display: none;"
                                    type="text" 
                                    class="form-control input-text" 
                                    placeholder="Type"
                                    name="type" 
                                    value=""
                            >
                        </div>
                    </div> 
                </div>
                <div class="col-2">
                    <div class="d-flex">
                        <div class="p-1">
                            <label class="p-2" for="function" id="ifyes" style="display: none;">function</label>
                        </div>
                    </div>
                </div>
                <div class="col-4"> 
                    <div class="d-flex">   
                        <div class="flex-fill p-2">
                            <input  id="ifyes" style="display: none;"
                                    type="text" 
                                    class="form-control input-text" 
                                    placeholder="function"
                                    name="function" 
                                    value=""
                            >
                        </div>
                    </div> 




Aucun commentaire:

Enregistrer un commentaire