Show/hide the fields based on the condition in jQuery

Question

how to show/hide the otp->textbox and update->button based the onblur SaveProfileName_Email values change.

Initially, when the page is loaded the txtProfileEmail and txtProfileName should contains the default values

ex:- txtProfileEmail :- a@b.com txtProfileName :- kumar

But, if I change the textbox field values

ex:- txtProfileEmail :- a@bb.com txtProfileName :- kumar v the otp->textbox and update->button fields are showing

But, again if I change any of one field value txtProfileEmail :- a@bb.com txtProfileName :- kumar the otp->textbox and update->button fields are hiding

It should not hide it should show because the the current value is different then the existing value on the textbox field. {if any new value entered on any one of the textbox field the otp->textbox and update->button fields should show (this is my concept)}

To achieve this I have written the below logic:-

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>

if any(above) one of the textbox value change, we have to keep show the otp->textbox and update->button

The show/hide field's are:-

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);" />

To achieve this I have written this logic:-

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);

}

Using this logic, if I enter any new value along existing value the otp->textbox and update->button are showing but if I remove any one of the entered value only in txtProfileName and txtProfileEmail the otp->textbox and update->button are hiding it should keep show because in another textbox field the new value is there along with exiting value.

Suggest me where I did the mistake and how to achieve this?

Answer 1

Your onblur handler needs to compare all the fields, not just the one passed to onblur handler. But you probably need to decide how set focus is used if two fields are bad. You should also do a view source and see if the hidden fields have the ids you expect.

Answer 2

Hi @Ashok Kumar

I tested and found the problem with your code.

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

    function SaveProfileName_Email(input, type,hidden) {
    var saveFlag = true;
        var value = $(input).val().trim();
        var oldValue = $(hidden).val().trim();
    if (value === "") {
        $(input).val(oldValue);
        $(input).focus();
        saveFlag = false;
    } else if (type === 'email') {
        $(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('');
    }
}

The hidden here cannot pass your asp:hiddenfield control.

You can try it by modifying it like this:

   function SaveProfileName_Email(input, type) {
    var saveFlag = true;
    var value = $(input).val().trim();
       
    var oldValue = document.getElementById('<%=hdn_profile_email.ClientID %>').value;
    if (value === "") {
        $(input).val(oldValue);
        $(input).focus();
        saveFlag = false;
    } else if (type === 'email') {
        $(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('');
    }
}

Best regards,

Qi You

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.