Javascript 具有表单未定义Post数据的动态模型

我一直在使用用户编辑模式，模式显示非常好，但是表单提交工作不正常。我已经看过了控制台的输出，我无法发现我的逻辑在哪里失败了。我知道我必须创建模式，填写内容，显示模式，然后提交表单

谢谢你的帮助

代码如下：

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

var更新用户显示=函数（）{
$（“正文”）。在（'单击'，'上。更新用户显示'，函数（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输出=“”；
输出+=''；
输出+=''；
输出+=''；
输出+='员工姓名'；
输出+=‘密码’；
输出+=‘电子邮件地址’；
输出+=‘角色’；
输出+=''；
输出+=''；
输出+=''；
输出+=''；
输出+=''；
输出+=''；
输出+=''；
输出+=''；
输出+=''；
输出+=''；
输出+=''；
输出+=''；
输出+=''；
//BS3模式
var user_modal=$（“#modal user”）；
//填充数据
user_modal.find（'.modal title'）.html（'user Editor'）；
用户_modal.find（'.modal body'）.html（输出）；
//显示模态
用户_modal.modal（'show'）；
//过程数据更改
$（“#提交”）。在（'click'，函数（evt）{
evt.preventDefault（）；
变量形式=$（此）；
var url=$（this.attr（'action'）；
console.log（url）；
var postData={
user\u id:parseInt（$（this.attr（'user\u id'）），
登录名：$（this.find（'.login'）.val（），
密码：$（this）.find（'password'）.val（），
电子邮件：$（this）.find（'email'）.val（），
角色：$（this.find（'role'）.val（）
};
console.log（postData）；
$.post（url、postData、函数（o）{
如果（o.result==1）{
Result.success（“成功更新用户”）；
//隐藏模态
默认_modal.modal（'hide'）；
}否则{
结果。错误（“未进行任何更改”）；
}
}“json”）；
});
});
};

表单提交事件处理程序中有一些错误：

• 每次单击编辑用户时，都会重新绑定submit元素的处理程序（

  $（“#submit”）。在（'click'，function（evt）{}）；

  ）上，多个处理程序会绑定该元素。相反，您应该在DOM就绪时使用事件委派，它只执行一次：
  

  $（文档）。在（'click'，'#submit'，function（）{}）上

• $（this）

  对象是正在单击的元素（
  ），而不是表单元素

• 给每个表单输入适当的ID

• postData.user\u id

  应从输入中获取其值，而不是从

  user\u 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>
       ...
    </form>
 </table> 

...

相反，您应该使用：

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

...