动态模式与表单 - 不屑一顾的发布数据

Dynamic Modal with Form - Undefiend Post Data

本文关键字:布数据 数据 模式 表单 不屑一顾 动态      更新时间:2023-09-26

我一直在研究用户编辑模式,模态显示非常好,但是表单提交无法正常工作。我查看了控制台输出,但我无法发现我的逻辑在哪里让我失望。我知道我必须创建模态,填写内容,显示模态,然后提交表单。

感谢您的帮助!

这是代码:

var update_user_display = function() {
    $("body").on('click', '.update_user_display', function(evt) {
      evt.preventDefault();
      var user_id = parseInt($(this).attr('data-id'));
      var user_login = $(this).attr('data-user');
      var user_password = $(this).attr('data-password');
      var user_email = $(this).attr('data-email');
      var user_role = $(this).attr('data-role');
      var output = '';
      output += '<table class="user_data table table-striped table-condensed" id="clients">';
      output += '<thead>';
      output += '<tr>';
      output += '<th>Employee Name</th>';
      output += '<th>Password</th>';
      output += '<th>Email Address</th>';
      output += '<th>Role</th>';
      output += '</tr>';
      output += '</thead>';
      output += '<tbody>';
      output += '<form method="post" class="user_edit_form form-horizontal" action="..api/admin/edit_user">';
      output += '<input class="user_id" type="hidden" name="user_id" value="' + user_id + '" />';
      output += '<td><input type="text" id="login" name="login" value="' + user_login + '" /></td>';
      output += '<td><input type="text" id="password" name="password" value="' + user_password + '" /></td>';
      output += '<td><input type="text" id="email" name="email" value="' + user_email + '" /></td>';
      output += '<td><input type="text" id="role" name="role" value="' + user_role + '" /></td>';
      output += '<td><input type="submit" id="submit" name="submit" value="Save" /></td>';
      output += '</form>';
      output += '</tbody>';
      output += '</table>';
      // The BS3 Modal
      var user_modal = $("#modal-user");
      // Populate the Data
      user_modal.find('.modal-title').html('User Editor');
      user_modal.find('.modal-body').html(output);
      // Show the Modal
      user_modal.modal('show');
      // Proccess Data Changes
      $("#submit").on('click', function(evt) {
        evt.preventDefault();
       var form = $(this);
       var url = $(this).attr('action');
       console.log(url);
       var postData = {
           user_id: parseInt($(this).attr('user_id')),
           login: $(this).find('.login').val(),
           password: $(this).find('password').val(),
           email: $(this).find('email').val(),
           role: $(this).find('role').val()
       };
       console.log(postData);
       $.post(url, postData, function(o) {
           if(o.result == 1) {
               Result.success("Successfuly Updated User.");
               // Hide the Modal
              default_modal.modal('hide');
           } else {
               Result.error("No Changes Made.");
          }
       }, 'json');
      });
  });
};

表单提交事件处理程序中存在一些错误:

  • 每次单击以编辑用户时,都会重新绑定提交元素($('#submit').on('click', function(evt) { });(的处理程序,最终导致多个处理程序绑定该元素。相反,您应该在 DOM ready 上使用只执行一次的事件委托:
    $(document).on('click', '#submit', function(){ })

  • $(this)对象是被单击的元素(<input type="submit" id="submit" name="submit" value="Save" />(,而不是表单元素。

  • 为每个表单输入提供适当的 ID。

  • postData.user_id应该从输入中获取其值,而不是从user_id属性中获取其值,该属性在表单中的任何位置都不存在。

所以正确的代码应该是:

  // Proccess Data Changes
  $(document).on('click', '#submit', function(evt){
    evt.preventDefault();
    var $form = $('form.user_edit_form');
    var url = $form.attr('action');
    console.log(url);
    var postData = {
       user_id: parseInt($('#user_id').val()),
       login: $('#login').val(),
       password: $('#password').val(),
       email: $('#email').val(),
       role: $('#role').val()
    };
    console.log(postData);
    $.post(url, postData, function(o) {
       if(o.result == 1) {
           Result.success("Successfuly Updated User.");
           // Hide the Modal
          default_modal.modal('hide');
       } else {
           Result.error("No Changes Made.");
      }
    }, 'json');
  });

此外,jQuery DOM 树遍历函数对于包装在<table>中的 <form> 元素也无法正常工作:

 <table>
    <form>
       ...
    </form>
 </table> 

相反,您应该使用:

<form>
     <table>
       ...
     </table>
</form>