css 除非原始表单数据已更改,否则禁用提交按钮

x7rlezfr  于 2023-02-17  发布在  其他
关注(0)|答案(5)|浏览(126)

下面是我使用的代码:

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

提交按钮默认设置为DISABLED,如果输入文本字段、单选按钮选中状态或下拉选择值发生变化,则必须通过删除禁用属性将按钮设置为ENABLED。
我的最终目标:

EDIT:如果将任何内容改回默认值,提交按钮应通过prop设置为禁用('disabled',true);- 需要一些方法来跟踪每一个变化。

***示例:***转到Twitter,然后登录,从下拉菜单中选择设置。在帐户页面中,更改您的用户名(只需添加一个额外字符),然后向下滚动,将复选框设置为选中,并更改您的国家选择。

  • 底部的按钮将被启用,返回并取消选中您之前选中的复选框,底部的按钮将保持启用状态,*
  • 滚动到顶部将您的用户名更改回原来的用户名,向下滚动按钮保存更改仍将启用,转到国家列表并将其更改回您以前的用户名,现在最后向下滚动:保存更改按钮将被禁用。*

====================================================
编辑:这看起来非常相似,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)。

vhipe2zx

vhipe2zx1#

我知道这是一个迟来的答案,但是这个方法使用的代码比公认的答案少得多,不需要字段ID,也不需要存储全局数组。
只需使用.serialize()来存储数据,并在每次更改时检查它是否匹配。
http://jsfiddle.net/Pug3H/2/

$('form')
    .each(function(){
        $(this).data('serialized', $(this).serialize())
    })
    .on('change input', function(){
        $(this)             
            .find('input:submit, button:submit')
                .prop('disabled', $(this).serialize() == $(this).data('serialized'))
        ;
     })
    .find('input:submit, button:submit')
        .prop('disabled', true)
;
slhcrj9b

slhcrj9b2#

您只需要保存原始值,然后在每次更改后检查它们。
示例: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();        
}

超文本:

<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>
dwthyt8l

dwthyt8l3#

@奈杰尔Angel答案的改进版:

/* Disable the forms submissions until they have changed */
$(window).on('load', function (e) {
    $('form').each(function(){
        $(this).data('serialized', $(this).serialize())
    })
    .on('change input', function(){
        $(this).find(':submit, input[type="image"]')
            .prop('disabled', $(this).serialize() == $(this).data('serialized'));

        /* Check if input with type files has changed */
        var changedFiles = $( ":file" ).filter(function( index ) {
            return this.value != this.defaultValue;
        }).length;

        if ( changedFiles > 0) {
            $(this).find(':submit, input[type="image"]')
                .prop('disabled', false);
        }
    })
    .find(':submit, input[type="image"]').prop('disabled', true);
});
  • input[type="image"]添加到执行提交的选择器列表中。
  • 添加了对类型文件的输入更改的检查。
  • 还将答案缩短为使用**:submit**,以涵盖按钮和输入的情况。
wxclj1h5

wxclj1h54#

您可以添加一个数据属性来保存默认值-对于选中类型,您可以使用0表示未选中,使用1表示选中

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

然后在jquery中使用filter获取更改的内容

var button = $('#submit-data');
$('form :input').not(button).bind('keyup change', function () {
    // get all that inputs that has changed
    var changed = $('form :input').not(button).filter(function () {
        if (this.type == 'radio' || this.type == 'checkbox') {
            return this.checked != $(this).data('default');
        } else {
            return this.value != $(this).data('default');
        }
    });
    // disable if none have changed - else enable if at least one has changed
    $('#submit-data').prop('disabled', !changed.length);
});

FIDDLE

wwwo4jvm

wwwo4jvm5#

我试了这个代码:

$('.form_contact')
.each(function(){
$(this).data('serialized', $(this).serialize())})
.on('change input', function(){
$(this)
.find('button:reset, button:submit')
.attr('disabled', $(this).serialize() == $(this).data('serialized'));})
.find('button:reset, button:submit')
.attr('disabled', true);

而且它在文本输入、文本区域和选择上都能完美工作。但是当我上传一张图片时,例如用下面的输入:

<input type="file" name="thumbnail" id="thumbnail" class="thumbnail-input__input" onchange="preview()" accept=".png,.jpg,.jpeg,.webp" data-file- input>

图像出现,一切正常,但按钮没有变得活跃,并保持禁用状态,有没有人知道可以做些什么,使它的工作?

相关问题