grey boxes in forms based on selection

@azzwepeFeb 07.2005

Hello,

I am creating a form.
I know it’s possible, if anyone could point me in the right direction it would be GREATLY appreciated.
I want the following to happen:

Ex.
———

Do you have a website? -/YES/NO (dropdown box, intial selection is ‘-‘)

website address: __________ (textbox, I want this field to be greyed out UNLESS the user selects ‘YES’.

———–

I can’t figure out what this is referred to as.
Again, if anyone help out and/or point me in the right direction it would be GREATLY appreciated.

Thanks,
Sean

here is my code thus far

Do you sell or advertise products over the internet?:
<select size=”1″ name=”internet_business”>
<option selected>-</option>
<option>Yes</option>
<option>No</option>
</select>
<p>
Website Address:<input type=”text” name=”website_address” size=”20″>

to post a comment

JavaScript

12 Comments(s) _↴

@PSLohFeb 07.2005 — #can u not just change the txtbox to disabled when the user select 'No'???

i know using <div> & .innerHTML can work...there may be other ways...

@azzwepeauthorFeb 07.2005 — #not sure.

thing is... I am absolutely terrible with Javascript. I'm learning slowly but surely. If you know where I could find a code simliar to the one you are explaining above or could briefly explain to me how I could accomplish it I would really appreciate it.

Thanks,

Sean

@PSLohFeb 07.2005 — #u can try searching for innerHTML and div

Ex:

....

....

<form>

....

....

<div id=divtxtbox><input type=text name=txt1></div>

....

....

</form>

<script language=javascript>

function changeSelect(){

document.form[0].divtxtbox.innerHTML="<input type=text name=txt1 disabled>";

}

</script>

Have not tested the code...Hope it works...

@azzwepeauthorFeb 07.2005 — #i feel like an ass...

I'm not to sure how to integrate that into what I want to do.

I found something similar using radio buttons but it's not Ideal.

Does anyone know how to change the following radio buttons to a drop down menu and the text area to a text box (and still make this code work)?

<html>

<head>

<script type="text/javascript">

function SetState(obj_radio, obj_text)

{ if(parseInt(obj_radio.value))

{ obj_text.disabled = true;

}

else

{ obj_text.disabled = false;

}

}

</script>

</head>

<body>

<form>

Yes:<input type="radio" name="my_rad" value="0" onclick="SetState

(this, this.form.my_text)" checked><br>

No:<input type="radio" name="my_rad" value="1"

onclick="SetState(this, this.form.my_text)"><br>

<textarea name="my_text">Howdy</textarea>

<br>

</form>

@PittimannFeb 07.2005 — #Hi!

You could use something like this:

[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <title>Example</title>
 <style type="text/css">
 <!--
 .disabled{
 background-color:#cccccc;
 }
 -->
 </style>
 <script language="JavaScript" type="text/javascript">
 <!--
 function greyOut(val){
 fld=document.myform.website_address;
 if(val=="1"){
 setDis=true;
 fld.className="disabled";/*for IE*/
 }
 else{
 setDis=false;
 fld.className="";
 }
 fld.disabled=setDis;
 }
 //-->
 </script>
 </head>
 <body onload="greyOut('1')">
 <form name="myform" action="#">
 <select name="internet_business" onchange="greyOut(this.options[this.selectedIndex].value)">
 <option selected value="1">-</option>
 <option value="0">Yes</option>
 <option value="1">No</option>
 </select>
 <p>
 Website Address:<input type="text" name="website_address" size="20">
 </form>
 </body>
 </html>[/code]

Cheers - Pit

@azzwepeauthorFeb 07.2005 — #Pit you are the King.

That is exactly what i wanted.

Thanks a lot for your help.

Sean

?

@PSLohFeb 07.2005 — #Try:

<form name=frm1 action=(your URL) method=POST>

<table>

<tr>

<td>Do you have a website?</td>

<td><select size="1" name="internet_business">

<option value="" selected>-</option>

<option value="Yes">Yes</option>

<option vale="No">No</option>

</select></td>

<tr>

<td>Website Address:</td>

<td><div id=divtxtbox><input type="text" name="website_address" size="20"></div></td>

</tr>

</table>

</form>

<script language=javascript>

function changeSelect(){

if (frm1.internet_business.value=="No")

document.frm1.divtxtbox.innerHTML="<input type=text name=website_address disabled>";

}

</script>

Once again, this is not tested...Hope it works for u...

@PittimannFeb 07.2005 — #Hi!

You're welcome! :p

Cheers - Pit

@azzwepeauthorFeb 07.2005 — #Hey Pit err someone?

Thanks again for that greyout script you gave me.

Would this easily work if I wanted to do Multiple Greyouts based on a selection?

same as before: -/yes/no

Address:______

City:______

Zip:______

the above text areas are greyed unless Yes is chosen.

I took a detailed look at the script you showed me and can see exactly how you did it. (well kinda ?)

I now see how to make it work for one area. But what if I want to do 3 text boxes based on one selection? Oh yea I want to integrate this into the same form I am integrating that other script you gave me. (conflict?)

here's my code so far:

<head>

<title>Form</title>

<style type="text/css">



</style>

<script language="JavaScript" type="text/javascript">



</script>

</head>

<form method="POST" name="myform">

<p><font face="Arial" size="3">Company Name:</font><input type="text" name="Company_Name" size="20">

<p>Is your place of business accessible to walk-in customers: <select size="1" name="Walk_In">

<option selected>-</option>

<option>Yes</option>

<option>No</option>

</select>*</font>

<p>

Address:<input type="text" name="Address" size="20">

<p>

City:<input type="text" name="City" size="20">

<p>

ZiP/Postal Code:<input type="text" name="ZIP_Postal" size="20">

<p>

Do you sell or advertise products over the internet: <select name="internet_business" onchange="greyOut(this.options[this.selectedIndex].value)">

<option selected value="1">-</option>

<option value="0">Yes</option>

<option value="1">No</option>

</select> *

<p>

Website Address:<input type="text" name="website_address" size="20">

<p>

Phone Number:

<input type="text" name="phone_number" size="20">*

<p>

Email Address:<input type="text" name="email_address" size="20">

<p>

<input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="reset"></p>

<p align="left">Please ensure all fields marked with a <b>* </b>are filled in correctly.</form>

@PittimannFeb 07.2005 — #Hi!

A quick and dirty shot:

[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <title>Form</title>
 <style type="text/css"> 
 <!-- 
 .disabled{ 
 background-color:#D2D2D2; 
 } 
 --> 
 </style> 
 <script language="JavaScript" type="text/javascript"> 
 <!-- 
 function greyOut(val1,val2){ 
 if(val1=="1"||val1=="0"){ 
 fld=document.myform.website_address;
 if(val1=="1"){ 
 setDis=true; 
 fld.className="disabled";/*for IE*/ 
 } 
 if(val1=="0"){ 
 setDis=false; 
 fld.className=""; 
 } 
 fld.disabled=setDis; 
 } 
 if(val2=="1"||val2=="0"){ 
 fld1=document.myform.Address;
 fld2=document.myform.City;
 fld3=document.myform.ZIP_Postal;
 if(val2=="1"){ 
 setDis=true; 
 fld1.className="disabled"; 
 fld2.className="disabled"; 
 fld3.className="disabled"; 
 } 
 if(val2=="0"){ 
 setDis=false; 
 fld1.className=""; 
 fld2.className=""; 
 fld3.className=""; 
 } 
 fld1.disabled=setDis; 
 fld2.disabled=setDis; 
 fld3.disabled=setDis; 
 } 
 } 
 //--> 
 </script> 
 </head>
 <body onload="greyOut('1','1')"> 
 <form method="POST" name="myform">
 <p><span style="font-size:1em;font-family:verdana,arial,sans-serif;">Company Name:</span><input type="text" name="Company_Name" size="20">
 <p>Is your place of business accessible to walk-in customers:
 <select size="1" name="Walk_In" onchange="greyOut('2',this.options[this.selectedIndex].value)">
 <option selected value="1">-</option> 
 <option value="0">Yes</option> 
 <option value="1">No</option> 
 </select> *
 <p>
 Address:<input type="text" name="Address" size="20">
 <p>
 City:<input type="text" name="City" size="20">
 <p>
 ZiP/Postal Code:<input type="text" name="ZIP_Postal" size="20">
 <p>
 Do you sell or advertise products over the internet:
 <select name="internet_business" onchange="greyOut(this.options[this.selectedIndex].value)"> 
 <option selected value="1">-</option> 
 <option value="0">Yes</option> 
 <option value="1">No</option> 
 </select> *
 <p>
 Website Address:<input type="text" name="website_address" size="20">
 <p>
 Phone Number:
 <input type="text" name="phone_number" size="20">*
 <p>
 Email Address:<input type="text" name="email_address" size="20">
 <p> 
 <input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="reset"></p>
 <p align="left">Please ensure all fields marked with a <b>* </b>are filled in correctly.</form>
 </body>
 </html>[/code]

Cheers - Pit

@azzwepeauthorFeb 07.2005 — #Pit,

You've been nothing less of fantastic help. Thank you for making that process as painless as you seemed to make it.

Sean

@PittimannFeb 07.2005 — #Hi Sean!

You're welcome. ?

Good luck 'n cheers - Pit

Also in #JavaScript _↴

100% width problem IE 9 Horizontal Scroll Bar Issue Need some help/advice for animations

Success!

Help @azzwepe spread the word by sharing this article on Twitter...

Tweet This

grey boxes in forms based on selection

Ex.
———

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

grey boxes in forms based on selection

Ex. ———

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

Ex.
———

12 Comments(s) _↴

Also in #JavaScript _↴