want to show/hide text in asp:textbox depending on if asp:checkbox is checked

[JLC]

Hi,

I am creating a page in asp.net that has a checkbox and a textbox. When the checkbox is checked I want the textbox to become active and show text. If the checkbox is unchecked, I would like the text box to become disabled and show no text.

Is this possible to do via javascript? I would like to handle it all client side.

Thanks,
JLC

[acoder]

Yes, this is possible with Javascript. What code do you have so far?

See the checkbox object and input text object. You will need to handle the onclick on the checkbox and set the disabled property of the input text box.

[JLC]

Hi,

Thanks for the links.
This is the code I have so far, but so far it's not working.
What I want to do is if the check box is checked I want to show some boilerplate text that will be set by the choice in the dropdownlist box. But I was trying to just get the checkbox to show or not show text at all before moving on to what I described above.

Here's the code in my .cs file.

    protected void Page_Load(object sender, EventArgs e)
    {
       EmailCheckBox.Attributes.Add("OnClick", "javascript: EmailChecked(" + EmailCheckBox.Checked + ")");
    }
 

and here's the code in my aspx page

  function EmailChecked(checkbox, textboxid)
    {
        var textbox = document.getElementById('EmailTextBox');
        if(checkbox.checked)
        {
            textbox.style.display = '';
        }
        else
        {
            textbox.style.display = 'none';
        }
 
    }
 
 
 

Thanks!
JLC

Yes, this is possible with Javascript. What code do you have so far?

See the checkbox object and input text object. You will need to handle the onclick on the checkbox and set the disabled property of the input text box.

[JLC]

Ok I am scrapping that last post...

This is now my code...I just want to enable/disable the text box based on if the check box is checked.
here's the code:

.cs file

    protected void Page_Load(object sender, EventArgs e)
    {
       EmailCheckBox.Attributes.Add("OnClick", "javascript: EmailChecked(" + EmailCheckBox.Checked + ")");
    }
 

and the .aspx file

    function EmailChecked(checkbox)
    {     
        if(checkbox.defaultChecked = true)
        {
            document.getElementById('EmailTextBox').disabled=false;
        }
        else
        {
            document.getElementById('EmailTextBox').disabled=true;
        }
 
    }
 

But when I run the page, and click the check box, I get an error that says:

"False is undefined" for the line in my html that is for the checkbox.

what am I doing wrong??

Thanks,
j.

Hi,

Thanks for the links.
This is the code I have so far, but so far it's not working.
What I want to do is if the check box is checked I want to show some boilerplate text that will be set by the choice in the dropdownlist box. But I was trying to just get the checkbox to show or not show text at all before moving on to what I described above.

Here's the code in my .cs file.

    protected void Page_Load(object sender, EventArgs e)
    {
       EmailCheckBox.Attributes.Add("OnClick", "javascript: EmailChecked(" + EmailCheckBox.Checked + ")");
    }
 

and here's the code in my aspx page

  function EmailChecked(checkbox, textboxid)
    {
        var textbox = document.getElementById('EmailTextBox');
        if(checkbox.checked)
        {
            textbox.style.display = '';
        }
        else
        {
            textbox.style.display = 'none';
        }
 
    }
 
 
 

Thanks!
JLC

[acoder]

You're passing EmailCheckbox.Checked which is either true or false. In the function, you just need to check whether it's equal to true or false. Don't forget to use double equals (==).

[JLC]

Ok so I changed it to this:

    function EmailChecked(checkboxid)
    {     
        if(checkboxid.defaultChecked == true)
        {
            document.getElementById('EmailTextBox').disabled=true;
        }
        else
        {
            document.getElementById('EmailTextBox').disabled=false;
        }
 
    }
 

and it works when I uncheck the box, the text becomes disabled. But when I check the checkbox right after that, it doesn't do anything. I can no longer get the text to become enabled again. Why is that?
Thanks!

You're passing EmailCheckbox.Checked which is either true or false. In the function, you just need to check whether it's equal to true or false. Don't forget to use double equals (==).

[acoder]

Ok so I changed it to this:

    function EmailChecked(checkboxid)
    {     
        if(checkboxid.defaultChecked == true)
        {
            document.getElementById('EmailTextBox').disabled=true;
        }
        else
        {
            document.getElementById('EmailTextBox').disabled=false;
        }
 
    }
 

and it works when I uncheck the box, the text becomes disabled. But when I check the checkbox right after that, it doesn't do anything. I can no longer get the text to become enabled again. Why is that?
Thanks!

You're checking the 'defaultChecked' property. You need to check the 'checked' property instead (a bit of a mouthful that!).

[JLC]

Ok I got it...thanks so much for the help!
JLC

You're checking the 'defaultChecked' property. You need to check the 'checked' property instead (a bit of a mouthful that!).

[acoder]

Ok I got it...thanks so much for the help!
JLC

No problem. You're welcome.