我有一个包含数字字段,文本字段和下拉列表的表单。我已实现的功能是,如果字段从原始值更改,则按钮已启用提交。如果字段更改回原始值按钮应该被禁用。
问题:目前的问题是 - 如果我更改了两个不同的字段,则按预期启用按钮。但是,如果我只将其中一个已编辑的字段恢复为原始值,则会禁用“提交”按钮。预期的行为是“只要有一个有效的更改字段,那么按钮应保持启用状态”。
按钮状态的条件
对于所有字段 - 如果原始值已更改且不为空 - 启用按钮
对于数字字段 - 如果输入/更改值是有效数字 - 启用按钮
*因此,如果不满足任何这些条件,则按钮应保持禁用状态
当前代码
当前的实现以及为什么以这种方式实现
$("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”),这意味着检查是针对当前正在编辑的每个字段完成的,而不是我从表单中指定的所有指定字段。