CODEWITHSUNDEEP
javascriptphphtmllaravellaravel-8
wan programmer
wan programmer

Reputation: 71

Display all data in db and use for loop in Javascript

I have a checkbox which will re-enable all input textboxes in a row if checked. The current state is I can only do it on the first row.

This is my code:

@foreach($kucings as $cat)
    <tr>
      <th scope="row">
         <input type="hidden" name="" value="">
         <input type="checkbox" id="name" name="name" value="{{$cat->id}}"/>&nbsp;&nbsp;
         {{$cat->name}}
      </th>
      <td><input type="number" id="age" value="" disabled /></td>
      <td><input type="number" id="weight" value="" disabled /></td>
      <td><input type="number" id="height" value="" disabled /></td>
    </tr>
 @endforeach

Below is my javascript:

<script>
  document.getElementById('name').onchange = function() {
    document.getElementById('age').disabled = !this.checked;
    document.getElementById('weight').disabled = !this.checked;
    document.getElementById('height').disabled = !this.checked;
  };
</script>

Upvotes: 0

Views: 170

Answers (1)

Rifat Bin Reza
Rifat Bin Reza

Reputation: 2761

You cannot have multiple elements with the same id. You can have dynamic id like this and add event listeners for each of them.

  @foreach($kucings as $key => $cat)
    <tr>
      <th scope="row">
         <input type="hidden" name="" value="">
         <input type="checkbox" id="name-{{$key}}" name="name" value="{{$cat->id}}"/>&nbsp;&nbsp;
         {{$cat->name}}
      </th>
      <td><input type="number" id="age-{{$key}}" value="" disabled /></td>
      <td><input type="number" id="weight-{{$key}}" value="" disabled /></td>
      <td><input type="number" id="height-{{$key}}" value="" disabled /></td>
    </tr>
 @endforeach

<script>
  let catCount = {{count($kucings)}};
  for (let i = 0; i < catCount.length; i++) {
    document.getElementById('name-'+i).onchange = function() {
      document.getElementById('age-'+i).disabled = !this.checked;
      document.getElementById('weight-'+i).disabled = !this.checked;
      document.getElementById('height-'+i).disabled = !this.checked;
    }
  };
</script>

Upvotes: 1

Related Questions