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 :- ******@b.com txtProfileName :- kumar
But, if I change the textbox field values
ex:- txtProfileEmail :- ******@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 :- ******@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?