jQuery function run just in first row

Question

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);
        });
    });

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 ?

you have to add the different ids for all rows or you can select the rows from adding the class as well — Dhaval Purohit, Aug 20 '16 at 12:13
How can i add diffrerent ids on each rows even it fetched data from database — Hammad, Aug 20 '16 at 12:14
Possible duplicate of [How to select all elements with a particular ID in jQuery?](http://stackoverflow.com/questions/902839/how-to-select-all-elements-with-a-particular-id-in-jquery) — Nehal J Wani, Aug 20 '16 at 12:15
$( "#idd" ).each(function() { jQuery("#idd").prop("readonly", false); }); — Vishnu Bhadoriya, Aug 20 '16 at 12:18
The markup is totally invalid. ``s without a `` (or a `` anywhere in a `
`) and `
`s without an enclosing `` — Andreas, Aug 20 '16 at 12:39

score 1 · Answer 1 · answered Aug 20 '16 at 12:19

Id cannot be used more than once, use class instead, try this code:

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

<script>
    jQuery(document).on('click','.edit-btn',function(){
        jQuery(this).closest('.form').find('.idd').prop('readonly',false);
    });
</script>

My Code mess up when i use this Code Sir – Hammad Aug 20 '16 at 12:29 — Hammad, Aug 20 '16 at 12:29

Dhaval Purohit · Accepted Answer · 2016-08-20T13:23:34.273

1

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.

edited Aug 20 '16 at 13:23

answered Aug 20 '16 at 12:31

Dhaval Purohit

1,270
10
28

is it okey now ? @Andreas – Dhaval Purohit Aug 20 '16 at 12:36
now this is final editing it should have no issue.@Andreas – Dhaval Purohit Aug 20 '16 at 12:40
Sir The problem is when i use inspect element it show me id="0" in all rows – Hammad Aug 20 '16 at 13:13
have you copied the `` @Hammad – Dhaval Purohit Aug 20 '16 at 13:22
oh sorry i just forgot to declare $cnt before the for loop @Hammad – Dhaval Purohit Aug 20 '16 at 13:23
Yup Sir I paste it after div also but nothing happened – Hammad Aug 20 '16 at 13:23
Code Work Successfull :) :) :) – Hammad Aug 20 '16 at 13:25
Edit How can i use it in button instead of A Href – Hammad Aug 20 '16 at 13:30
Sir Dhaval please Help – Hammad Aug 20 '16 at 14:43
I solved that Problem . I Want to ask how can I Hide the Edit button when Click on Edit button I Did but it will hide all the Edit buttons – Hammad Aug 20 '16 at 15:14
it's also easy @Hammad for specific button try eg. `jQuery(this).css("display","none");` in the `click` function – Dhaval Purohit Aug 22 '16 at 08:10

Ehsan · Answer 3 · 2016-08-20T12:38:31.683

1 ) all id convert class

2) Use method removeAttr("readonly")

<tr>
    <td><a href="#" class="edit-btn">Edit</a></td>
</tr>

<input class="idd" type="text" readonly="readonly" value="<?php echo $idd; ?>" name="status111">

And you can use $(".idd").removeAttr("readonly")

 $(document).ready(function(){
           $(".edit-btn").click(function(){
              $(".idd").removeAttr("readonly");
               $(".idd:first").focus();

           })
       })

Example :

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <tr>
        <td><a href="#" class="edit-btn">Edit</a></td>
        </tr>
        <input type="text" class="idd" readonly>
        <input type="text" class="idd" readonly>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
           $(document).ready(function(){
           $(".edit-btn").click(function(){
              $(".idd").removeAttr("readonly");
               $(".idd:first").focus();
               
           })
       })
        </script>
    </body>
</html>

Still when i click on Edit it will focus on first row even when i click Edit of 2nd Row — Hammad, Aug 20 '16 at 13:08

jQuery function run just in first row

3 Answers3