Display fields depending on output checkbox - laravel

Question

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.

Start blade template

@extends('layout')

@section('content')
<div class="container col-sm-12">
<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";
    }
}
</script>


        <style>
        .hide{
        display:none;
        }
        .show {
        display: block;
        }
        </style>

After the jquery, I added directly the form where I am trying to hide or show the fields.

<form action="/events" method="POST">
@csrf

            ...
                    <div class="d-flex">                    
                        <div class="flex-fill p-2">
                        <select name="condition" class="form-control" onchange="displayFields()" required>
                                <option>{{old('condition')}}</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="{{old('type')}}"
                            >
                        </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="{{old('function')}}"
                            >
                        </div>
                    </div>

layout.blade.php

<head>
<title>@yield('title',"Event Planner")</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="base-url" content="{{ url('/') }}">

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<!-- Fonts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="{{ asset('js/app.js') }}" defer></script>

You are using multiple of the same id in your HTML tags (id="ifyes"). You should be using classes there instead. — rits
– rits, Commented Aug 14, 2019 at 8:01
I had a similar question. Maybe this could help. stackoverflow.com/questions/57524251/… — Nemo
– Nemo, Commented Aug 16, 2019 at 13:04

Mohamed Ahmed · Accepted Answer · 2019-08-14 08:16:09Z

0

You have duplicate Id's in your html. Id's should be unique. Classes can have the same class on multiple elements. But Id's should be unique to each element. And If you are using JQuery, you could use this to handle change. Using .change() and chaining with .addClass() & .removeClass() method. With the provided information, here is an example that may help. This is the same thing and does the same thing but more "JQuery":

<style>
  .hide{
  display:none;
}
  .show {
  display: block;
}
</style>


//Add an ID and remove the onChange
//Add value instead of ID to the options
<select name="condition" class="form-control" id="select-condition" required>
   <option>{{old('condition')}}</option>
   <option value="yes">Yes</option>
   <option value="no">No</option>
</select>

<label class="hide p-2" for="function" id="label1">function One</label>
<label class="hide p-2" for="function" id="label2">function Two</label>

//We are going to listen for any changes of the select field
$( "#select-condition" ).change(function() {
  if(this.value == 'yes'){
    $('#label1').removeClass( "hide" );
    $('#label2').addClass( "hide" );
  }else if(this.value == 'no'){
    $('#label1').addClass( "hide" );
    $('#label2').removeClass( "hide" );
  }
  else{
    $('#label1').removeClass( "show" ).addClass("hide");
    $('#label2').removeClass( "show" ).addClass("hide");
  }
});

Here is the working link to JSFiddle

Note: Don't forget to add the JQuery to your project and the JQuery should be linked before the code. Code should be below

Hope this helps. Happy Coding :)

edited Aug 14, 2019 at 8:16

answered Aug 14, 2019 at 7:59

Mohamed Ahmed

2231 gold badge4 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Mohamed Ahmed Over a year ago

Can you show me where you added the jquery? And where you code is? Can you please update your answer? Paste the blade file

Mohamed Ahmed Over a year ago

Where is your JQuery link? Did you link your JQuery? Paste this above my script: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> and put the style above the code.

Mohamed Ahmed Over a year ago

Also, is the form coming after the script? Please remove the type="text/javascript" from script tag for now. And copy paste my above comment script above the script tag

ageans Over a year ago

The form is coming after the script. I just removed all my code and paste your code in my blade template and added the link. Even your code is not working.

Mohamed Ahmed Over a year ago

What does you console error say? When you right click on browser empty area and select 'inspect element' and go to 'console' tab and see what error you are getting there

|

ageans · Accepted Answer · 2019-08-30 14:17:33Z

This is where I ended up with thanks to the input of @ageans and @Mohamed.

 function showType(i){

        var x = document.getElementById("showType"+i);
        var y = document.getElementById("showTypeLabel"+i);
        var z = document.getElementById("selectType"+i);

        if (z.options[z.selectedIndex].value == "Yes"){
            x.style.display = "block";
            y.style.display = "block";
        }else{
            x.style.display = "none";
            y.style.display = "none";
        }        
    }

<select name="condition" class="form-control" onchange="showType(0)" required>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
</select>

<input  id="showTypeLabel0" style="display: none;" type="text"  class="form-control input-text" 
         placeholder="Type" name="type"  value="{{old('type')}}"
>
 <input  id="showType0" style="display: none;"
          type="text" 
          class="form-control input-text" 
          placeholder="function"
          name="function" 
          value="{{old('function')}}"
>

Collectives™ on Stack Overflow

Display fields depending on output checkbox - laravel

Start blade template

layout.blade.php

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Start blade template

layout.blade.php

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related