Get hidden input value from clicked form on page

Question

I have a list of users registered to the application, for the admin there is an option to delete any user registered. I have the list being populated from the database with PHP.

So every one of the users in this list gets a tr row in this table that has all the users in it. At the right column I have a button which only the admin sees on this table of users, and he can delete that specific user by clicking on that 'delete' button.

I would like that before deleting occurs, which is working fine, there should be a pop up alerting to the admin asking "Are you sure you would like to delete "blank" from the system?" with blank having the name of the user the admin clicked the delete button by.

Now I do have the name of the user in a hidden input field attached to the delete button, in other words I am getting a name coming out in that sentence, the problem though is that the same name of the first person on the list is showing up when I click on any one of the delete buttons on the users list. So to clarify although the deleting is happening to the correct user, so it doe's delete the user I would like to delete, the name in the confirmation alert is showing always with the name of the first user.

I believe this is a problem with the way I am writing the jquery code, so any assistance with this would be greatly appreciated, I am sitting on this for a while already trying to find an answer online for this.

So to sum it up in short: I have a couple of "forms" on the page (i.e. meaning "delete" buttons that causes a "form" with hidden input information of the user that we would like to have deleted, is sent to the back-end in order for the back-end to know which user to delete.)

The delete function is working just fine - deleting the desired user.

However the alert function is not populating the desired message to the admin, since the name of the user in the message doe's not change from user to user, and it's grabbing always the name of the first user on the users list.

Here is the code for the users list:

<table class="table table-striped table-bordered">
            <thead class="dark_grey">
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Created At</th>
                <th>User Level</th>
                <th>Actions</th>
            </thead>
            <tbody>
                <?php

                    foreach ($user_rows as $row) 
                    {
                        echo "<tr>";

                            echo "<td>{$row['id']}</td>";
                            echo "<td><a href='/ci/user/user_profile/?={$row['id']}'>{$row['first_name']} {$row['last_name']}</a></td>";
                            echo "<td>{$row['email']}</td>";
                            echo "<td>{$row['created_at_time']}". " " ."{$row['created_at_date']}</td>";
                            if($row['user_level'] != '9')
                            {
                                $row['user_level'] = 'normal';
                                echo "<td>{$row['user_level']}</td>";
                            }
                            else
                            {
                                $row['user_level'] = 'admin';
                                echo "<td>{$row['user_level']}</td>";
                            }
                            echo "<td class='last_td'>
                                    <form class='float_left' action='/ci/user/edit_user' method='post'>
                                        <input type='hidden' name='email' value='{$row['email']}'/>
                                        <input class='btn btn-success' type='submit' value='Edit' />
                                    </form>
                                    **<form class='delete' action='/ci/user/delete_user' method='post'>
                                        <input type='hidden' name='email' value='{$row['email']}'/>
                                        <input type='hidden' name='name' value='{$row['first_name']} {$row['last_name']}' />
                                        <input class='btn btn-danger' type='submit' value='Delete' />
                                    </form>**
                                  </td>";
                        echo "</tr>";
                    }


                ?>

            </tbody>
        </table>

Here is the jquery code:

<script type="text/javascript">
   $(document).ready(function () {
      $('.delete').submit(function () {
          var name = $('input[name="name"]').val();
          alert("Are you sure you would like to delete " + name + " from the system?");
          return false; //I just have this here so the delete didn't take place when testing the alert function.
      });
  });
</script>

So I know somehow I need to have the alert on the current clicked (".delete") but when I tried using $(this) it didn't really work. Very possible I was using it wrong. If someone can show me the right way to write the jquery to be able to get the current clicked "delete" button's hidden input name value in the message that would be great!

Thanks in advance for your help!

Answer 1

You need to make your selector specific like $(this).find('input[name="name"]').val().

Try:

 $('.delete').submit(function(){
      var name = $(this).find('input[name="name"]').val();
      alert("Are you sure you would like to delete " + name + " from the system?");

      return false; //I just have this here so the delete didn't take place when testing the alert function.
 });

When you do $('input[name="name"]').val() it matches more than one input name=name so jquery method val() will return the value of only the first element in the collection, and hence the behavior that you are seeing.

here is a snippet from val() from jquery code

   val: function( value ) {
    var ret, hooks, isFunction,
        elem = this[0]; //<--- It just takes first element in the collection

    if ( !arguments.length ) {
        if ( elem ) {
    ...........

Answer 2

I think I just finally found an answer to my question:

Here is the jquery code that worked:

<script type="text/javascript">
    $(document).ready(function(){


        $('.delete').submit(function(){
            var name = $(this).find('input[name="name"]').val();
            alert("Are you sure you would like to delete " + name + " from the system?");
        });

    });
</script>

I got the answer after finding this post: jQuery get value from hidden input in column

Thanks for your help stackoverflow! :)