ASP javascript radiobutton enable disable not included in postback ajax

Asked 9/8, 2011 at 11:51 Answered 22/8, 2011 at 10:27

Here is the problem. I have a radiobutton group (two radiobuttons).

These guys are initialy disabled. When the user clicks a checkbox, I dynamically enable radiobuttons in javascript by setting rbtn.disabled = false; and doing the same for it's parent (span element) so it correctly works in IE. The problem is that these dynamically enabled radiobuttons are not returned on postback (I see rbtn.Checked == false on serverside and request.form does not contain proper value).

Why is this happening? Is there another fix except for a workaround with hidden fields?

Expected answer decribes post-back policy, why/how decides which fields are included in postback and fix to this problem.

Baryram answered 9/8, 2011 at 11:51 Comment(1)

Hi 0xDEAD BEEF, just to make sure - are you using ASP.net? Or classic asp? As I'm not completely certain from your tags. – Eloign 15/8, 2011 at 14:20

Before doing the submit, remove the disabled attribute from the radio buttons like this:

document.getElementById("rbtnID").removeAttribute("disabled");

Note that removeAttribute can be buggy in IE, and IE also implements a second attribute for case sensitivity, see MSDN article.

There is also removeAttributeNode which removes the entire attribute node, but it takes the node itself as the parameter instead of the name.

var disabledNode = element.getAttributeNode('disabled');
element.removeAttributeNode(disabledNode);

So give these a shot and let me know how they play out!

Williawilliam answered 19/8, 2011 at 15:4 Comment(0)

I know the following code is not neat, but it gets the job done (if I understand the problem correctly). I copy/paste here the whole file contents to make it easier for you to play with it. Just create a web form named WebForm1 and paste these;

in .aspx file:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript">
    function enable(sender) {
        if (sender.checked) {
            document.getElementById('<%= RadioButton1.ClientID %>').removeAttribute('disabled');
            document.getElementById('<%= RadioButton2.ClientID %>').removeAttribute('disabled');
        }
        else {
            document.getElementById('<%= RadioButton1.ClientID %>').disabled = true;
            document.getElementById('<%= RadioButton2.ClientID %>').disabled = true;
        }
    }
    </script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:CheckBox ID="CheckBox1" runat="server" onclick="enable(this)" />

    <asp:RadioButton ID="RadioButton1" runat="server" Text="1" 
         Enabled="false" />
    <asp:RadioButton ID="RadioButton2" runat="server" Text="2" 
         Enabled="false" />

    <asp:Button ID="Button1" runat="server" Text="Button" 
        onclick="Button1_Click1" />

    <asp:Label ID="Label1" runat="server" Text="" />
    </form>
</body>
</html>

in .aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        static readonly string GROUP_NAME = "RadioButtonGroup";
        protected void Page_Load(object sender, EventArgs e)
        {
            RadioButton1.GroupName = GROUP_NAME;
            RadioButton2.GroupName = GROUP_NAME;
            if (IsPostBack)
            {
                if (CheckBox1.Checked)
                {
                    RadioButton1.Enabled = true;
                    RadioButton2.Enabled = true;
                    if (Request.Params[GROUP_NAME] == RadioButton1.ID)
                    {
                        RadioButton1.Checked = true;
                    }
                    else if (Request.Params[GROUP_NAME] == RadioButton2.ID)
                    {
                        RadioButton2.Checked = true;
                    }
                }

            }
        }

        protected void Button1_Click1(object sender, EventArgs e)
        {
            if (Request.Params[GROUP_NAME] == RadioButton1.ID)
            {
                Label1.Text = "1 is selected";
                if (Request.Params[GROUP_NAME] == RadioButton2.ID)
                {
                    Label1.Text += "and 2 is selected";
                }
            }
            if (Request.Params[GROUP_NAME] == RadioButton2.ID)
            {
                Label1.Text = "2 is selected";
            }
        }
    }
}

Cryptanalysis answered 22/8, 2011 at 10:27 Comment(0)

I haven't had a chance to test this myself, but I'm guessing (if your using ASP.net), that your disabling the radio buttons via the ASP.net server-side code i.e via a server side control.

And then renabling them using javascript?

I think perhaps that the server-side still believes they are disabled - I'm not 100% why without digging futther (something in the page lifecycle somewhere).

Perahaps a quick solution would be instead of disabling the radio buttons via server-side, instead disable them in javascript when the page loads? i.e. doing the disabling and enabling in javscript.

Eloign answered 15/8, 2011 at 14:24 Comment(0)

Before submitting the page set the disabled property of the radios buttons to false. In the code behind read the radio button value using Request.Form["radioButtonName"]. This will give you the value of the radio button which is checked.

Example:

Let say the radio button list name is radioButton1 with 2 radio buttons. When it renders on the page the radio buttons will have the same name say ctl0$radioButton1. Anyways it depends on the nesting of your page. You can get this name using radioButton.UniqueID.

When the page is submitting through any action on the page execute the below javascript which will set the disabled property of the radio button to false.

document.getElementById("radioButton1ItemCliendId").disabled = false;

//If you want to check this radio button then
document.getElementById("radioButton1ItemCliendId").checked = true;

On the server side postback event handler you have to use Request.Form[radioButton1.UniqueID] to get this radio buttons value. It will give the radio buttons value which is checked.

Rain answered 22/8, 2011 at 5:11 Comment(5)

This looks very similar to previous answer! – Williawilliam 22/8, 2011 at 15:50

Similar in what sense? Have you mentioned you have to use Request.From[radioButton.UniqueID] to get the disabled radio buttons value after post back? – Rain 22/8, 2011 at 17:19

The solution is basically the same (to remove the disabled attribute). Reading the values serverside - the OP is already doing that (he mentions that in his post). – Williawilliam 22/8, 2011 at 17:31

Just setting the disabled property to false is enough, removing the attribute is not required. Tested and tried in all browsers including IE. – Rain 22/8, 2011 at 17:41

Also OP did not metion what is he passing in request.form to get the value that is very important. You have to use UniqueID of the radio button server control to get its value after postback. – Rain 22/8, 2011 at 17:43

Recommended topics

Hot tags