Question 86994 in ASP.NET Question posted in
The official documentation can be found here.

how to add an open "other" field in an http radio form – Asp.net

I want to make an open "other" field in an HTTP radio form like in the following picture. is it possible? i had in mind something like this:

class="text"><input type="radio" name="sex" id="sex"  ="male" checked />male
<input type="radio" name="sex" id="sex" value="female" /> female
<input type="text" name="sex" id="sex" value=(Entered-Value)/>enter other:
Tags:

2

Answers


  1. 0

    A simple demo snippet. It add a change event to the radio buttons and checks the value and based on that shows or hides the textbox.

    <div id="radiolist">
    <div>
        <input type="radio" name="sex" id="sex_1" value="M" />
        <label for="sex_1">Male</label>
    </div>
    <div>
        <input type="radio" name="sex" id="sex_2" value="F" />
        <label for="sex_2">Female</label>
    </div>
    <div>
        <input type="radio" name="sex" id="sex_3" value="A" />
        <label for="sex_3">Apache Helicopter</label>
    </div>
    <div>
        <input type="radio" name="sex" id="sex_4" value="O" />
        <label for="sex_4">Other</label>
    </div>
    <div id="sex_other_container" style="display:none">
        <input type="text" name="sex_other" id="sex_other" maxlength="25" />
    </div>
</div>

<script>
    var $othersex = $('#sex_other_container');

    $('#radiolist input[type=radio]').bind('change', function () {
        if ($(this).val() === 'O') {
            $othersex.show();
        } else {
            $othersex.hide();
        }
    });
</script>
    Login or Signup to reply.
  2. 0

    It really depends if you want to say hide/show the text box when they select other.
    But, then again, they might change their mind, or not even enter anything into that text box – so you start to expand the complexity of the UI.

    Sometimes its just better to drop in a radiobuttion list, edit the choices, and then drop in a div next to the rb list, float it, and you are done.

    Say, like this:

            <div style="float:left">
            <asp:RadioButtonList ID="RadioButtonList1" runat="server">
                <asp:ListItem>Male</asp:ListItem>
                <asp:ListItem>Female</asp:ListItem>
                <asp:ListItem >Other</asp:ListItem>
                <asp:ListItem>Prefer not to say</asp:ListItem>
            </asp:RadioButtonList>
        </div>
        <div style="float:left;margin-left:-65px;margin-top:1px">
            <br />
            <br />
            <br />
            <asp:TextBox ID="txtOther" runat="server" Height="18px" Width="70px"></asp:TextBox><br />
        </div>
        <div style="clear:both;height:8px"></div>

    <asp:Button ID="Button1" runat="server" Text="Button" cssclass="btn"/>

    And you get this:

    enter image description here

    And you code behind say can be this for the button

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

    Dim sChoice As String = RadioButtonList1.SelectedItem.Value
    If sChoice = "Other" Then
        ' get the text enter
        sChoice = txtOther.Text
    End If
    Debug.Print("User choice = " & sChoice)

End Sub

    So, keep it simple is often the easy approach here. If 20 things on your page are OH SO having to be customized with JavaScript and all kinds of specials markup, then your project gets in trouble real fast. 10-15 things on a page, each a few minutes of time now becomes say 10-20 minutes of time, and that translates into 100-200 minutes of development time. Then the project and efforts takes way too long to finish.

    And if you can try to stick to standard controls, then as above shows, the resulting code behind becomes (and stays) rather simple.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search