After successfully receiving a quick answer to my previous question, I have encountered a new issue. Specifically, I am facing a problem with an asp label that dynamically sets text on instantiation and triggers an onmousedown function tied to a JavaScript function. This function enables a table area below the label which is set to display:none by default. Everything works perfectly until I place two of these user controls on a single page. Despite having the correct label text for both controls, the JavaScript enable function ends up setting the display attribute of the first user control's table to block instead of the intended one clicked. The root cause seems to be related to all user controls sharing the same id name due to being instances of the same user control. I'm struggling to find a workaround, whether it's assigning dynamic names to tables on instantiation or exploring other solutions.
Below is the ASP code for the user control:
function enableDivArea(objName) {
document.getElementById(objName).style.display = "block";
}
function disableDivArea(objName) {
document.getElementById(objName).style.display = "none";
document.forms[0].submit();
}<asp:Label style="cursor:pointer;color:#EA9156;font-family:Arial,Helvetica,sans-serif;font-weight:bold;" ID="m_emailAddressLabel" onmousedown="enableDivArea('EmailFormDivArea');" runat="server" Text="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa8995979f95949fba9f979b93969b9e9e889f8989d4999597">[email protected]</a>"></asp:Label>
<table id="EmailFormDivArea" style="display:none; border-style: outset; border-width: thin">
<tr>
<td>To: <asp:Label ID="m_sendEmailToLabel" runat="server" Text=""></asp:Label></td>
<td align="right"><asp:Label onmousedown="disableDivArea('EmailFormDivArea');" id="m_closeLabel" runat="server" Text="close"></asp:Label></td>
</tr>
<tr>
<td><asp:Label ID="m_fromLabel" runat="server" Text="First Name:" Visible="True"></asp:Label></td>
<td><asp:TextBox ID="m_firstNameBox" runat="server" Visible="True"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="Label1" runat="server" Text="Last Name:" Visible="True"></asp:Label></td>
<td><asp:TextBox ID="m_lastNameBox" runat="server" Visible="True"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="Label2" runat="server" Text="E-mail:" Visible="True"></asp:Label></td>
<td><asp:TextBox ID="m_emailBox" runat="server" Visible="True"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="Label3" runat="server" Text="Phone number:" Visible="True"></asp:Label></td>
<td><asp:TextBox ID="m_phoneNumberBox" runat="server" Visible="True"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="Label4" runat="server" Text="Message:" Visible="True"></asp:Label></td>
<td><asp:TextBox ID="m_messageBox" runat="server" Visible="True" Rows="6" TextMode="MultiLine"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" align="center"><asp:Button ID="m_sendMessageButton" runat="server" Text="Send Message"
onclick="m_sendMessageButton_Click" /></td>
</tr>
<tr>
<td colspan="2" align="center"><asp:Label runat="server" ID="m_statusLabel" Text="" Visible="true"></asp:Label></td>
</tr>
</table>
The corresponding code behind appears as follows:
protected void Page_Load(object sender, EventArgs e)
{
m_emailAddressLabel.Text = this.Parameter;
m_sendEmailToLabel.Text = this.Parameter;
}