Grayout textbox on checkbox

Javascript coding ..

Moderators: macek, egami, gesf

stylus
New php-forum User
New php-forum User
Posts: 12
Joined: Tue Oct 18, 2005 11:49 am
Location: Oakland Maine
Contact:

Grayout textbox on checkbox

Postby stylus » Tue Oct 18, 2005 11:55 am

Hello,

I am a php noobie, but have some experiance in web design, and development.

I am looking to have a form that if a certain checkbox gets checked, a text field will get grayed out so that the user can only choose one or the other.

probably a javascript function would work, but I don't know what would make the text box become grayed out/read only.

Here is a snippit of the form I am building

<tr bgcolor="#CCCCCC">
<td>Required Date:</td>
<td>Specific Time: <input type="text" name="required_date"><br>
Anytime: <input type="checkbox" name="required_date" value="anytime">
</td>
</tr>

Thanks

User avatar
Alexej Kubarev
Site Admin
Site Admin
Posts: 2223
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län
Contact:

Postby Alexej Kubarev » Tue Oct 18, 2005 11:58 am

Moved to Javascript forum

User avatar
Alexej Kubarev
Site Admin
Site Admin
Posts: 2223
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län
Contact:

Postby Alexej Kubarev » Tue Oct 18, 2005 12:02 pm

The solution would most probably be setting disabled property to true.

Code: Select all

<script type="text/javascript">
function disable(el)
{
   getElementById(el).disabled=true;
}
</script>
<input type="text" id="element1" />
<a href="javascript:disable('element1')">Disable</a>

stylus
New php-forum User
New php-forum User
Posts: 12
Joined: Tue Oct 18, 2005 11:49 am
Location: Oakland Maine
Contact:

Postby stylus » Tue Oct 18, 2005 2:03 pm

I tried to impliment that code, but got no where.

I got a "objected expected"


This is the code I tried to use.


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<script type="text/javascript">
function disable(el)
{
getElementById(el).disabled=true;
}
</script>
<form name="test" method="post" enctype="multipart/form-data" >
<input type="text" id="el" name="element1">
</form>

<a href="javascript:disable('el')">Disable</a>
</body>
</html>

php-vikas
New php-forum User
New php-forum User
Posts: 164
Joined: Mon Apr 14, 2003 12:25 am
Location: India
Contact:

Postby php-vikas » Tue Oct 18, 2005 7:43 pm

Here is the working one.

Code: Select all


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<SCRIPT language=javascript>
function disable()
{
   test.name.disabled=true;
}
</script>

<form name="test" method="post" enctype="multipart/form-data" >
<input type="text" id="name" name="element1">
</form>

<a href="#" onClick="disable()">Disable</a>
</body>
</html>


User avatar
Alexej Kubarev
Site Admin
Site Admin
Posts: 2223
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län
Contact:

Postby Alexej Kubarev » Wed Oct 19, 2005 2:34 am

okej.. hmmz.. i may have missed some small things, but the problem is that you need to get element by its ID for w3c complience...

stylus
New php-forum User
New php-forum User
Posts: 12
Joined: Tue Oct 18, 2005 11:49 am
Location: Oakland Maine
Contact:

Postby stylus » Thu Oct 20, 2005 4:22 pm

That code only seems to work when it is a link, I setup a radio box with onclick="disable()" and it doesn't update the form field. Is there a way to have it refreash an element by id? or does the whole page have to refreash?

thanks

User avatar
ruturajv
php-forum Super User
php-forum Super User
Posts: 1280
Joined: Sat Mar 22, 2003 9:42 am
Location: Mumbai, India
Contact:

Postby ruturajv » Thu Oct 20, 2005 8:03 pm

you don't need to refresh the page, and it will not help solve the prob.

make sure you the onclick event of the element is not disabling the very element itself.

User avatar
WebOutGateway
New php-forum User
New php-forum User
Posts: 37
Joined: Mon Jun 13, 2011 9:25 pm
Location: Pasig City, Philippines
Contact:

Re: Grayout textbox on checkbox

Postby WebOutGateway » Thu Jul 31, 2014 10:41 pm

Hi, stylus!

You can try this:

http://www.homeandlearn.co.uk/JS/getElementById.html

Just edit the function part. Get the element id of your checkbox, use the checked property and then change the background color of your textbox into your desired color which is gray.

I hope this helps. Thank you.


Return to “JavaScript”

Who is online

Users browsing this forum: No registered users and 1 guest