Disabling text field based on value selected in dropdown

Hi, I have an easy one here.  I have a region dropdown and I need to disable the country text field based upon the value selected in the region dropdown.

I attached a test file to make things quicker for you. It has the form set up, but no javascript.
test-disable.html
LVL 1
joshuajohnhutchisonAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

joshuajohnhutchisonAuthor Commented:
Oh, I forgot to tell you the selection regions that will disable the country field.  They are the ones with the country names in them: USEC, WCIndia and ECIndia.

I have attached a new test file that have these values in the dropdown already.  Disregard the original attached file.
test-disable.html
0
leakim971PluritechnicianCommented:
Hello ,

Try this :

(disabled if selected valu is USEC)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>
<div>
  <form id="form1" name="form1" method="post" action="">
    <p>Region: 
      <select name="region" id="region" onchange="document.forms[0].country.disabled=(this.value=='USEC');">
        <option value="">Choose one...</option>
        <option value="USEC">USEC</option>
        <option value="Far East">Far East</option>
        </select>
	</p>
    <p>Country: 
      <input type="text" name="country" id="country"  />
	</p>
  </form>
</div>
</body>
</html>

Open in new window

0
joshuajohnhutchisonAuthor Commented:
haha. ok, this is the last time. use this one and disregard the first two.
test-disable.html
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

joshuajohnhutchisonAuthor Commented:
leakim971,

Can you do that with the new file so I can see the code when using multiple values to disable?
0
tavoexpertCommented:
Here is how:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
      function checkMe(value){
            if (value=='USEC') //Or any value you need
                  document.getElementById('country').disabled = true;
            else
                  document.getElementById('country').disabled = false;
      }
</script>
</head>

<body>
<div>
  <form id="form1" name="form1" method="post" action="">
    <p>Region:
      <select name="region" id="region" onblur='checkMe(this.value)'>
        <option value=""></option>
        <option value="USEC">USEC</option>
        <option value="Far East">Far East</option>
        </select>
      </p>
    <p>Country:
      <input type="text" name="country" id="country"  />
      </p>
  </form>
</div>
</body>
</html>
0
joshuajohnhutchisonAuthor Commented:
And also, I want to change the color of the label text  to grey when the country field is disabled also.
0
tavoexpertCommented:
Here is the new how:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
      function checkMe(value){
            if (value=='USEC' || value == 'Far East') //Or any value you need
                  document.getElementById('country').disabled = true;
            else
                  document.getElementById('country').disabled = false;
      }
</script>
</head>

<body>
<div>
  <form id="form1" name="form1" method="post" action="">
    <p>Region:
      <select name="region" id="region" onblur='checkMe(this.value)'>
        <option value=""></option>
        <option value="USEC">USEC</option>
        <option value="Far East">Far East</option>
        </select>
      </p>
    <p>Country:
      <input type="text" name="country" id="country"  />
      </p>
  </form>
</div>
</body>
</html>
0
joshuajohnhutchisonAuthor Commented:
tavoexpert,

can you turn the label text grey also?
0
leakim971PluritechnicianCommented:
Check this :

Disabled if selected value is USEC or WCIndia.
If you want to add more, use : ||(this.value=='the value here')
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>
<div>
  <form id="form1" name="form1" method="post" action="">
    <p>Region: 
      <select name="region" id="region" onchange="document.forms[0].country.disabled = (this.value=='USEC')||(this.value=='WCIndia');">
        <option value=""></option>
        <option value="ECindia">ECIndia</option>
        <option value="Far East">Far East</option>
        <option value="SEAsia">SEAsia</option>
        <option value="USEC">USEC</option>
        <option value="WCIndia">WCIndia</option>
      </select>
	</p>
    <p>Country: 
      <input type="text" name="country" id="country"  />
	</p>
  </form>
</div>
</body>
</html>

Open in new window

0
hieloCommented:
try this:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function selectionChanged(sel){
	var e = document.getElementById("country");
	switch( sel.value )
	{
		//this is the "list" of the value that will disable country
		case "USEC":
		case "WCIndia":
		case "ECIndia":
			e.disabled=true;
			e.parentNode.style.color='#DEDEDE';
			break;

		default:
			e.parentNode.style.color='#000000';
			e.disabled=false;
	}
}
</script>
</head>

<body>
<div>
  <form id="form1" name="form1" method="post" action="">
    <p>Region: 
      <select name="region" id="region" onchange="selectionChanged(this)">
        <option value=""></option>
        <option value="ECIndia">ECIndia</option>
        <option value="Far East">Far East</option>
        <option value="SEAsia">SEAsia</option>
        <option value="USEC">USEC</option>
        <option value="WCIndia">WCIndia</option>
      </select>
	</p>
    <p>Country: 
      <input type="text" name="country" id="country"  />
	</p>
  </form>
</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
joshuajohnhutchisonAuthor Commented:
the genius came with the clean code. dude, well done.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.