Display all data in db and use for loop in Javascript

Question

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>

your problem is two fold. your onchange event is only hooked with one row because you're using ID, just use classes if you want it applied to all. second, if you try to submit the form with two rows of age, weight, and height enabled, only the last row will be saved. so in your name attribute, you need to set it as <input name="input[0][name]" and next row input[1][name] and the rest in order for PHP to properly process the complete input — Kevin
– Kevin, Commented Feb 25, 2021 at 8:12
Its too complicated for me. Can u show me the solution ? Its been near a week I tried this — wan programmer
– wan programmer, Commented Mar 2, 2021 at 7:46
im guessing your target would be to save all 3 rows if those rows are enabled, right? but my statement still remains, use classes instead of IDs, and use an array name group so that you can save multiple rows that are enabled — Kevin
– Kevin, Commented Mar 2, 2021 at 9:17
Thank you for suggestion. It takes time to apply the script through the loop and now its work. Now I'm struggling the submit data to database part — wan programmer
– wan programmer, Commented Mar 6, 2021 at 2:34

Rifat Bin Reza · Accepted Answer · 2021-02-25 04:11:21Z

1

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>

answered Feb 25, 2021 at 4:11

Rifat Bin Reza

2,7813 gold badges17 silver badges34 bronze badges

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

3 Comments

wan programmer Over a year ago

Thank you.. But this code not working for me. I'm using a Laravel 8 for web developing

Rifat Bin Reza Over a year ago

@wanprogrammer Can you tell me which syntax is not supported?

wan programmer Over a year ago

There's no error display and interface is shown. But when checked the checkbox it is not functioning for all textbox.. my previous code can run on one row.

Collectives™ on Stack Overflow

Display all data in db and use for loop in Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related