I've searched and seen this several times before but I'm just stumped. I know i've got to be missing something simple.
Here's my scenario. I have 4 RadTextBoxes in a Panel along with a Search button and a Reset button. I have EmptyText values set for each of them. What I'd like is to have the Search button Disabled until someone enters at least one character into at least one of the TextBoxes (we allow partial matches). We had it working before sort of, until the EmptyText values were set. Like I said, I know i'm missing something stupid but here's the basic code:
Javascript:
function formValidation(oEvent) {
oEvent = oEvent || window.event;
var txtField = oEvent.target || oEvent.srcElement;
var ShouldEnabled = true;
if (document.getElementById("ctl00_Body_uxMemberFirstName").value.length == 0 || document.getElementById("ctl00_Body_uxMemberFirstName").value.length != 17)
{ ShouldEnable = false; }
if (document.getElementById("ctl00_Body_uxMemberLastName").value.length == 0 || document.getElementById("ctl00_Body_uxMemberLastName").value.length != 16)
{ ShouldEnable = false; }
if (document.getElementById("ctl00_Body_uxMemberId").value.length == 0 || document.getElementById("ctl00_Body_uxMemberId").value.length != 15)
{ ShouldEnable = false; }
if (document.getElementById("ctl00_Body_uxMemberId").value.length == 0 || document.getElementById("ctl00_Body_uxMemberId").value.length != 25)
{ ShouldEnable = false; }
if (ShouldEnabled) { document.getElementById("ctl00_Body_uxSearch_input").disabled = false; }
else { document.getElementById("ctl00_Body_uxSearch_input").disabled = true; }
}
---------------
window.onload = function () {
var txtMemberFirstName = document.getElementById("ctl00_Body_uxMemberFirstName");
var txtMemberLastName = document.getElementById("ctl00_Body_uxMemberLastName");
var txtMemberId = document.getElementById("ctl00_Body_uxMemberId");
var txtMemberOldId = document.getElementById("ctl00_Body_uxMemberId");
var ShouldEnabled = false;
document.getElementById("ctl00_Body_uxSearch_input").disabled = true;
txtMemberFirstName.onkeyup = formValidation;
txtMemberLastName.onkeyup = formValidation;
txtMemberId.onkeyup = formValidation;
txtMemberOldId.onkeyup = formValidation;
}
----------------------Then the code for the Telerik controls is:
<telerik:RadButton ID="uxSearch" runat="server" Text="Search" Width="55px" OnClick="uxSearch_Click"
ToolTip="Search" TabIndex="13" ValidationGroup="SearchMember" OnClientClicked="validateInput" />
I've set the uxSearch's Enabled property to False at Page load and on Pre-Render on a whim, set it inline in the code above, and everything else I can think of. I've tried it in multiple browsers and verified that the properties are set correctly via the debugger. I actually want to use similar behavior throughout the app with RibbonButtons but need to start here. We have code in the code behind that'll stop the search from happening if there aren't values in. I wasn't here for it but from what i understand, I 'broke' the code when I entered the EmptyText values for each of the relevant textbox controls which I believe was being handled with the validateinput method (not shown here b/c I don't think it's relevant).
Again, this has to be very common functionality and I'm not a UI guy (in fact my field is Data Science so doing UI stuff is way out of my league. No one else was able to get any traction though on any of the other items even though this one supposedly worked before so I was hoping to solve it here and use the same logic throughout. i beg your indulgence if this is such a newbie question and honestly, I did spend quite a while searching and trying things . I'm attaching the relevant files if that could help (although I'm certainly not asking anyone to debug my code). I just have a nagging suspicion I'm overlooking something really small and being new to Javascript I'm sure that's the case. Any help would be greatly appreciated.