根据 jQuery 中的条件显示/隐藏字段

Question

如何根据 onblur

otp->textbox and update->button

值的变化显示/隐藏

SaveProfileName_Email

。

最初，当页面加载时，

txtProfileEmail

和

txtProfileName

应包含默认值

例如：-

txtProfileEmail :- [email protected] txtProfileName :- kumar

但是，如果我更改文本框字段值

例如：-

txtProfileEmail :- [email protected] txtProfileName :- kumar v

otp->textbox and update->button

字段正在显示

但是，如果我更改任何一个字段值

txtProfileEmail :- [email protected] txtProfileName :- kumar 

otp->textbox and update->button

字段将隐藏

它不应该隐藏它应该显示，因为当前值与文本框字段上的现有值不同。 {如果在任何一个文本框字段中输入任何新值，则

otp->textbox and update->button

字段应显示（这是我的概念）}

为了实现这一目标，我编写了以下逻辑：-

1. <asp:TextBox ID="txtProfileEmail" runat="server" placeholder="Enter your email"
                                            CssClass="form-control aliceBlue border-0" Enabled="false" onblur="SaveProfileName_Email(this,'email','#hdn_profile_email');"></asp:TextBox>

2. <asp:TextBox ID="txtProfileName" runat="server" placeholder="Enter your name" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '');"
                                            CssClass="form-control aliceBlue border-0" Enabled="false" onblur="SaveProfileName_Email(this,'name','#hdn_profile_name');"></asp:TextBox>

如果（上面）任何一个文本框值发生变化，我们必须保持显示

otp->textbox and update->button

显示/隐藏字段是：-

1.<asp:TextBox ID="txtProfileOTP" runat="server" MaxLength="6" autocomplete="off" CssClass="form-control w-auto aliceBlue border-0 hidden"
                                           placeholder="Enter OTP" oninput="this.value = this.value.replace(/\D/g, '');" onblur="ConfirmProfileOTP(this);"></asp:TextBox>

2.<asp:Button ID="btnProfileSave" runat="server" Text="Save" CssClass="btn btn-primary w-100 w-md-auto hidden" OnClientClick="return SaveBtnProfile(this,event);" />

为了实现这一目标，我编写了以下逻辑：-

function SaveProfileName_Email(input, type, hiddenField) {

    var saveFlag = true;
    var value = $(input).val().trim();
    var oldValue = $(hiddenField).val().trim();

    if (value === "") {
        $(input).val(oldValue);
        $(input).focus();
        saveFlag = false;
    } else if (type === 'email' && !isValidEmail(value)) {
        $(input).val(oldValue);
        $(input).focus();
        saveFlag = false;
    }

    if (saveFlag && value !== oldValue) {
        $("#btnProfileSave").removeClass('hidden');
        $("#txtProfileOTP").removeClass('hidden').val('');
    } else {
        $("#btnProfileSave").addClass('hidden');
        $("#txtProfileOTP").addClass('hidden').val('');
    }
}

function isValidEmail(email) {
    var regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return regex.test(email);
}

使用此逻辑，如果我沿着现有值输入任何新值，则

otp->textbox and update->button

会显示，但如果我仅删除

txtProfileName

和

txtProfileEmail

中的任何一个输入值，则

otp->textbox and update->button

会隐藏，因为它应该保持显示，因为在另一个文本框字段中，新值与现有值一起存在。

建议我哪里出错了以及如何实现这一目标？

Answer 1

我认为您需要检查这两个字段以确定是否已将其中一个字段更改为隐藏/显示按钮。我在过去的项目中使用过类似的东西：

Javascript：

var profileName = $("#txtProfileName").val();
var profileEmail = $("#txtProfileEmail").val();

var valueChanged = false;

if (profileName != $("#hdn_profile_name").val())
valueChanged = true;

if (profileEmail != $("#hdn_profile_email").val())
valueChanged = true;

if (valueChanged) {
 $("#btnProfileSave").removeClass('hidden');
 $("#txtProfileOTP").removeClass('hidden').val('');
} else {
  $("#btnProfileSave").addClass('hidden');
  $("#txtProfileOTP").addClass('hidden').val('');
}

您也不需要传递输入或隐藏的控件 ID。