locked
display textboxes on click of radio buttons using java script RRS feed

  • Question

  • User1897897189 posted

    Dears,

    I have an html table on which I have 4 radio buttons and 2 text boxes on different rows of html table. (design shown below).

    On click of radio button1 or radio button 2 i want to display text box 1 and also on click of radio button3 or radio button 4 i want to display text box 2.

    I don't want to hide the text box1 when text box2 is shown and vice versa.

    How can i achieve this?

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
    
            function ShowQ1() {
    
                if (document.getElementById("rb1").checked == true || document.getElementById("rb2").checked == true) {
                    document.getElementById("txtq1").style.display = "block"; //show
                }
            }
    
    
    
    
    
            function ShowQ2() {
                if (document.getElementById("rb3").checked == true || document.getElementById("rb4").checked == true) {
                    document.getElementById("txtq2").style.display = "block"; //show               
    
                }
    
    
    
    
            }
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
            </div>
            <table style="width: 100%;">
                <tr class="tr">
    
                    <td class="auto-style3">&nbsp;</td>
    
                    <td class="auto-style4">
    
                        <asp:Label ID="q1" runat="server" />
    
                    </td>
    
                    <td class="auto-style3">&nbsp;</td>
    
                    <td class="auto-style3">&nbsp;</td>
    
                    <td class="auto-style3">&nbsp;</td>
    
                    <td class="auto-style3">
    
                        <asp:RadioButton ID="rb1" GroupName='g1'
                            runat="server" onclick="Showq1()" />
    
                    </td>
    
                    <td class="auto-style3">
    
                        <asp:RadioButton ID="rb2" GroupName='g1' runat="server"
                            onclick="Showq1()" />
    
                    </td>
    
                    <td class="auto-style3">&nbsp;</td>
    
                </tr>
                <tr class="tr">
    
                    <td colspan="2">&nbsp;</td>
    
                    <td class="text-center" colspan="6">
    
    
    
                        <asp:TextBox ID="txtq1" ClientIDMode="Static" Style="display: block;"
                            runat="server" Rows="5"
                            CssClass="control" TextMode="MultiLine" MaxLength="500"></asp:TextBox>
    
    
    
    
    
    
    
    
    
                    </td>
    
                </tr>
    
                <tr class="tr">
    
                    <td class="auto-style3">&nbsp;</td>
    
                    <td class="auto-style4">
    
                        <asp:Label ID="q2" runat="server" />
    
                    </td>
    
                    <td class="auto-style3">&nbsp;</td>
    
                    <td class="auto-style3">&nbsp;</td>
    
                    <td class="auto-style3">&nbsp;</td>
    
                    <td class="auto-style3">
    
                        <asp:RadioButton ID="rb3" GroupName='g2'
                            runat="server" onclick="Showq2()" />
    
                    </td>
    
                    <td class="auto-style3">
    
                        <asp:RadioButton ID="rb4" GroupName='g2' runat="server"
                            onclick="Showq2()" />
    
                    </td>
    
                    <td class="auto-style3">&nbsp;</td>
    
                </tr>
                <tr class="tr">
    
                    <td colspan="2">&nbsp;</td>
    
                    <td class="text-center" colspan="6">
    
    
    
                        <asp:TextBox ID="txtq2" ClientIDMode="Static" Style="display: block;"
                            runat="server" Rows="5"
                            CssClass="control" TextMode="MultiLine" MaxLength="500"></asp:TextBox>
    
    
    
    
    
    
    
    
    
                    </td>
    
                </tr>
    
            </table>
        </form>
    </body>
    </html>
    

    Thanks

    Nick

    Saturday, January 9, 2021 11:10 AM

All replies

  • User-1545767719 posted

    > On click of radio button1 or radio button 2 i want to display text box 1 and also on click of radio button3 or radio button 4 i want to display text box 2.

    What do you mean by "display"? 

    > I don't want to hide the text box1 when text box2 is shown and vice versa.

    What do you mean by "hide"?

    It seems to me that there is a conflict in your description above.

    Sunday, January 10, 2021 12:44 AM
  • User1897897189 posted

    I want to show the textbox1 on click of radio button 1 or 2

    and on click of radio button 3 or 4 i want to show text box2

    what actually happens now is on  click of radiobutton1 or 2 textbox1 is displayed and on click of radiobutton 3 or 4 textbox2 is displayed but textbox1 disappears

    Sunday, January 10, 2021 1:47 AM
  • User-1545767719 posted

    You did not answer to my question -- What do you mean by "display"? Although you changed the word "display" to "show" it is not enough for me  to understand what you want to do.

    Do you want add disabled="disabled" to the text box when not shown?

    > what actually happens now is on click of radiobutton1 or 2 textbox1 is displayed and on click of radiobutton 3 or 4 textbox2 is displayed but textbox1 disappears

    I could not see it happens when I have tested your code show in your question (i.e., nothing happens). I ask you to review your code and make necessary correction.

    Sunday, January 10, 2021 3:27 AM
  • User1897897189 posted

    What i want is just show textbox1 on click of radiobutton 1/2 don't hide it when i click on radio button3/4.

    infact i tried using $(this).closest(“control”).show(),still it ie not working


    if you include jquery.min.js my code will work

    hope it is clear

    Sunday, January 10, 2021 3:39 AM
  • User-1545767719 posted

    Again you don't answer to my question at all.

    You say "show." OK, then tell me what do you want to do when you do not want to "show." You say it is not "hide." If so, what??????

    > if you include jquery.min.js my code will work

    No, it is not true. In your code in the question there is nothing related to jQuery.

    Sunday, January 10, 2021 4:02 AM
  • User-939850651 posted

    Hi nicklibee,

    I'm not sure if you noticed that the function name called by onclick does not correspond to the defined function name in the code you provided. Of course, you could easily fix it.

    ShowQ1 ----> Showq1

    If you want to control whether the TextBox is displayed or not through the display property in the css style, I think this is feasible, but it should be: 

    display:none --> display:block

    But in the code you provided, these two TextBoxes ( Style="display: none;" ) are always displayed on the page , and you mentioned that you tried to use jquery to achieve your requirements, but I did not find any code about jquery, so I am not sure if you post the wrong code.

    I modified the relevant code and tested it, and it worked for me.

    <head runat="server">
        <title></title>
        <script type="text/javascript">
    
            function Showq1() {
                if (document.getElementById("rb1").checked == true || document.getElementById("rb2").checked == true) {
                    document.getElementById("txtq1").style.display = "block"; //show
                }
            }
    
            function Showq2() {
                if (document.getElementById("rb3").checked == true || document.getElementById("rb4").checked == true) {
                    document.getElementById("txtq2").style.display = "block"; //show               
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
            </div>
            <table style="width: 100%;">
                <tr class="tr">
                    <td class="auto-style3">&nbsp;</td>
                    <td class="auto-style4">
                        <asp:Label ID="q1" runat="server" />
                    </td>
                    <td class="auto-style3">&nbsp;</td>
                    <td class="auto-style3">&nbsp;</td>
                    <td class="auto-style3">&nbsp;</td>
                    <td class="auto-style3">
                    radioButton1:    <asp:RadioButton ID="rb1" GroupName='g1'
                            runat="server" onclick="Showq1()" />
                    </td>
                    <td class="auto-style3">
                    radioButton2:   <asp:RadioButton ID="rb2" GroupName='g1' runat="server"
                            onclick="Showq1()" />
                    </td>
                    <td class="auto-style3">&nbsp;</td>
                </tr>
                <tr class="tr">
                    <td colspan="2">&nbsp;</td>
                    <td class="text-center" colspan="6">
                        <asp:TextBox ID="txtq1" ClientIDMode="Static" Style="display: none;"
                            runat="server" Rows="5"
                            CssClass="control" TextMode="MultiLine" MaxLength="500"></asp:TextBox>
                    </td>
                </tr>
                <tr class="tr">
                    <td class="auto-style3">&nbsp;</td>
                    <td class="auto-style4">
                        <asp:Label ID="q2" runat="server" />
                    </td>
                    <td class="auto-style3">&nbsp;</td>
                    <td class="auto-style3">&nbsp;</td>
                    <td class="auto-style3">&nbsp;</td>
                    <td class="auto-style3">
                    radioButton3:    <asp:RadioButton ID="rb3" GroupName='g2'
                            runat="server" onclick="Showq2()" />
                    </td>
                    <td class="auto-style3">
                    radioButton4:    <asp:RadioButton ID="rb4" GroupName='g2' runat="server"
                            onclick="Showq2()" />
                    </td>
                    <td class="auto-style3">&nbsp;</td>
                </tr>
                <tr class="tr">
                    <td colspan="2">&nbsp;</td>
                    <td class="text-center" colspan="6">
                        <asp:TextBox ID="txtq2" ClientIDMode="Static" Style="display: none;"
                            runat="server" Rows="5"
                            CssClass="control" TextMode="MultiLine" MaxLength="500"></asp:TextBox>
                    </td>
                </tr>
            </table>
        </form>
    </body>

    Result:

    As you can see in the result, TextBox1 is not hidden because of TextBox2.

    If I misunderstood something, could you provide the current page and script code, because this will help us find the cause of the issue and solve it.

    Best regards,

    Xudong Peng

    Monday, January 11, 2021 2:38 AM
  • User-1545767719 posted

    If “show” and “no show” you mentioned mean “focused” and “unfocused”, see the sample code shown below. If “show” and “no show” mean addition and deletion of a disabled attribute to the text box use the codes commented-out instead.

    <%@ Page Language="C#" AutoEventWireup="true" 
        CodeBehind="WebForm15.aspx.cs" 
        Inherits="WebApplication1.WebForm15" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script type="text/javascript">
            function Showq1() {
                if (document.getElementById("rb1").checked == true || document.getElementById("rb2").checked == true) {
    
                    //document.getElementById("txtq1").removeAttribute("disabled");
                    //document.getElementById("txtq2").setAttribute("disabled", true);
    
                    document.getElementById("txtq1").focus();
                }
            }
    
            function Showq2() {
                if (document.getElementById("rb3").checked == true || document.getElementById("rb4").checked == true) {
    
                    //document.getElementById("txtq2").removeAttribute("disabled");
                    //document.getElementById("txtq1").setAttribute("disabled", true);
    
                    document.getElementById("txtq2").focus();
                }
            }
            window.onload = function () {
                document.getElementById("rb1").addEventListener("click", Showq1, false);
                document.getElementById("rb2").addEventListener("click", Showq1, false);
                document.getElementById("rb3").addEventListener("click", Showq2, false);
                document.getElementById("rb4").addEventListener("click", Showq2, false);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:RadioButton ID="rb1" runat="server" GroupName='g1' ClientIDMode="Static"/>
            <asp:RadioButton ID="rb2" runat="server" GroupName='g1' ClientIDMode="Static"/>
            <asp:RadioButton ID="rb3" runat="server" GroupName='g1' ClientIDMode="Static"/>
            <asp:RadioButton ID="rb4" runat="server" GroupName='g1' ClientIDMode="Static"/>
            <br />
            <asp:TextBox ID="txtq1" ClientIDMode="Static" Style="display: block;"
                runat="server" Rows="5"
                CssClass="control" TextMode="MultiLine" MaxLength="500"></asp:TextBox>
            <br />
            <asp:TextBox ID="txtq2" ClientIDMode="Static" Style="display: block;"
                runat="server" Rows="5"
                CssClass="control" TextMode="MultiLine" MaxLength="500"></asp:TextBox>
        </form>
    </body>
    </html>

    Thursday, January 14, 2021 1:50 AM