Referencing HTML input boxes correctly
-
I have a user control with two input boxes. The onkeyup calls a function. The function works but the problem is when I have two of these user controls on a page. When document.getElementById("Text2").focus() executes for the second user control it puts the focus on Text2 in the first user control. How do I reference Text2 so that the focus is place on the correct Text2? function TimeEntryHoursOnClick(theTextbox) { if (event.keyCode == 38) theTextbox.value = parseFloat(theTextbox.value) + 1 if (event.keyCode == 39) document.getElementById("Text2").focus(); }
-
I have a user control with two input boxes. The onkeyup calls a function. The function works but the problem is when I have two of these user controls on a page. When document.getElementById("Text2").focus() executes for the second user control it puts the focus on Text2 in the first user control. How do I reference Text2 so that the focus is place on the correct Text2? function TimeEntryHoursOnClick(theTextbox) { if (event.keyCode == 38) theTextbox.value = parseFloat(theTextbox.value) + 1 if (event.keyCode == 39) document.getElementById("Text2").focus(); }
-
The code cannot find Text2. This line returns null. Any ideas why? document.getElementById("ctl00_ContentPlaceHolder1_TimeEntryBox1_Text2"); Here is the HTLM. <div id="ctl00_ContentPlaceHolder1_TimeEntryBox1_Panel1" style="border-color:#7F9DB9;border-width:1px;border-style:Solid;width:89px;"> <input id="Text1" name="Text1" onkeyup="TimeEntryHoursOnClick(this)" onblur="TimeEntryHoursOnBlur(this)" style="border: 0px none #FFFFFF; width: 12px; " type="text" maxlength="2" /> : <input id="Text2" name="Text2" type="text" onkeyup="TimeEntryMinutesOnClick(this)" onblur="TimeEntryMinutesOnBlur(this)" style="border: 0px none #FFFFFF; width: 12px" maxlength="2" /> <input type="hidden" id="ctrlPrefix" name="ctrlPrefix" value='ctl00_ContentPlaceHolder1_TimeEntryBox1_'> </div>
-
The code cannot find Text2. This line returns null. Any ideas why? document.getElementById("ctl00_ContentPlaceHolder1_TimeEntryBox1_Text2"); Here is the HTLM. <div id="ctl00_ContentPlaceHolder1_TimeEntryBox1_Panel1" style="border-color:#7F9DB9;border-width:1px;border-style:Solid;width:89px;"> <input id="Text1" name="Text1" onkeyup="TimeEntryHoursOnClick(this)" onblur="TimeEntryHoursOnBlur(this)" style="border: 0px none #FFFFFF; width: 12px; " type="text" maxlength="2" /> : <input id="Text2" name="Text2" type="text" onkeyup="TimeEntryMinutesOnClick(this)" onblur="TimeEntryMinutesOnBlur(this)" style="border: 0px none #FFFFFF; width: 12px" maxlength="2" /> <input type="hidden" id="ctrlPrefix" name="ctrlPrefix" value='ctl00_ContentPlaceHolder1_TimeEntryBox1_'> </div>
Have you tried debugging the JavaScript?
only two letters away from being an asset
-
The code cannot find Text2. This line returns null. Any ideas why? document.getElementById("ctl00_ContentPlaceHolder1_TimeEntryBox1_Text2"); Here is the HTLM. <div id="ctl00_ContentPlaceHolder1_TimeEntryBox1_Panel1" style="border-color:#7F9DB9;border-width:1px;border-style:Solid;width:89px;"> <input id="Text1" name="Text1" onkeyup="TimeEntryHoursOnClick(this)" onblur="TimeEntryHoursOnBlur(this)" style="border: 0px none #FFFFFF; width: 12px; " type="text" maxlength="2" /> : <input id="Text2" name="Text2" type="text" onkeyup="TimeEntryMinutesOnClick(this)" onblur="TimeEntryMinutesOnBlur(this)" style="border: 0px none #FFFFFF; width: 12px" maxlength="2" /> <input type="hidden" id="ctrlPrefix" name="ctrlPrefix" value='ctl00_ContentPlaceHolder1_TimeEntryBox1_'> </div>
getElementById is a javascript function that finds one element. If the ID of the textbox is Text1 when rendered to the client browser (I mean if you see id of your input as Text1 when you see Source from the browser), just use var element = document.getElementById("Text1"); rather than var element = document.getElementById("ctl00_ContentPlaceHolder1_TimeEntryBox1_Text2"); If you want to find the div, you can do so using var divelement = document.getElementById("ctl00_ContentPlaceHolder1_TimeEntryBox1_Panel1"); Always remember, you can mention only those elements which are rendered to the client. ASP.NET server side Ids are different than what is rendered in the client side. Use ClientID than ID for any server control to get the actual ID generated in the client, and always call this ID through JAVASCRIPT. Hope you got it. :thumbsup:
Abhishek Sur
My Latest Articles **Create CLR objects in SQL Server 2005 C# Uncommon Keywords Read/Write Excel using OleDB
**Don't forget to click "Good Answer" if you like to.
-
getElementById is a javascript function that finds one element. If the ID of the textbox is Text1 when rendered to the client browser (I mean if you see id of your input as Text1 when you see Source from the browser), just use var element = document.getElementById("Text1"); rather than var element = document.getElementById("ctl00_ContentPlaceHolder1_TimeEntryBox1_Text2"); If you want to find the div, you can do so using var divelement = document.getElementById("ctl00_ContentPlaceHolder1_TimeEntryBox1_Panel1"); Always remember, you can mention only those elements which are rendered to the client. ASP.NET server side Ids are different than what is rendered in the client side. Use ClientID than ID for any server control to get the actual ID generated in the client, and always call this ID through JAVASCRIPT. Hope you got it. :thumbsup:
Abhishek Sur
My Latest Articles **Create CLR objects in SQL Server 2005 C# Uncommon Keywords Read/Write Excel using OleDB
**Don't forget to click "Good Answer" if you like to.
Ok thanks for the info, but how would I set the focus to Text2 in ctl00_ContentPlaceHolder1_TimeEntryBox2_Panel1? <div id="ctl00_ContentPlaceHolder1_TimeEntryBox1_Panel1" style="border-color:#7F9DB9;border-width:1px;border-style:Solid;width:89px;"> <input id="Text2" name="Text2" type="text" onkeyup="TimeEntryMinutesOnClick(this)" onblur="TimeEntryMinutesOnBlur(this)" style="border: 0px none #FFFFFF; width: 12px" maxlength="2" /> <input type="hidden" id="ctrlPrefix" name="ctrlPrefix" value='ctl00_ContentPlaceHolder1_TimeEntryBox1_'> </div> <div id="ctl00_ContentPlaceHolder1_TimeEntryBox2_Panel1" style="border-color:#7F9DB9;border-width:1px;border-style:Solid;width:89px;"> <input id="Text2" name="Text2" type="text" onkeyup="TimeEntryMinutesOnClick(this)" onblur="TimeEntryMinutesOnBlur(this)" style="border: 0px none #FFFFFF; width: 12px" maxlength="2" /> <input type="hidden" id="ctrlPrefix" name="ctrlPrefix" value='ctl00_ContentPlaceHolder1_TimeEntryBox2_'> </div>