Question 17852 in Laravel Question posted in
The official Laravel Documentation can be found here.

How to hide and show (in forelse loop) div (in array) based on a selection of radio button? – Laravel

I have question regarding to for loop. I have radio button which will store value of Hadir (Attending) and Tidak (Not Attending). If we selected Tidak, div will be show. Otherwise, it will hide the div. My problem is my radio button and div is in for loop. Div will show according to current index and selected radio button. Div show and hide is working, but if we got for next user, the process of show or hide is not working. Below is input for radio button.

@forelse($ahli_mesyuarat as $counter => $ahli)

<?php $counter++; ?>
<form class="theme-form mega-form" name="formkehadiran" method="POST">
{{csrf_field()}}
<tr>
<td>{{ $counter }}</td>
<td align="center"><strong>({{$ahli->nama_ahli}})</strong><br>{{$ahli->Jawatan->nama_jawatan}}</td>
<td align="center">{{$ahli->Gred->nama_gred}} <br> {{ date('d/m/Y', strtotime($ahli->tarikh_lantikan)) }}</td>


<td><strong>
 <div class="form-group" align="center">
  <label  class="col-form-label" for="hadir">HADIR</label>
  <input style="width:9%;" type="radio" id="radioYes" name="kehadiran[{{$counter}}]" value="Y" onClick="hideInputDiv();" checked>
                                                
 <label class="col-form-label" for="tidakHadir">TIDAK HADIR</label>
 <input style="width:9%;" type="radio" id="radioNo" name="kehadiran[{{$counter}}]" value="N" onchange="addmentor()">
 </div> 


<!-- My Div that need to be hide and show -->
 
 <div id="myDIV" style="display: none;">
  CATATAN(JIKA TIDAK HADIR):
  <textarea class="form-control" name="catatan[{{$counter}}]" id="" cols="5" rows="5" placeholder=""></textarea><br>
 
  NAMA WAKIL
  <input class="form-control" type="text" name="wakil_oleh[{{$counter}}]" placeholder="NAMA PENUH WAKIL" value=""><br>
 
  JAWATAN WAKIL
  <select class="form-control" name="jawatan" id="jawatan" value="jawatan">
  <option label="PILIH JAWATAN WAKIL"></option>
  <optgroup label ="____________________________________________________________________">
   @foreach ($ref_jawatan as $ahli_mesyuarats)
    <option value="{{ $ahli_mesyuarats->id_jawatan }}">{{ $ahli_mesyuarats->nama_jawatan }} </option>
   @endforeach
  </select><br>
 
  GRED WAKIL
  <select class="form-control" name="id_gred" id="id_gred" value="id_gred">
  <optgroup label="PILIH GRED AHLI">
  <option label="PILIH GRED AHLI MESYUARAT"></option>
  <optgroup label ="____________________________________________________________________">
   @foreach ($kekananan_gred as $ahli_mesyuarats)
    <option value="{{ $ahli_mesyuarats->id_gred }}">{{ $ahli_mesyuarats->nama_gred }}</option>
   @endforeach
  </select>
 </div>
</strong></td>

Lastly is script. It is outside the foreach loop.

<script>
    //your checkbox
    var checkbox = document.getElementById("radioNo");

    //your div
    var inputDiv = document.getElementById("myDIV");

    //function that will show hidden inputs when clicked
    function addmentor() {
    if (checkbox.checked = true) {
        inputDiv.style.display = "block";
    }
    }

    //function that will hide the inputs when another checkbox is clicked
    function hideInputDiv() {
    inputDiv.style.display = "none";
    }
</script>

I hope someone can help with this. Tq in adv.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Alhamdulillah. I have found a way to solve it. Below is the change in onclick

    <label  class="col-form-label" for="radioYes{{$counter}}">HADIR</label>
<input style="width:9%;" type="radio" id="radioYes{{$counter}}" name="kehadiran[{{$counter}}]" value="Y" onclick="hideInputDiv({{$counter}})" checked>
                                                                                                
<label class="col-form-label" for="radioNo{{$counter}}">TIDAK HADIR</label>
<input style="width:9%;" type="radio" id="radioNo{{$counter}}" name="kehadiran[{{$counter}}]" value="N" onclick="addmentor({{$counter}})">

    Next is script which need to be in the loop.

    <script>
 function addmentor(index) {
                                                   
  document.getElementById('myDIV' + index).style.display = "block";
 }

 function hideInputDiv(index) {
  document.getElementById('myDIV' + index).style.display = "none";
 }
</script>

    Here how I put counter in div.

     <div id="myDIV{{$counter}}" style="display: none;">
    CATATAN(JIKA TIDAK HADIR):
    <textarea class="form-control" name="catatan[{{$counter}}]" id="" cols="5" rows="5" placeholder=""></textarea><br>
    NAMA WAKIL
    <input class="form-control" type="text" name="wakil_oleh[{{$counter}}]" placeholder="NAMA PENUH WAKIL" value=""><br>
    JAWATAN WAKIL
    <select class="form-control" name="jawatan_wakil[{{$counter}}]" id="jawatan_wakil" value="jawatan_wakil">
    <option label="PILIH JAWATAN WAKIL"></option>
    <optgroup label ="____________________________________________________________________">
       @foreach ($ref_jawatan as $ahli_mesyuarats)
       <option value="{{ $ahli_mesyuarats->id_jawatan }}">{{ $ahli_mesyuarats->nama_jawatan }} </option>
       @endforeach
    </select><br>
    GRED WAKIL
    <select class="form-control" name="id_gred_wakil[{{$counter}}]" id="id_gred_wakil" value="id_gred_wakil">
    <optgroup label="PILIH GRED AHLI">
    <option label="PILIH GRED AHLI MESYUARAT"></option>
    <optgroup label ="____________________________________________________________________">
       @foreach ($kekananan_gred as $ahli_mesyuarats)
       <option value="{{ $ahli_mesyuarats->id_gred }}">{{ $ahli_mesyuarats->nama_gred }}</option>
       @endforeach
    </select>
 </div>

  2. 0

    Your radio buttons need to have unique IDs, and the labels need to reference those IDs.

    <label  class="col-form-label" for="radioYes{{$counter}}">HADIR</label>
<input style="width:9%;" type="radio" id="radioYes{{$counter}}" name="kehadiran[{{$counter}}]" value="Y" onClick="hideInputDiv();" checked>
                                                
<label class="col-form-label" for="radioNo{{$counter}}">TIDAK HADIR</label>
<input style="width:9%;" type="radio" id="radioNo{{$counter}}" name="kehadiran[{{$counter}}]" value="N" onclick="addmentor()">

    Then change your Javascript to this:

    function addmentor() {
    document.getElementById("myDIV").style.display = "block";
}

    There is no need to examine the value of the checkbox, since the function only gets called when the user clicks one of the "tidak hadir" radio buttons.

    This could probably be improved further to account for users using the keyboard to change the radio values (rather than clicking).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search