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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
hieloConnect With a Mentor Commented:
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
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
joshuajohnhutchisonAuthor Commented:
haha. ok, this is the last time. use this one and disregard the first two.
test-disable.html
0
 
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
 
joshuajohnhutchisonAuthor Commented:
the genius came with the clean code. dude, well done.
0
All Courses

From novice to tech pro — start learning today.