Hammad Hammad - 3 months ago 10
PHP Question

jQuery function run just in first row

I already fetched all values from database into table

foreach ( $result as $print ) {
?>
<form method="post">
<tr>
<td><a href="#" id="edit-btn">Edit</a></td>
</tr>
<tr>
<div class="edit-box1">
<input id="idd" type="text" readonly="readonly" value="<?php echo $idd; ?>" name="status111">
<input type="submit" value="GO" name="edit-go">
</div>
</tr>
</form>
}


And this is the jQuery code:


jQuery(document).ready(
function() {
jQuery("#edit-btn").click(function() {
jQuery("#idd").prop("readonly", false);
});
});
</script>


The problem is that I got 20 rows and my edit button just run on my first row.

How can I make my jQuery run on all rows ?

Answer

This will be your HTML

$cnt=0;
foreach ( $result as $print )   {
?>
    <form method="post">
        <tr>
            <td><a href="#" class="edit-button" id='<?php echo $cnt;?>'>Edit</a></td>
        </tr>
        <tr>
        <div class="edit-box1">
            <input id="idd<?php echo $cnt;?>" type="text"  readonly="readonly" value="<?php echo $idd; ?>" name="status111">
            <input type="submit" value="GO" name="edit-go">
            <?php $cnt++; ?>
        </div>
        </tr>
     </form>
}

This will be your jquery code

<script>

   jQuery(document).ready(
       function() {
           jQuery(".edit-button").click(function() {
           jQuery("#idd"+$(this).attr("id")).prop("readonly", false);
       });
   });
</script>

Hope this will work surely.

Comments