Single Choice Table Cell, and get the exact value in it's cell

Question

User1228272764 posted

Here is a table template design. Mine is much uglier. I don't have any idea how to make list item of radiobuttonlist inside the table, so I made by each cell have its own radio button. it's hard to make single choice radibuttonlist only.

Here is the goal, I want to make 14 cells table with automatically arrange . each cell contains label/checkbox/radio button so it will have value when someone click / chose.

every cell manually created, which means it's not dynamically generated by the server. I am the one who defined the cell of the table. here is mine : 

 <table align="center">
            <tr>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RB1" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB2" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB3" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB4" runat="server" /></div></td>
            </tr>
            <tr>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RB5" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB6" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB7" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB8" runat="server" /></div></td>
            </tr>
            <tr>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RB9" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB10" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB11" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB12" runat="server" /></div></td>
            </tr>
            <tr>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RadioButton9" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RadioButton10" runat="server" /></div></td>
            </tr>
        </table>

<asp:Button ID="BtngetData" runat="server" Text="GetDataCell" />

how do I achieve this goal?

Rule: when someone clicks the radiobuttonlist, so the value retrieved by the btnGetData. and all the radiobuttonlist must not choose multiple in this table of mine. 

Answer 1

User288213138 posted

Hi tandasanyu,

You can set RadioButton to Single Choice using jquery. And get the value inside the RadioButton through the button's click event.

The code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $("#tab input[type=radio]").click(function () {
            if ($(this).is(":checked")) {
                $("#tab input[type=radio]").removeAttr("checked");
                $(this).attr("checked", "checked");
            }
        });
    });
</script>
<div>
            <table id="tab">
            <tr>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RB1" Text="R1" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB2" Text="R2" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB3" Text="R3" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB4" Text="R4" runat="server" /></div></td>
            </tr>
            <tr>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RB5" Text="R5" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB6" Text="R6" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB7" Text="R7" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB8" Text="R8" runat="server" /></div></td>
            </tr>
            <tr>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RB9" Text="R9" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB10" Text="R10" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB11" Text="R11" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB12" Text="R12" runat="server" /></div></td>
            </tr>
            <tr>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RadioButton9" Text="R13" runat="server" /></div></td>
                <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RadioButton10" Text="R14" runat="server" /></div></td>
            </tr>
        </table>

        <asp:Button ID="BtngetData" runat="server" Text="GetDataCell" OnClick="BtngetData_Click" /><br />
            <asp:Label ID="Label1" runat="server" ></asp:Label>
        </div>

Aspx.cs:
protected void BtngetData_Click(object sender, EventArgs e)
        {
            if (RB1.Checked)
            {
                Label1.Text = "You selected " + RB1.Text;
            }
            else if (RB2.Checked)
            {
                Label1.Text = "You selected " + RB2.Text;
            }
            else if (RB3.Checked)
            {
                Label1.Text = "You selected " + RB3.Text;
            }
            if (RB4.Checked)
            {
                Label1.Text = "You selected " + RB4.Text;
            }
            else if (RB5.Checked)
            {
                Label1.Text = "You selected " + RB5.Text;
            }
            else if (RB6.Checked)
            {
                Label1.Text = "You selected " + RB6.Text;
            }
            if (RB7.Checked)
            {
                Label1.Text = "You selected " + RB7.Text;
            }
            else if (RB8.Checked)
            {
                Label1.Text = "You selected " + RB8.Text;
            }
            else if (RB9.Checked)
            {
                Label1.Text = "You selected " + RB9.Text;
            }
            if (RB10.Checked)
            {
                Label1.Text = "You selected " + RB10.Text;
            }
            else if (RB11.Checked)
            {
                Label1.Text = "You selected " + RB11.Text;
            }
            else if (RB12.Checked)
            {
                Label1.Text = "You selected " + RB12.Text;
            }
            else if (RadioButton9.Checked)
            {
                Label1.Text = "You selected " + RadioButton9.Text;
            }
            else if (RadioButton10.Checked)
            {
                Label1.Text = "You selected " + RadioButton10.Text;
            }
        }

The result:

Best regards,

Sam

Answer 2

User1228272764 posted

thank you sam, its help me out. really.

but I tried to modify the behaviour when button clicks than the javascript store the value on asp textbox & call click method for asp button. but it's not working. here is the sample code : 

(function() {
    $('<%= qq1.ClientID %>').on('click', function(){
            
             document.getElementById('<%= TxtValueByClick.ClientID %>').value = "David";
             document.getElementById('<%= Button1.ClientID %>').click();
    });   
        $('<%= qq2.ClientID %>').on('click', function(){
           
            document.getElementById('<%= TxtValueByClick.ClientID %>').value = "Bowie";
            document.getElementById('<%= Button1.ClientID %>').click();
    }); 
});

QQ1 & QQ2 is my div id. its client side. only the button1 was asp button and TxtValueByClick was the asp textbox. can you help me out?

Answer 3

User288213138 posted

Hi tandasanyu,

I don't quite understand what you mean.

tandasanyu

$('<%= qq1.ClientID %>').on('click', function(){

Is this line of code intended to trigger the div click event?

If so, the id in the jquery selector should be preceded by a #.

$('#<%= qq1.ClientID %>').on('click', function () {

tandasanyu

 document.getElementById('<%= Button1.ClientID %>').click();

I don't understand what you mean by this line of code.

What's the point of adding a click event to div and then a click event to button？

You can refer to this link for some jQuery basics：https://www.w3schools.com/js/js_jquery_selectors.asp

Best regards,

Sam