How to send ID of a row throught submit form / button?

Question

I'm writing a code for the system administrator to be able to reset the users' passwords in their accounts in case they forget said password.

I'm currently having problems passing the target user's ID through Ajax to change said user's password, through debugging tool, the system returns an "undefined" response for "id:", although the "_token" and "password" fields were sent fine.

HTML code for the form

<form id="form-reset-password">
  <div class="container my-2">
    <div class="row">
      <div class="col-md-12">

        <div class="form-row">

          <input type="hidden" id="token" name="_token" value="{{csrf_token()}}">

        </div>

        <div class="form-group">
              <label>New Password</label>
              <input type="text" class="form-control" id="reset-password" name="password" readonly>
        </div>
        <div class="form-group text-right mt-4">
          <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-success btn-confirmreset">Reset</button>
        </div>
      </div>
    </div>
  </div>
</form>

Javascript for generating the data-table where it shows the list of User accounts. On the side of the table, the admin can click a button to reset the password of said user.

 $(document).ready(function() {
    getRoles();
    var accounts;
     $('#account-management').addClass('active');

    accounts = $("#table-accounts").DataTable({
        ajax: {
          url: "/users/get-all-users",
          dataSrc: ''
        },
        responsive:true,
        "order": [[ 7, "desc" ]],
        columns: [
        { data: 'id'},
        { data: 'organization_name', defaultContent: 'n/a' },
        { data: 'first_name' },
        { data: 'last_name' },
        { data: 'email'},
        { data: 'student_number'},
        { data: 'role.name'},
        { data: 'created_at'},
        { data: null,
          render: function ( data, type, row ) {
            var html = "";
            if (data.status == 1) {
              html += '<span class="switch switch-sm"> <input type="checkbox" class="switch btn-change-status" id="'+data.id+'" data-id="'+data.id+'" data-status="'+data.status+'" checked> <label for="'+data.id+'"></label></span>';
            } else {
              html += '<span class="switch switch-sm"> <input type="checkbox" class="switch btn-change-status" id="'+data.id+'" data-id="'+data.id+'" data-status="'+data.status+'"> <label for="'+data.id+'"></label></span>';
            }
              html += "<button type='button' class='btn btn-primary btn-sm btn-edit-account mr-2' data-id='"+data.id+"' data-account='"+data.id+"'>Edit</button>";
              html += "<button type='button' class='btn btn-secondary btn-sm btn-reset-password' data-id='"+data.id+"' data-account='"+data.id+"'><i class='fas fa-key'></i></button>";


            return html;
          } 
        },
        ],
        columnDefs: [
        { className: "hidden", "targets": [0]},
         { "orderable": false, "targets": 7 }
        ]
    });

Javascript for the random password generator and reset password

function resetPassword() {
    $.ajax({
        type: 'GET',
        url: '/user/get-new-password',
        processData: false,
        success: function(data) {
        $('#reset-password').val(data.password);
        }
      });
  }

 $(document).on('click', '.btn-reset-password', function() {
      $('#reset-password-modal').modal('show');
      resetPassword();
    });

 $(document).on('submit', '#form-reset-password', function() {
      var confirm_alert = confirm("Are you sure you want to reset this account's password?");
      if (confirm_alert == true) {
      // var id  = $(this).attr('data-id');
      var id = $('.btn-confirmreset').attr('data-id');
       $.ajax({
            url: "/auth/reset-password",
            type: "POST",
            data: $(this).serialize()+"&id="+id,

            success: function(data) {
              if (data.success === true) {
                alert("Password successfully reset!");
                location.reload();
              }
              else {
                alert("Something went wrong");
              }
            }

          });
            return false;
      }

    });

Thank you for your help!

Answer 1

 <form id="form-reset-password">
      <div class="container my-2">
        <div class="row">
          <div class="col-md-12">

            <div class="form-row">

              <input type="hidden" id="token" name="_token" value="{{csrf_token()}}">
              <input type="hidden" id="user_id" name="user_id" value=""> // initiate the hidden input here

            </div>

            <div class="form-group">
                  <label>New Password</label>
                  <input type="text" class="form-control" id="reset-password" name="password" readonly>
            </div>
            <div class="form-group text-right mt-4">
              <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-success btn-confirmreset">Reset</button>
            </div>
          </div>
        </div>
      </div>
   </form>

   <script type="text/javascript">
    $(document).on('click', '.btn-reset-password', function() {
      var user_id_value = $(this).attr('data-id'); // Get the user id from attr
      $('#user_id').val(user_id_value); // Assign the user id to hidden field.

      $('#reset-password-modal').modal('show');
      resetPassword();
    });

    $(document).on('submit', '#form-reset-password', function() {
      var confirm_alert = confirm("Are you sure you want to reset this account's password?");
      if (confirm_alert == true) {
      // var id  = $(this).attr('data-id');
      //var id = $('.btn-confirmreset').attr('data-id'); // Remove this, it won't work , because this button doesn't contain the data-id
      var id = $('#user_id').val(user_id_value); // You can get the value from hidden field

       $.ajax({
            url: "/auth/reset-password",
            type: "POST",
            data: $(this).serialize()+"&id="+id,

            success: function(data) {
              if (data.success === true) {
                alert("Password successfully reset!");
                location.reload();
              }
              else {
                alert("Something went wrong");
              }
            }

          });
            return false;
      }

    });

   </script>

Please refer the above code, You can pass the user id while modal pop up call and set that id to hidden value. then you can access that id from the hidden input. when you submit "form-reset-password" form. Please look at comments on the above code

Answer 2

Maybe the attr() function is looking for native HTML attribute. So use the following snippet will help.

var id = $('.btn-confirmreset').data('id');