Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML JavaScript

Grayout textbox on checkbox

Javascript coding ..

Moderators: macek, egami, gesf

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
stylus
New php-forum User
New php-forum User
 
Posts: 12
Joined: Tue Oct 18, 2005 11:49 am
Location: Oakland Maine

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

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>
User avatar
Alexej Kubarev
Site Admin
Site Admin
 
Posts: 2223
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län

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>
stylus
New php-forum User
New php-forum User
 
Posts: 12
Joined: Tue Oct 18, 2005 11:49 am
Location: Oakland Maine

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>

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

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...
User avatar
Alexej Kubarev
Site Admin
Site Admin
 
Posts: 2223
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län

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
stylus
New php-forum User
New php-forum User
 
Posts: 12
Joined: Tue Oct 18, 2005 11:49 am
Location: Oakland Maine

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
ruturajv
php-forum Super User
php-forum Super User
 
Posts: 1280
Joined: Sat Mar 22, 2003 9:42 am
Location: Mumbai, India

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.
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


Return to JavaScript

Who is online

Users browsing this forum: No registered users and 1 guest

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.

cron