jquery – 禁用提交按钮,除非原始表单数据已更改

前端之家收集整理的这篇文章主要介绍了jquery – 禁用提交按钮,除非原始表单数据已更改前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我正在使用的代码
$('form').bind('keyup change',function(){

默认情况下,提交按钮设置为DISABLED,如果在输入文本字段内更改内容或单选按钮检查状态或下拉选择值,则必须通过删除disabled属性将该按钮设置为ENABLED.

我的目标:

编辑:如果任何东西变回其默认值,则提交按钮将被设置为禁用prop(‘disabled’,true); – 需要一些方法来跟踪每一个变化.

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

示例:从下拉菜单中选择设置,进入Twitter并登录.在帐户页面中,更改您的用户名(只需添加一个额外的字符),然后向下滚动,设置一个复选框以进行检查,并更改您的国家/地区选择.

该按钮将在底部启用,返回并取消选中您先前检查的复选框,底部的按钮将保持启用状态,

滚动到顶部将您的UserName更改回到原来的位置,向下滚动按钮以保存更改仍将被启用,转到国家列表并将其更改为以前拥有的内容,现在最终向下滚动:保存更改按钮将被禁用

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

编辑:这看起来很相似,What is the best way to track changes in a form via javascript?

引用:“您可以默认情况下将其禁用,并且JavaScript处理程序会监视更改事件的输入以启用它.也许渲染一些隐藏的字段或直接呈现JavaScript值来存储”原件“,并且在这些更改事件上检查当前反对原件的值,以确定按钮是否应启用或禁用. – 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的:

// 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>
原文链接:https://www.f2er.com/jquery/175941.html

猜你在找的jQuery相关文章