Use javascript onclick in a while PHP loop

Question

I am trying to plus or minus 1, a simple quantity input box, which can be different like in the picture below :

PHP:

$query = ...
while ($row= mysqli_fetch_array($query)) 
{
     <input type="hidden" value="<?php echo $row['id']; ?>" id="id_part">
     <input type="text" value="<?php echo $row['quantity']; ?>" id="<?php echo $row['id']; ?>_count"><br>
     <input type="button" value="-" id="minus" onclick="minus()">
     <input type="button" value="+" id="plus" onclick="plus()">
}

Javascript:

<script>
     var count = 1;
     var id = document.getElementById("id_part").value;
     var countEl = document.getElementById(id + "_count");
     function plus(){
      count++;
      countEl.value = count;
     }
     function minus(){
      if (count > 1) {
       count--;
       countEl.value = count;
      }  
     }
</script>

It doesn't work. It takes me only the first id quantity box. Can't manage to edit the second quantity box, where the id should be different. As you can see, I assigned each id tag with different names, taken from database id.

You're re-using id values, which is invalid in HTML. Use unique id values. — David
– David, Commented Oct 18, 2017 at 14:22
Why not using input type number for this behavior ? (doc, scroll to Input Type Number ) (example) — G1.3
– G1.3, Commented Oct 18, 2017 at 14:29
I would register the event for all the buttons in one single line: $(document).on('click', 'button[id^=minus]', handler) and it could use closest function in jquery to get the values. — funcoding
– funcoding, Commented Oct 18, 2017 at 14:31

Zakaria Acharki · Accepted Answer · 2017-10-18 14:45:39Z

5

Working fiddle.

That happen because you've a duplicate id's when the id attribute should be unique.

Please use common classes instead.

edited Oct 18, 2017 at 14:45

answered Oct 18, 2017 at 14:22

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

Comments

Tphil · Accepted Answer · 2017-10-18 14:33:36Z

0

The ID id_part is being generated for every row in your script. When you click on the button it finds the instance of id_part and its first value and edits its value.

Use unique ids say id='id_part' +<?php echo $row['id']; ?>

answered Oct 18, 2017 at 14:33

Tphil

431 silver badge9 bronze badges

Comments

Rohit.007 · Accepted Answer · 2017-10-18 15:00:57Z

Actually your Hidden field ID should be unique but it is in loop and returning the same value for all rows.

<input type="hidden" value="<?php echo $q; ?>" id="**id_part**">

Try blow changes,
change your inner html as below
<input type="button" value="-" id="minus" onclick="minus(<?php echo $row['id']; ?>)">
<input type="button" value="+" id="plus" onclick="plus(<?php echo $row['id']; ?>)">


<script>
     var count = 1;
     function plus(position){
      count++;
      var countEl = document.getElementById(position + "_count");
      countEl.value = count;
     }
     function minus(position){
      if (count > 1) {
       count--;
       var countEl = document.getElementById(position + "_count");
       countEl.value = count;
      }  
     }
</script>

I got it working so far with this, except one detail. If I plus 1 in the first quantity box, and then I plus 1 in the second quantity box, the new value from the second box will be the the first value from first box + 1, not from the second at it should be.
Try it in a fiddle with static id and values, You will understand what am I saying.

Collectives™ on Stack Overflow

Use javascript onclick in a while PHP loop

3 Answers 3

Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Related