javascript - 如何通过提交表单/按钮发送行的ID？

Question

我正在为系统管理员编写一个代码，以便在他们忘记所述密码时能够重置用户帐户中的密码。

我目前在通过 Ajax 传递目标用户的 ID 以更改所述用户的密码时遇到问题，通过调试工具，系统返回“id:”的“未定义”响应，尽管“_token”和“password”字段发送正常.

表单的 HTML 代码

<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。在表格的一侧，管理员可以单击一个按钮来重置该用户的密码。

 $(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

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

    });

谢谢您的帮助！

标签： javascriptjqueryajax

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>

请参考上面的代码，您可以在模态弹出调用时传递用户 ID，并将该 ID 设置为隐藏值。然后您可以从隐藏的输入中访问该 ID。当您提交“form-reset-password”表单时。请看上面代码的注释