Javascript function ONLY works on the first row of the table

Question

Each row in my table has an edit button wherein it has a javascript function to edit the data in a row. Whenever I click the edit button, all rows got affected and all input fields were enabled. At first all input fields in all rows are disabled, but when I click any edit button all input fields are affected.

I already used a class selector in my javascript function and in my button and input fields tag.

Here is my html code:

<?php
if($result = mysqli_query($conn, $sql)) {
    while($row = mysqli_fetch_assoc($result)) {
        ?>
        <tr>
            <td> <?php echo $row["productname"]; ?> </td>
            <td><input type="number" name="crit" id="crit" value="<?php echo $row["quantity"]; ?>" disabled></td>
            <td><button type="button" name="edit" id="edit"><i class="fa fa-edit"></i></button></td>
        </tr>
        <?php
    }
}
?>

Here is my javascript function:

    $(document).ready(function() {
    var button = $('#crit');
    $(button).prop('disabled', true);

    $('#edit').click(function() {
        if ($(button).prop('disabled')) $(button).prop('disabled', false);
        else $(button).prop('disabled', true);
    });

});

Once I clicked the edit button of a specific row, the input field SHOULD be enabled on that row only.

You use the same ID for each element. IDs must be unique. Use a class instead. — Qirel, May 31 '19 at 16:11
When I used class, all of the rows of input fields will be enabled. I only want to enable the input field on the specific row where i clicked the "edit" button. — Mnlhorse, May 31 '19 at 16:16
see here to get some understandings :https://stackoverflow.com/questions/23572428/making-row-editable-when-hit-row-edit-button — A l w a y s S u n n y, May 31 '19 at 16:17
@Mnlhorse That can be done with classes. You just have to learn about contextual lookups. Inside an event handler `this` will reference the element the event is being processed on. — Taplar, May 31 '19 at 16:21

Qirel · Accepted Answer · 2019-05-31T16:34:12.200

You give all the elements the same ID - but an ID must be unique. Use a class property instead, and find the closest element with the crit class, using closest() on the button.

<?php
if($result = mysqli_query($conn, $sql)) {
   while($row = mysqli_fetch_assoc($result)){
   ?>
      <tr>
          <td> <?php echo $row["productname"]; ?> </td>
          <td><input type="number" class="crit" value="<?php echo $row["quantity"]; ?>" disabled></td>
          <td><button type="button" class="edit"><i class="fa fa-edit"></i></button></td>
     </tr>
    <?php
    }
}

$(document).ready(function() {
    var buttons = $('.crit');
    $(buttons).prop('disabled', true);

    $('.edit').click(function() {
        var button = $(this).closest("tr").find(".crit");  // closest element with the crit-class
        var status = button.prop("disabled");              // current status
        button.prop("disabled", !status);                  // toggle disabled 
    });
});

The same goes for the name attributes, these should also be unique.

@Taplar You are right, but the answer is actually right overall. Just replace var button = $(this).closest(".crit"); with var button = $(this).closest("tr").find('.crit'); — zozo, May 31 '19 at 16:25
Thank you so much guys. I already edited the given solution to the correct code $(this).closest("tr").find(".crit") — Mnlhorse, May 31 '19 at 16:31

Javascript function ONLY works on the first row of the table

1 Answers1