Why javascript change function is only working for the first row of table?

Question

Screenshot:

I want to add the same value to a table row input field, but JavaScript working for first row only. Please help me with this .

My table is


<tr align="center">
     <td align="center"><input type="checkbox" name="prodid[]" value="<?php echo $row["name"]; ?>"></td>
     <td align="center"><?php echo $row["name"]; ?>
                                            <input type="hidden" name="prodname[]" value="<?php echo $row["name"]; ?>">
     </td>
     <td align="center"><input align="center" type="number" name="prod_price[]" value="<?php echo $row["price"]; ?>" class="form-control"><input type="hidden" class="iprice" value="<?php echo $row["price"]; ?>"></td>
     <td align="center"><input type="number" class="form-control iquantity" onchange="Subtotal()" type="number" name="prod_qty[]" class="form-control"></td>
     <td align="center"><input type="number" class="eachnumber" id="eachnumber" name="prodsname[]" ></td>
     <td class="itotal" align="center">0</td>

</tr>

passes the value from

<input type="number" id="number" class="form-control form-control-solid ps-12" placeholder="number"/>

javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" integrity="sha512-jGR1T3dQerLCSm/IGEGbndPwzszJBlKQ5Br9vuB0Pw2iyxOy+7AK+lJcCC8eaXyz/9du+bkCy4HXxByhxkHf+w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js" integrity="sha512-1icA56H/QfnWMmygJLor4dORvI+7Kurg9CfXSDeJmyMJQL98LfPRk/UwCmi7NoZwbUwxMoI0tc2gJqG/Uu+ecA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
$('#number').change(function() {
  for (i = 0; i < eachnumber.length; i++) {
    $('#eachnumber').val($(this).val());
  }

});
</script>

Try to create a minimal reproducible example by 1. replacing PHP source code with example HTML output 2. creating a runnable snippet using the <> button — user5734311
– user5734311, Commented Apr 12, 2022 at 11:42
IDs must be unique, $('#eachnumber') is the same as $(document).find("#eachnumber").first(), same with $("#number") — fdomn-m
– fdomn-m, Commented Apr 12, 2022 at 11:43
There's only a single row in the example, but the code looks like you'd have the same id for multiple elements. Use a class to identify a group of elements, ids are supposed to be unique within the document. — Teemu
– Teemu, Commented Apr 12, 2022 at 11:43
Anyway, the problem is the same as in all the hundreds of identical questions: an id is supposed to be unique. How is JS supposed to know which of the four elements you're targeting? — user5734311
– user5734311, Commented Apr 12, 2022 at 11:43

Parth Mangukiya · Accepted Answer · 2022-04-12 13:57:47Z

1

If you want to add that value in eachnumber of all the rows then you can simply do this.

$('#number').change(function() {
    $('.eachnumber').val($(this).val());
});

answered Apr 12, 2022 at 13:57

Parth Mangukiya

214 bronze badges

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

Collectives™ on Stack Overflow

Why javascript change function is only working for the first row of table?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related