I have created a custom WebUserControl with three HTML controls, two buttons, and one input text. Each control has a static ID, which I believe is not incorrect. The control events are set up using JavaScript. After delivering the control to the client, they requested to have five instances of this user control on the same page, each with different parameters for the event. When any event is triggered, it initializes all the user controls since the JavaScript function relies on the TextBox UserID.
Below is the code snippet:
//Markup code in the user control, where each control has a static ID
<input id="Text_Output" type="text" runat="server" onkeypress="return saveValue(event);" />
<input id="Button_Add" type="button" runat="server" value="ˆ"
style="width:21px; height:14px;vertical-align:bottom;" />
<input id="Button_Subtract" type="button" runat="server" value="ˇ"
style="width:21px; height:14px;vertical-align:top;" />
//JavaScript function Add() in the user control
function Add(incValue, percValue) {
var outputValue = document.getElementById('<%=Text_Output.ClientID%>').value;
var incremeantValue = incValue;
var precsionValue = percValue;
if (outputValue.indexOf(".") > 0) {
var total = (parseFloat(outputValue) + parseFloat(incremeantValue));
document.getElementById('<%=Text_Output.ClientID%>').value = parseFloat(total).toFixed(parseInt(percValue)).toString();
}
else {
if (percValue == 0) {
document.getElementById('<%=Text_Output.ClientID%>').value = parseInt((parseFloat(outputValue) + parseFloat(incremeantValue)).toString());
}
else {
var total = (parseFloat(outputValue) + parseFloat(incremeantValue));
document.getElementById('<%=Text_Output.ClientID%>').value = parseFloat(total).toFixed(parseInt(percValue)).toString();
}
}
}
//Markup code used in webpage
//This button will connect(initialize) the events for the user control
<input id="Button1" type="button" value="button" onclick="IntilizeControl()" /><br />
<My:UserInfoBoxControl ID="JSNumeric_Control" runat="server" />
//JavaScript InilizeControl() function
function IntilizeControl() {
var ButtonAdd = document.getElementById('<%=JSNumeric_Control.FindControl("Button_Add").ClientID %>');
//Add(IncrementValue,PrecesionValue)
ButtonAdd.setAttribute("onclick", "Add(1,1)", '<%=JSNumeric_Control.FindControl("Text_Output").ClientID%>');
var ButtonSubtract = document.getElementById('<%=JSNumeric_Control.FindControl("Button_Subtract").ClientID%>');
//Subtract(IncrementValue,PrecesionValue)
ButtonSubtract.setAttribute("onclick", "Subtract(1,1)");
var TextOutput = document.getElementById('<%=JSNumeric_Control.FindControl("Text_Output").ClientID%>');
alert('<%=JSNumeric_Control.FindControl("Text_Output").ClientID%>');
TextOutput.setAttribute("onkeyup", "check()");
TextOutput.value = 0;
}
If I add another user control, it will be initialized with the same settings even if I modify the ID for that specific user control. I aim for each user control to have its unique client ID so they can operate independently from each other?