Producing dynamic id for a button in javascript

Question

I am trying to write a feature where a table data is generated from a database along with buttons like editing that particular row. The data is generated through a foreach from laravel. One of these buttons is called Edit User .

When the Edit User is clicked a form div will be .toggle('show') which will show the form.

Now I think the problem is the buttons have the same id for the toggle so when I press the second, third and so on buttons the form doesn't toggle. Here is my script.js

$(document).ready( function() {
  $("#form1").hide();
  $("#form2").hide();
  $("#createuser1").click(function() {
    console.log('Create user button clicked');
    $("#form2").hide();
    $("#form1").toggle('slow');
  });
  $("#edituser1").click(function() {
    console.log('Edit user button clicked');
    $("#form1").hide();
    $("#form2").toggle('slow');
  }); 
});

//start of checkuser
function fetchUser(field, query) {
  console.log('The field is ' + field + ' and the userid is ' + query);
}

my html file (main.blade.php)

<tbody>
  @foreach($users as $user)
    <tr>
      <td>{{$user->userid}}</td>
      <td>{{$user->firstname}}</td>
      <td>{{$user->lastname}}</td>
      <td>{{$user->username}}</td>
      <td>{{$user->password}}</td>
      <td>
        @if($user->status == 0)
          Inactive
        @elseif($user->status == 1)
          Active
        @endif
      </td>
      <td>
        <input class="btn btn-danger btn-inverse" type="button" value="Inactive" />
        <input name="edituser" type="button" onclick="fetchUser('edituser', {{$user->userid}})" id="edituser1" class="btn btn-success btn-inverse" value="Edit User"/>
      </td>
    </tr>
  @endforeach
</tbody>

This is the part where it toggles the forms (also part of main.blade.php)

<div class="container" id="form1">
  @include('create')
</div>

<div class="container" id="form2">
  @include('edit')
</div>

I have only included parts of the code to avoid chunks of unrelated code. But feel free to ask for any more details.

Help me solve the part where the other edit buttons doesn't toggle the edit user form.

Answer 1

I think it is better not to have inline click event handler if you have already a click handler in your code. Change the id to a class:

  <tbody>
                @foreach($users as $user)
                  <tr>
                    <td>{{$user->userid}}</td>
                    <td>{{$user->firstname}}</td>
                    <td>{{$user->lastname}}</td>
                    <td>{{$user->username}}</td>
                    <td>{{$user->password}}</td>

                    <td>
                      @if($user->status == 0)
                        Inactive
                      @elseif($user->status == 1)
                        Active
                      @endif
                    </td>

                    <td>
                      <input class="btn btn-danger btn-inverse" type="button" value="Inactive" />
                      <input name="edituser" type="button" data-id="{{$user->userid}}"  class="btn btn-success btn-inverse editUser" value="Edit User"/>
                    </td>
                  </tr>
                @endforeach
              </tbody>

Then change your js this way:

$(document).ready( function() {
  $("#form1").hide();
  $("#form2").hide();
  $("#createuser1").click(function() {
    console.log('Create user button clicked');
    $("#form2").hide();
    $("#form1").toggle('slow');
  });
  $(".editUser").click(function() {
    console.log('Edit user button clicked');
    var id = $(this).attr('data-id');
    fetchUser('edituser', id);
    $("#form1").hide();
    $("#form2").toggle('slow');
  }); 
});

//start of checkuser
function fetchUser(field, query) {
  console.log('The field is ' + field + ' and the userid is ' + query);
}

This way you can reuse the code for all the edituser buttons, you have a much more readible code, you don't have two different click event handler and you don't loose the id of the single user to be passed to the fetchUser function

Answer 2

Well, as I see it, you have two options. Unique ids are a must. I'm assuming your userids are unique, so I'd recommend using them as suffixes to create unique ids for your elements.

First option: Create a unique form for each user that is opened when Edit User is clicked.

Second option: Create a generic form that is populated with the user information when Edit User is clicked.

The first is simpler, but the second with be more efficient. Here is example code of the second solution. Main HTML:

<div class="container" id="main">
    <!-- ... -->
    <input type="button" onclick="fetchUser('edituser', {{$user->userid}}, {{$user->firstname}}, {{$user->lastname}})" class="btn btn-success btn-inverse" value="Edit User" />
    <!-- ... -->
</div>

Edit form HTML:

<div class="container" id="form2">
    <input id='editFormFirstName' />
    <input id='editFormLastName' />
    <input id='editFormPassword' />
</div>

And JS:

function fetchUser(field, userid, firstname, lastname) {
    $('#editFormFirstName').val() = firstname;
    $('#editFormLastName').val() = lastname;
    $('#editFormPassword').val() = "";
}