Using OnClientClick to validate if Textbox contains data and then display another row if yes

Question

i have a form in which i enter telephone numbers. i have used an image button that when pressed, it should display a new row to enter a telephone number if there was one entered in the textbox before it. however, it is not working in the way that i want it. instead it is giving the error "TelNum2 is not defined"

ASPX

    <tr><td class="labels">Tel. No. (XXX-XXXX) </td>
    <td class="tb">
    <asp:TextBox ID="PN1" runat="server" width="120px"></asp:TextBox>
    <asp:ImageButton ID="ImageButtonAdd1" runat="server" ImageUrl="~/Styles/Images/add.jpg" 
     Height="16px" Width="23px"  AlternateText="Add another Phone Number" 
     CausesValidation="False"  Onclick="TelNum2_Click" />
    <asp:RegularExpressionValidator ID="RegularExpressionValidatorPN" runat="server" 
     ErrorMessage="Please enter a VALID Phone Number in the format XXX-XXXX" ControlToValidate="PN1" Display="Dynamic" Font-Italic="True" ForeColor="#FF3300" Font-Bold="True" ValidationExpression="\d{3}-\d{4}"></asp:RegularExpressionValidator></tr>




  <tr id="phoneNum2" runat="server"><td class="labels"> Tel. No 2. (XXX-XXXX)</td>
  <td class="tb"><asp:TextBox ID="PN2" runat="server" Width="120px"></asp:TextBox>
  <asp:ImageButton ID="ImageButtonAdd2" runat="server" ImageUrl="~/Styles/Images/add.jpg" 
   Height="16px" Width="23px" AlternateText="Add another Phone Number" CausesValidation="False" 
   Onclick="TelNum3" />
  <asp:RegularExpressionValidator ID="RegularExpressionValidatorPN2" runat="server"
   ErrorMessage="Please enter a VALID Phone Number in the format XXX-XXXX" 
   ControlToValidate="PN2" Display="Dynamic" Font-Italic="True" ForeColor="#FF3300" Font-
   Bold="True" ValidationExpression="\d{3}-\d{4}"></asp:RegularExpressionValidator></td></tr>

   <tr id="phoneNum3" runat="server"><td class="labels"> Tel. No 3. (XXX-XXXX)</td>
   <td class="tb"><asp:TextBox ID="PN3" runat="server" Width="120px"></asp:TextBox>
   <asp:RegularExpressionValidator ID="RegularExpressionValidatorPN3" runat="server" 
    ErrorMessage="Please enter a VALID Phone Number in the format XXX-XXXX" 
    ControlToValidate="PN3" Display="Dynamic" Font-Italic="True" ForeColor="#FF3300" Font-
    Bold="True" ValidationExpression="\d{3}-\d{4}"></asp:RegularExpressionValidator></td></tr>

CS

     protected void Page_Load(object sender, EventArgs e)
    {
        UpdatePanel1.Visible = true;
        BtnNew.Visible = true;
        BtnDelete.Visible = false;    
        BtnUpdate.Visible = false;
        BtnSave.Visible = false; 
        BtnCancel.Visible = false;
        pubvar.DisableAllControls(Page);

        if (!Page.IsPostBack)
        {
            processAgentData.Visible = false; //area in which textboxes are displayed
            phoneNum2.Visible = false;
            phoneNum3.Visible = false;
        }
        else
        {
            processAgentData.Visible = true;
        }


    }


   protected void TelNum2_Click(object sender, ImageClickEventArgs e)
    {
        try
        {
            if (PN1.Text.Trim().Length > 0)
            {
                phoneNum2.Visible = true;
            }
            else
            {
                phoneNum2.Visible = false;
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine("{0} Exception caught.", ex);
        }
    }
    protected void TelNum3(object sender, EventArgs e)
    {
        try
        {
            if (PN2.Text.Trim().Length > 0)
            {
                phoneNum3.Visible = true;
            }
            else
            {
                phoneNum3.Visible = false;
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine("{0} Exception caught.", ex);
        }
    }      

Answer 1

New2This,

Please try the following code as it should assist you:

--Should be OnClick instead of OnClientClick.

<asp:TextBox ID="PhoneNumber" runat="server" width="120px"></asp:TextBox>
 <asp:ImageButton ID="ImageButtonAdd1" runat="server" ImageUrl="~/Images/bullet.png"  
  Height="16px" Width="23px" AlternateText="Add another Phone Number"  
  CausesValidation="False" OnClick="TelNum2_Click" />
<asp:TextBox ID="PhoneNumber2" runat="server" width="120px" Visible="false"></asp:TextBox>

--For code-behind, make sure first phone number text box has a value and if so, show the second.

    protected void TelNum2_Click(object sender, ImageClickEventArgs e)
    {
        if (PhoneNumber.Text.Trim().Length > 0)
        {
            PhoneNumber2.Visible = true;
        }
        else
        {
            PhoneNumber2.Visible = false;
        }
    }