根据表格

时间:2018-04-23 10:44:15

标签: javascript jquery

我有一个包含数字字段,文本字段和下拉列表的表单。我已实现的功能是,如果字段从原始值更改,则按钮已启用提交。如果字段更改回原始值按钮应该被禁用。

问题:目前的问题是 - 如果我更改了两个不同的字段,则按预期启用按钮。但是,如果我只将其中一个已编辑的字段恢复为原始值,则会禁用“提交”按钮。预期的行为是“只要有一个有效的更改字段,那么按钮应保持启用状态”。

按钮状态的条件
对于所有字段 - 如果原始值已更改且不为空 - 启用按钮
对于数字字段 - 如果输入/更改值是有效数字 - 启用按钮

Form sample

*因此,如果不满足任何这些条件,则按钮应保持禁用状态

当前代码
当前的实现以及为什么以这种方式实现

$("input[name='q_description'],[name='q_sellprice'],[name='profit'],[name='grossProfit'],[name='markUp']").change(function () {
        var originalValue = ($(this)[0].defaultValue);
        var currentValue = $(this).val();
        var changed = false;
        var button = $('#submit-data');

        //numeric fields
        var sellprice = parseFloat($('#q_sellprice').val());             
        var profit = parseFloat($('#profit').val()); var grossProfit = parseFloat($('#grossProfit').val());
        var markUp = parseFloat($('#markUp').val()); 

        //text fields
        var description = document.getElementById("q_description").value;

        //alert("Numeric values:" + getFieldValues );

        //$('input, select').bind('keyup change blur', function () {
            if (description == "" || isNaN(sellprice) || isNaN(profit) || isNaN(grossProfit) || isNaN(markUp))                 
            {
                /*change background color to red for invalid or empty field*/
                $(this).css("background", "#fd6363");
                document.getElementById("submit-data").disabled = true;
            }
            else if ((originalValue != currentValue)  ) {
                /*change background color to yellow if value changed*/
                $(this).css("background", "#FFE075");
                document.getElementById("submit-data").disabled = false;
            }
            else if (originalValue == currentValue) {
                /*original and current values match, reset background of that field to white*/
                $(this).css("background", "#FFFFFF")
                document.getElementById("submit-data").disabled = true;
            }
            else {
                //to do
            }  
        //});             
    });

在第一行,我不这样做

$("input[type=text]").change(function () {

因为表单/页面上有一些字段我想忽略它们以影响提交按钮的状态。这就是我在.change

上指定了那些特定字段的原因

还要检查isNaN的数字字段。我可能可以通过类名识别id所需的字段并将它们添加到数组中,然后检查它而不是众多的声明

var numericFields = document.getElementsByClassName("numeric_fields");
var getFieldValues = new Array();

 for (i in numericFields) {
 var singleValue = numericFields[i].value;
 if (singleValue !== "" && singleValue !== undefined ) {
             getFieldValues.push(singleValue);
         }
 }

但我遇到了一个问题,其中无效检查代码的语句部分是否没有被该实现命中。

无论如何,我想要解决的主要问题是当多个字段被更改/编辑为(原始版本)时将一个字段恢复为原始值时停止按钮被禁用其他有效状态。

更新
进一步检查以澄清问题。我添加了一条警报消息消息,以查看/检查每次更改任何字段时哪个if / else语句被命中

if (description == "" || isNaN(sellprice) || isNaN(profit) ||    isNaN(grossProfit) || isNaN(markUp))                 
{
/*change background color to red for invalid or empty field*/
   alert("1") //disable button
}
else if ((originalValue != currentValue)  ) {
/*change background color to yellow if value changed*/
   alert("2") //enable button
}
else (originalValue == currentValue) {
/*original and current values match, reset background of that field to white*/
   alert("3") //default -> disable button
}

现在,如果之前编辑的字段恢复为原始值,而另一个字段已更改,则会点击最后一个其他语句警报(“3”),这意味着检查是针对当前正在编辑的每个字段完成的,而不是我从表单中指定的所有指定字段。

0 个答案:

没有答案