php form building in loop, javascript only affecting first element

Question

I'm currently building a form, and using a PHP loop to build the elements in a table which hold the values I'm submitting after clicking a checkbox.

<form id="saveLineup">
@foreach($lists as $list)

  <tr style="text-align:center;">
      <td id="groupNumber">{{$list['product']}} - {{$list['product_NAME']}}</td>
      <td id="detailColor">{{$list['detail']}}/{{$list['COLOR']}} - {{$list['description']}}</td>
      <td id="category">{{$list['CATEGORY']}}</td>
      <td><input id="addToLineup"> type="checkbox" <?php if ($list['LINE_UP'] == 1) echo "checked='checked'"; ?>></td>
  </tr>  

@endforeach
</form>

My issue is, I have an id on the checkbox and id's on the values so I can only get the console log when I click the very first checkbox and it only logs the very first item. How can I change this so that I can submit with any checkbox in the table and it's associated values?

$("#addToLineup").click(function (e) {

  var productNumber = document.getElementById("productNumber").innerHTML = productNumber;
  var detailColor = document.getElementById("detailColor").innerHTML = detailColor;
  var category = document.getElementById("category").innerHTML = category;

  updatedata.productNumber = productNumber;
  updatedata.detailColor = detailColor;
  updatedata.category = category;

  $.ajax({
    url: "/test/addToLineup",
    data: updatedata,
    _token: phpVariables.csrfToken,
    type: "POST",
    beforeSend: function () {
      showLoading(element);
    },
    success: function (data) {
      location.reload();
    },
  });
});

Then use this to get the elements - developer.mozilla.org/en-US/docs/Web/API/Document/… — Adam
– Adam, Commented Jan 25, 2019 at 19:01
Ok so maybe I'm confused but I tried to use classes with innerHTML and it returned undefined for each — Whisou138
– Whisou138, Commented Jan 25, 2019 at 19:04
Wait... This is... Not pure PHP, that first code is Laravel Blade code — Smankusors
– Smankusors, Commented Jan 25, 2019 at 19:04
give id the value of Iteration number instead. for eg. chbx1 — Ajit Kumar
– Ajit Kumar, Commented Jan 25, 2019 at 19:04

Adam · Accepted Answer · 2019-01-25 19:06:44Z

1

Here is the solution to your problem, you need to use classes instead of IDs.

@foreach($lists as $list)

  <tr style="text-align:center;">
      <td class="groupNumber">{{$list['product']}} - {{$list['product_NAME']}}</td>
      <td class="detailColor">{{$list['detail']}}/{{$list['COLOR']}} - {{$list['description']}}</td>
      <td class="category">{{$list['CATEGORY']}}</td>
      <td><input class="addToLineup"> type="checkbox" <?php if ($list['LINE_UP'] == 1) echo "checked='checked'"; ?>></td>
  </tr>  

@endforeach

Now, in your JS section, you can fetch them by their class:

  var productNumber = document.getElementsByClassName("productNumber").innerHTML = productNumber;
  var detailColor = document.getElementsByClassName("detailColor").innerHTML = detailColor;
  var category = document.getElementsByClassName("category").innerHTML = category;

Note: If you're applying CSS styles to those elements via their ID, you can change #productNumber to .productNumber in your CSS or you can leave the ID tag with the same name as your previous code.

answered Jan 25, 2019 at 19:06

Adam

1,1592 gold badges14 silver badges22 bronze badges

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

5 Comments

Pluda Over a year ago

I believe that it's better to add a class to the <tr> element and then in javascript getElementsByClassName(from tr) so he can join the variables by object. if querying by className from <td> it will be harder to achieve what he needs

Whisou138 Over a year ago

@Adam each checkbox is triggering now but I'm getting undefined for each element still

Whisou138 Over a year ago

@Adam actually I got it to not return undefined but it only prints the elements of the first one

Whisou138 Over a year ago

I'm using ("productNumber")[0].innerHTML;

Adam Over a year ago

I guess you need to loop through the elements then since you're able to access it by the [0] index. I'll work on editing my answer.

Pluda · Accepted Answer · 2019-01-25 21:11:22Z

0

In PHP code

    <form id="saveLineup">
        <?php $i=0; ?>
        @foreach($lists as $list)
            <?php $i+=1; ?>
                <tr style="text-align:center;">
                    <td id="groupNumber<?php echo $i ?>">. 
                        {{$list['product']}} - {{$list['product_NAME']}}
                    </td>
                    <td id="detailColor<?php echo $i ?>">. 
                        {{$list['detail']}}/{{$list['COLOR']}} - {{$list['description']}}.
                    </td>
                    <td id="category<?php echo $i ?>">. 
                        {{$list['CATEGORY']}}
                    </td>
                    <td>
                        <input id="addToLineup<?php echo $i ?>"> type="checkbox" <?php if ($list['LINE_UP'] == 1) echo 
    "checked='checked'"; ?>>
                    </td>
              </tr>
        @endforeach
        <input id="listcount"> type="hidden" value="<?php  echo $i; ?>" >
    </form>

Js function

$("#addToLineup").click(function (e) {
    for(var i=1 ; i <= parseInt(document.getElementById("listcount").value); i++) {
        Console.log(document.getElementById("productNumber"+i).innerHTML);
        Console.log(document.getElementById("detailColor"+i).innerHTML);
        Console.log(document.getElementById("category"+i).innerHTML);
    }
});

edited Jan 25, 2019 at 21:11

Pluda

1,4776 gold badges21 silver badges46 bronze badges

answered Jan 25, 2019 at 20:22

sheela w

392 bronze badges

1 Comment

Pluda Over a year ago

nice, i can’t test it but it seems that will do the job for him. (Assuming he’s using jquery), but it can easily converted to vanilla javascript.

Collectives™ on Stack Overflow

php form building in loop, javascript only affecting first element

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related