Javascript with multiple user controls
-
The following code is used for a user control. What it does is if the user presses the arrow up key when the focus is on the input box it will increment the value by one. When I put one of these user controls on a web form it works good. But if I put a second user control on the same web page and when pressing the arrow up key when the focus is on it it increments the value on the first user control. From the code I can see why this happens but how can I have it increment the value on the input box that has the focus? <%@ Control Language="C#"%> function TimeEntryHoursOnClick() { if (event.keyCode == 38) document.getElementById("Text1").value = parseFloat(document.getElementById("Text1").value) + 1 }
-
The following code is used for a user control. What it does is if the user presses the arrow up key when the focus is on the input box it will increment the value by one. When I put one of these user controls on a web form it works good. But if I put a second user control on the same web page and when pressing the arrow up key when the focus is on it it increments the value on the first user control. From the code I can see why this happens but how can I have it increment the value on the input box that has the focus? <%@ Control Language="C#"%> function TimeEntryHoursOnClick() { if (event.keyCode == 38) document.getElementById("Text1").value = parseFloat(document.getElementById("Text1").value) + 1 }
You're have to prefix the function name and the control name with the unique id of the user control, e.g.
<%@ Control Language="C#"%>
function <%=this.ClientId%>_TimeEntryHoursOnClick()
{
if (event.keyCode == 38)
document.getElementById("<%=this.ClientId%>_Text1").value = parseFloat(document.getElementById("<%=this.ClientId%>_Text1").value) + 1
}There are better ways of doing this tho such as moving the javascript function outside of the user control and passing the object being changed to the function, i.e.
function TimeEntryHoursOnClick(theTextbox)
{
if (event.keyCode == 38)
theTextbox.value = parseFloat(theTextbox.value) + 1
}<%@ Control Language="C#"%>
I haven't tested the code above but it should work.
-
You're have to prefix the function name and the control name with the unique id of the user control, e.g.
<%@ Control Language="C#"%>
function <%=this.ClientId%>_TimeEntryHoursOnClick()
{
if (event.keyCode == 38)
document.getElementById("<%=this.ClientId%>_Text1").value = parseFloat(document.getElementById("<%=this.ClientId%>_Text1").value) + 1
}There are better ways of doing this tho such as moving the javascript function outside of the user control and passing the object being changed to the function, i.e.
function TimeEntryHoursOnClick(theTextbox)
{
if (event.keyCode == 38)
theTextbox.value = parseFloat(theTextbox.value) + 1
}<%@ Control Language="C#"%>
I haven't tested the code above but it should work.
Thanks. That worked but I have one other related problem. The user control actually has two input boxes. When TimeEntryHoursOnClick() gets called for Text1 the function also has to reference Text2 as show below. How would I pass that information into the function. function TimeEntryHoursOnClick(theTextbox) { if (event.keyCode == 38) theTextbox.value = parseFloat(theTextbox.value) + 1 if (event.keyCode == 39) document.getElementById("Text2").focus(); }