我有一个包含文本字段、复选框、单选按钮和提交按钮的 HTML 表单。
我希望仅在修改字段内容时启用提交按钮。现在要注意了:如果用户将字段内容修改回原始值,则应再次禁用表单按钮。
- 原始字段值“foo”=> 提交按钮被禁用
- 用户将字段值更改为“栏”=> 提交按钮变为启用状态
- 用户将字段值更改回“foo” => 提交按钮再次被禁用
如何用jQuery实现这一点?是否有任何通用解决方案或脚本可以用于任何形式?
编辑:我的要求不能通过简单的脏状态跟踪来完成。
我有一个包含文本字段、复选框、单选按钮和提交按钮的 HTML 表单。
我希望仅在修改字段内容时启用提交按钮。现在要注意了:如果用户将字段内容修改回原始值,则应再次禁用表单按钮。
如何用jQuery实现这一点?是否有任何通用解决方案或脚本可以用于任何形式?
编辑:我的要求不能通过简单的脏状态跟踪来完成。
使用脏状态跟踪。为每个输入控件附加一个布尔值(例如 IsDirty),并在值更改时切换它。在提交表单时检查是否至少一个或多个值发生了变化,然后提交表单。否则向用户显示警报。
另一种解决方案是在控件值更改时调用通用函数。在此函数中,如果发生更改,您可以将全局变量 (IsDirty) 设置为 true,还可以启用/禁用提交按钮。
var isDirty = false;
function SomethingChanged(){
if( !isDirty ) isDirty = true;
btnSubmit.disabled = !isDirty;
}
任何控件的通用函数
假设:将每个控件的初始值添加到属性“InitVal”
function SomethingChanged(control){
if( control.value != control.InitVal )
control.IsDirty = true;
else
control.IsDirty = false;
}
在上面的函数中,为了使其通用,您可以为每种类型的控件设置单独的函数,例如 TextBoxChanged 和 DropDownChanged 等。但是每个控件都有以下两个属性
只需两步:
看看验证插件。
我还没有测试过下面的内容:-) 但这是你的意思吗?
$(document).ready(function() {
$("#myform :input").attr("init",$(this).val()).bind("change.dirty", function(evt) {
if ($(this).val()!=$(this).attr("init")) $(this).addClass("dirty");
else $(this).removeClass("dirty");
$('#thebutton').attr("disabled",!$("#myform .dirty").size());
});
});
*-派克
应该可以保存整个表单对象(按原样保存,或者通过迭代 .each() 并将数据存储在地图中),然后执行相同的 onSubmit 并比较两个值。
您可以改用dirtyField插件并设置denoteDirtyForm: true。现在,如果您的表单具有“dirtyForm”类,则意味着您有未保存的更改。
您可以做的是设置一个 jquery 脚本以在页面加载时扫描页面并检查表单,清点字段及其值,然后在更新输入时检查该输入引用数组。