除非原始表单数据已更改，否则请禁用提交按钮 [英] Disable submit button unless original form data has changed

问题描述

这里是我使用的代码：

$('form').bind('keyup change', function(){

如果输入文本字段内有变化，提交按钮默认设置为DISABLED，或单选按钮检查状态或下拉选择值，则必须通过删除已禁用的属性将该按钮设置为ENABLED。

The submit button is set to DISABLED by default, if something changes inside a input text field, or radio button check state or drop-down selection value, then the button must be set ENABLED by removing the disabled attribute.

我的END目标：

My END GOAL:

编辑：如果有任何更改到默认值，提交按钮应设置为禁用prop（'disabled'，true）; - 需要一些方法来跟踪每个更改。

If anything is changed back to its default value, the submit button shall be set to disabled by prop('disabled', true); - need some method to keep track of every change.

==================================================== =

====================================================

示例：转到Twitter，然后从下拉菜单中选择 ，更改您的用户名（只添加一个额外的字符），然后向下滚动，设置一个复选框以选中，并更改您的国家/地区。

Example: Go to Twitter, and sign-in, from the drop-down menu select Settings. In the Account Page, change your Username (just add an extra char), next scroll down, set a checkbox to checked, and change your country choice.

该按钮将在底部启用，返回并取消选中您之前选中的复选框，底部的按钮将保持启用状态。

The button will be enabled at the bottom, go back and uncheck the checkbox you previously checked, the button at the bottom will remain enabled,

滚动到顶部更改您的UserName回到它是什么，向下滚动按钮保存更改仍然会启用，去国家列表，并将其更改回您以前有，现在终于向下滚动：保存更改按钮将

scroll to the top change your UserName back to what it was, scroll down the button to save changes will still be enabled, go to the country list and changed it back to what you previously had, now finally scroll down: the save changes button will be disabled.

=================================================================== ======================

====================================================

编辑：这看起来很相似，什么是跟踪通过javascript？

this seems very similar, What is the best way to track changes in a form via javascript?

报价：默认情况下，您可以将其禁用，并让JavaScript处理程序观察更改事件的输入以启用它。可能会渲染一些隐藏字段或直接渲染JavaScript值以存储原件，并对这些更改事件检查当前值与原件，以确定是否应启用或禁用按钮。 - David Jan 18 at 15:14（

Quote: "You can render it disabled by default and have JavaScript handlers watching the inputs for change events to enable it. Maybe render some hidden fields or directly render JavaScript values to store the "originals" and, on those change events, check the current values against the originals to determine if the button should be enabled or disabled. – David Jan 18 at 15:14" (Enable 'submit' button only if a value in the form has been changed).

推荐答案

例如：http://jsfiddle.net/justincook/42EYq/15/

JavaScript：

JavaScript:

// Store original values
var orig = [];             
$("form :input").each(function () {
    var type = $(this).getType();
    var tmp = {'type': type, 'value': $(this).val()};
    if (type == 'radio') { tmp.checked = $(this).is(':checked'); }
    orig[$(this).attr('id')] = tmp;
});

// Check values on change
$('form').bind('change keyup', function () {
    var disable = true;
    $("form :input").each(function () {
        var type = $(this).getType();
        var id = $(this).attr('id');    
        if (type == 'text' || type == 'select') {
            disable = (orig[id].value == $(this).val());
        } else if (type == 'radio') {
            disable = (orig[id].checked == $(this).is(':checked'));
        }    
        if (!disable) { return false; } // break out of loop
    });

    $('#submit-data').prop('disabled', disable); // update button
});

// Get form element type
$.fn.getType = function () { 
    if(this[0].tagName == "INPUT")
        return $(this[0]).attr("type").toLowerCase() 
    else
        return this[0].tagName.toLowerCase();        
}

HTML：

<form id="" action="" method="post">
    <input type="text" value="Carl" name="firstname" id="firstname" />
    <input type="text" value="Johnson" name="lastname" id="lasttname" />
    <input id="radio_1" type="radio" value="female" name="sex" />Female
    <input id="radio_2" type="radio" value="male" name="sex" />Male
    <select id="country-list" name="countries">
        <option value="xx" selected="">Worldwide</option>
        <option value="in">India</option>
        <option value="us">United States</option>
    </select>
    <button id="submit-data" disabled="" type="submit">Save changes</button>
</form>

这篇关于除非原始表单数据已更改，否则请禁用提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！