如果表单字段没有被修改，如何在jQuery中禁用提交按钮？

I have a HTML form that contains text fields, checkboxes, radiobuttons and a submit button.

我有一个HTML表单,其中包含文本字段,复选框,单选按钮和提交按钮。

I'd like that submit button is enabled only if contents of fields are modified. Now here is the catch: if the user modifies field contents back to original values, the form button should be disabled again.

我想只有在修改字段内容时才启用提交按钮。现在是捕获:如果用户将字段内容修改回原始值,则应再次禁用表单按钮。

Original field value "foo" => submit button is disabled

原始字段值“foo”=>提交按钮被禁用

User changes field value to "bar" => submit button becomes enabled

用户将字段值更改为“bar”=>提交按钮变为启用状态

User changes field value back to "foo" => submit button becomes disabled again

用户将字段值更改回“foo”=>提交按钮再次被禁用

How to achieve this with jQuery? Are there any kind of general solution or script that I could use with any form?

如何用jQuery实现这一目标?我可以使用任何形式的任何通用解决方案或脚本吗?

Edit: What I am asking can't be done with simple dirty state tracking.

编辑:我要问的是简单的脏状态跟踪无法完成。

8 个解决方案

#1

Use dirty state tracking. Attach a boolean value (e.g. IsDirty) to every input control and toggle it whenever the value changes. While submitting the form check if atleast one or more values have changed and then submit the form. Otherwise display an alert to the user.

使用脏状态跟踪。将布尔值(例如IsDirty)附加到每个输入控件,并在值更改时切换它。提交表单时检查是否至少有一个或多个值发生了变化,然后提交表单。否则向用户显示警报。

Another solution is to call a common function whenever a controls value changes. In this function you can set a global variable (IsDirty) to true if something changed and also enable/disable the submit button.

另一种解决方案是在控件值发生变化时调用公共函数。在此函数中,如果更改了某些内容,您可以将全局变量(IsDirty)设置为true,并启用/禁用提交按钮。

var isDirty = false;

function SomethingChanged(){
     if( !isDirty ) isDirty = true;
     btnSubmit.disabled = !isDirty;
}

Generic Function for any control

任何控件的通用函数

Assumptions: Add the initial value of each control to an attribute "InitVal"

假设:将每个控件的初始值添加到属性“InitVal”

function SomethingChanged(control){
     if( control.value != control.InitVal )
          control.IsDirty = true;
     else
          control.IsDirty = false;
}

In the above function to make it generic you can have separate functions for each type of control like TextBoxChanged and DropDownChanged etc. But have the following two attributes on each control

在上面的函数中,为了使它通用,你可以为每种类型的控件提供单独的函数,如TextBoxChanged和DropDownChanged等。但是在每个控件上都有以下两个属性

InitValue - Initial Value of the control

InitValue - 控件的初始值

IsDirty - Boolean value indicating that the control's value has changed

IsDirty - 表示控件值已更改的布尔值

#2

Just two steps:

只需两步:

store a hash of all initial values in a javascript variable

在javascript变量中存储所有初始值的哈希值

onchange of every input recalculates that hash and verifies it with the one stored. if it's the same, disable the submit button, if it's not, enable it.

每次输入的onchange重新计算该哈希值并使用存储的哈希值进行验证。如果它是相同的,禁用提交按钮,如果不是,启用它。

#3

Have a look at the validation plug-in.

看看验证插件。

#4

This seems like a better answer.

这似乎是一个更好的答案。

1401-Using-jQuery-To-Leverage-The-OnChange-Method-Of-Inputs.htm

#5

I havent tested whats below :-) But is that what you mean ?

我还没有测试下面的内容:-)但这是你的意思吗?

$(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());
    });
});

*-pike

#6

It should be possible to save the whole form object (either as it is, or by iterating with .each() and storing the data in a map), and then do the same onSubmit and compare both values.

应该可以保存整个表单对象(无论是原样,还是通过迭代使用.each()并将数据存储在映射中),然后执行相同的onSubmit并比较两个值。

#7

You can use dirtyField plugin instead and set denoteDirtyForm: true. Now if your form has "dirtyForm" class means you have unsaved changes.

您可以使用dirtyField插件,并设置denoteDirtyForm:true。现在,如果您的表单具有“dirtyForm”类,则意味着您有未保存的更改。

#8

What you could do is setup a jquery script to scan the page on page load and check for a form, inventory the fields and their values, and then check against that input reference array whenever an input is updated.

您可以做的是设置一个jquery脚本来在页面加载时扫描页面并检查表单,清点字段及其值,然后在更新输入时检查该输入引用数组。

#1