I have 7 RadioButtons on my web form and I am displaying respective Textbox's on click these RadioButtons. I want to append and display selected text of RadioButton and Texbox in this format- TextBox1 RadioButton1 / TextBox2 RadioButton2 / TextBox3 RadioButton3

The problem I am facing is with the probability of the conditions related with this. Suppose there is a situation where user selects more than 2 or 3 RadioButtons and inputs data in respective texbox then while checking and implementing the condition increases the length of my code. Please guide me if there is any other way to implement this so that I can optimize my code and make it short and simple to understand.

Aspx Page

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
        type="text/javascript"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
        rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$('#<%= rdbblendcotton.ClientID %>').click(function () {
                        var rad1 = $('#<%=rdbblendcotton.ClientID%>').next().text();
                        if (rad1 != '') {
                            $('#<%= txtcottonpercentage.ClientID %>').show();
                        }
                    });
                    $('#<%= rdbblendpolyester.ClientID %>').click(function () {
                        var rad1 = $('#<%=rdbblendpolyester.ClientID%>').next().text();
                        if (rad1 != '') {
                            $('#<%= txtpolyesterpercentage.ClientID %>').show();
                        }
                    });
                    $('#<%= rdbblendrayon.ClientID %>').click(function () {
                        var rad1 = $('#<%= rdbblendrayon.ClientID %>').next().text();
                        if (rad1 != '') {
                            $('#<%= txtrayonpercentage.ClientID %>').show();
                        }
                    });
                    $('#<%= rdbblendnylon.ClientID %>').click(function () {
                        var rad1 = $('#<%= rdbblendnylon.ClientID %>').next().text();
                        if (rad1 != '') {
                            $('#<%= txtnylonpercentage.ClientID %>').show();
                        }
                    });
                    $('#<%= rdbblendacrylic.ClientID %>').click(function () {
                        var rad1 = $('#<%= rdbblendacrylic.ClientID %>').next().text();
                        if (rad1 != '') {
                            $('#<%= txtacrylicpercentage.ClientID %>').show();
                        }
                    });
                    $('#<%= rdbblendsilk.ClientID %>').click(function () {
                        var rad1 = $('#<%= rdbblendacrylic.ClientID %>').next().text();
                        if (rad1 != '') {
                            $('#<%= txtsilkpercentage.ClientID %>').show();
                        }
                    });
                    $('#<%= rdbblendwool.ClientID %>').click(function () {
                        var rad1 = $('#<%= rdbblendacrylic.ClientID %>').next().text();
                        if (rad1 != '') {
                            $('#<%= txtwoolpercentage.ClientID %>').show();
                        }
                    });
$('#<%= btnconfirmchoice.ClientID %>').click(function () {
                    var blendcotton = $('#<%=rdbblendcotton.ClientID%>').next().text();
                    var txtblendcotton = $('#<%= txtcottonpercentage.ClientID %>').val();
                    var blendpoly = $('#<%= rdbblendpolyester.ClientID %>').next().text();
                    var txtblendpoly = $('#<%= txtpolyesterpercentage.ClientID %>').val();
                    var blendrayon = $('#<%= rdbblendrayon.ClientID %>').next().text();
                    var txtblendrayon = $('#<%= txtrayonpercentage.ClientID %>').val();
                    var blendnylon = $('#<%= rdbblendnylon.ClientID %>').next().text();
                    var txtblendnylon = $('#<%= txtnylonpercentage.ClientID %>').val();
                    var blendacrylic = $('#<%= rdbblendacrylic.ClientID %>').next().text();
                    var txtblendacrylic = $('#<%= txtacrylicpercentage.ClientID %>').val();
                    var blendsilk = $('#<%= rdbblendsilk.ClientID %>').next().text();
                    var txtblendsilk = $('#<%= txtsilkpercentage.ClientID %>').val();
                    var blendwool = $('#<%= rdbblendwool.ClientID %>').next().text();
                    var txtblendwool = $('#<%= txtwoolpercentage.ClientID %>').val();
                    if (txtblendcotton != "") {
                        $('#<%= para.ClientID %>').text('')
                        .append(txtblendcotton.toString() + " " + blendcotton);
                    }
                    if (txtblendpoly != "") {
                        $('#<%= para.ClientID %>').text('')
                        .append(txtblendpoly.toString() + " " + blendpoly);
                    }
                    if (txtblendrayon != "") {
                        $('#<%= para.ClientID %>').text('')
                        .append(txtblendrayon.toString() + " " + blendrayon);
                    }
                    if (txtblendnylon != "") {
                        $('#<%= para.ClientID %>').text('')
                        .append(txtblendnylon.toString() + " " + blendnylon);
                    }
                    if (txtblendacrylic != "") {
                        $('#<%= para.ClientID %>').text('')
                        .append(txtblendacrylic.toString() + " " + blendacrylic);
                    }
                    if (txtblendsilk != "") {
                        $('#<%= para.ClientID %>').text('')
                        .append(txtblendsilk.toString() + " " + blendsilk);
                    }
                    if (txtblendwool != "") {
                        $('#<%= para.ClientID %>').text('')
                        .append(txtblendwool.toString() + " " + blendwool);
                    }
                    if (txtblendcotton != "" && txtblendpoly!="") {
                        $('#<%= para.ClientID %>').text('')
                        .append(txtblendcotton.toString() + " " + blendcotton + "/"+txtblendpoly.toString()+" "+blendpoly);
                    }
                    if (txtblendcotton != "" && txtblendrayon != "") {
                        $('#<%= para.ClientID %>').text('')
                        .append(txtblendcotton.toString() + " " + blendcotton + "/" + txtblendrayon.toString() + " " + blendrayon);
                    }
                    if (txtblendcotton != "" && txtblendnylon != "") {
                        $('#<%= para.ClientID %>').text('')
                        .append(txtblendcotton.toString() + " " + blendcotton + "/" + txtblendnylon.toString() + " " + blendnylon);
                    }
                    if (txtblendcotton != "" && txtblendacrylic != "") {
                        $('#<%= para.ClientID %>').text('')
                        .append(txtblendcotton.toString() + " " + blendcotton + "/" + txtblendacrylic.toString() + " " + blendacrylic);
                    }
                    if (txtblendcotton != "" && txtblendsilk != "") {
                        $('#<%= para.ClientID %>').text('')
                        .append(txtblendcotton.toString() + " " + blendcotton + "/" + txtblendsilk.toString() + " " + blendsilk);
                    }
                    if (txtblendcotton != "" && txtblendwool != "") {
                        $('#<%= para.ClientID %>').text('')
                        .append(txtblendcotton.toString() + " " + blendcotton + "/" + txtblendwool.toString() + " " + blendwool);
                    }
                    return false;
                });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div id="Panel8" runat="server" style="display: none;">
                    <label style="display: block; margin-bottom: 8px;">
                        Select Fibre:</label>
                    <asp:RadioButton ID="rdbblendcotton" runat="server" Text="Cotton" />&nbsp;<asp:TextBox
                        ID="txtcottonpercentage" runat="server" Style="background: rgba(255,255,255,0.1);
                        border: none; font-size: 16px; height: auto; margin: 0; outline: 0; padding: 15px;
                        width: 15%; background-color: #e8eeef; color: #8a97a0; box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
                        margin-bottom: 30px; display: none;"></asp:TextBox><br />
                    <asp:RadioButton ID="rdbblendpolyester" runat="server" Text="Polyester" />&nbsp;<asp:TextBox
                        ID="txtpolyesterpercentage" runat="server" Style="background: rgba(255,255,255,0.1);
                        border: none; font-size: 16px; height: auto; margin: 0; outline: 0; padding: 15px;
                        width: 15%; background-color: #e8eeef; color: #8a97a0; box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
                        margin-bottom: 30px; display: none;"></asp:TextBox><br />
                    <asp:RadioButton ID="rdbblendrayon" runat="server" Text="Rayon/Viscose" /><asp:TextBox
                        ID="txtrayonpercentage" runat="server" Style="background: rgba(255,255,255,0.1);
                        border: none; font-size: 16px; height: auto; margin: 0; outline: 0; padding: 15px;
                        width: 15%; background-color: #e8eeef; color: #8a97a0; box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
                        margin-bottom: 30px; display: none;"></asp:TextBox><br />
                    <asp:RadioButton ID="rdbblendnylon" runat="server" Text="Nylon" /><asp:TextBox ID="txtnylonpercentage"
                        runat="server" Style="background: rgba(255,255,255,0.1); border: none; font-size: 16px;
                        height: auto; margin: 0; outline: 0; padding: 15px; width: 15%; background-color: #e8eeef;
                        color: #8a97a0; box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset; margin-bottom: 30px;
                        display: none;"></asp:TextBox><br />
                    <asp:RadioButton ID="rdbblendacrylic" runat="server" Text="Acrylic" /><asp:TextBox
                        ID="txtacrylicpercentage" runat="server" Style="background: rgba(255,255,255,0.1);
                        border: none; font-size: 16px; height: auto; margin: 0; outline: 0; padding: 15px;
                        width: 15%; background-color: #e8eeef; color: #8a97a0; box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
                        margin-bottom: 30px; display: none;"></asp:TextBox><br />
                    <asp:RadioButton ID="rdbblendsilk" runat="server" Text="Silk" /><asp:TextBox ID="txtsilkpercentage"
                        runat="server" Style="background: rgba(255,255,255,0.1); border: none; font-size: 16px;
                        height: auto; margin: 0; outline: 0; padding: 15px; width: 15%; background-color: #e8eeef;
                        color: #8a97a0; box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset; margin-bottom: 30px;
                        display: none;"></asp:TextBox><br />
                    <asp:RadioButton ID="rdbblendwool" runat="server" Text="Wool" /><asp:TextBox ID="txtwoolpercentage"
                        runat="server" Style="background: rgba(255,255,255,0.1); border: none; font-size: 16px;
                        height: auto; margin: 0; outline: 0; padding: 15px; width: 15%; background-color: #e8eeef;
                        color: #8a97a0; box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset; margin-bottom: 30px;
                        display: none;"></asp:TextBox><br />
                    <br />
                    <asp:Button ID="btnconfirmchoice" runat="server" Text="Confirm" />
                </div>
                <label style="display: block; margin-bottom: 8px;">
                    Your Choice:</label>
                <p id="para" runat="server">
                </p>
</asp:Content>

Here in the above code On selection of Select Fibre: RadioButton's respective textbox is displayed. And on clicking Confirm Button I want to append text and display within

tag. But if you see my Jquery code, the probability of condition checking's are huge. In my code I have done upto 2 RadioButtons selection, but there can be a situation where more than 2 radiobuttons can also be selected. I want to know a way so that I can optimize these probabilities. Because there can be 'n' number of possibilities. Will it be easier to perform this task using RadioButtonList or CheckBoxList of asp.net? Please guide me.

Related posts

Recent Viewed