动态模式与表单 - 不屑一顾的发布数据
Dynamic Modal with Form - Undefiend Post Data
我一直在研究用户编辑模式,模态显示非常好,但是表单提交无法正常工作。我查看了控制台输出,但我无法发现我的逻辑在哪里让我失望。我知道我必须创建模态,填写内容,显示模态,然后提交表单。
感谢您的帮助!
这是代码:
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>
相关文章:
- 用程序搜索JQuery数据表中的文本
- 要求输入在数据列表中
- 正在将数据主题添加到所有项目
- 函数参数中的数据与指定变量之间的任何性能差异
- 在VanillaJS中模拟模型双向数据绑定
- CSS-如何定位内容数据标题
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- 序列化数据属性中对象的最可靠方法
- 如何将JSON数据导入我的ejs模板
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 画布数据到图像
- Highcharts系列.数据数据类型限制
- 在jQuery mobile/java脚本的TextBoxes中动态添加未加载的数据.数据具有[object HTMLI
- 严格模式下的图像数据数据分配
- 具有持久数据(数据存储)的Chrome扩展程序
- Java客户端卡在来自nodejs服务器的数据数据流中
- 高级javascript源数据-数据表
- 在 HTML (SVG) 元素中包含数据/数据密钥