Disable a combobox

I have two combo boxes .. Status & Children .. When we open the html file, the value of Status is "Single" & Children field is disabled .. so I want that when If I select "Married" or any other value except "Single", the Children field should not be disable.

<html>
<head>
<title>Recruitment Application</title>
<script language="JavaScript" type="text/javascript">
<!--
function onFieldFocus(element) {
    if (element.disabled) {
         element.blur();
    }
}

function onPageLoad() {
    document._Recruitment.Children.disabled=true;
}

function disable_enable()
{
     if (document._Recruitment.Status.value=="Single")
     {
    document._Recruitment.Children.disabled=true;
    alert("done");
     }  
}
// -->
</script>

</head>
<body text="#000000" bgcolor="#FFFFFF" onload="onPageLoad()">

<form method="post" action=".." name="_Recruitment">

<table border=0>
 <tr>
  <td colspan=2>      Marital Information  </td>
 </tr>
 <tr>
  <td><font size="2" face="Tahoma">      </font>&nbsp</td>
  <td><font size="2" face="Tahoma">      </font>&nbsp</td>
 </tr>
 <tr>
  <td><font size="2" face="Tahoma">      </font>Marital Status: </td>
  <td><font size="2" face="Tahoma">      </font><font size="2" face="Tahoma">
<select name="Status" onchange="disable_enable()">
<option>Single
<option>Married
<option>Divorced
<option>Widowed</select>
</font>  </td>
 </tr>
 <tr>
  <td><font size="2" face="Tahoma">      </font>No. of Children: </td>
  <td><font size="2" face="Tahoma">      </font><font size="2" face="Tahoma">
<select name="Children" onfocus="onFieldFocus(this)">
<option>0
<option>1
<option>2
<option>3
<option>4
<option>5</select>
</font>  </td>
 </tr>
</table>
<br><table border=0>
 <tr>
  <td><font size="2" face="Tahoma">   </font></td>
  <td><font size="2" face="Tahoma">      </font><input type=submit value="submit" class=btn>&nbsp<input type=reset

value="reset" class=btn>  </td>
 </tr>
</table></body>
</head></form>
</body>
</html>
ninteen83Asked:
Who is Participating?
 
ho_alanConnect With a Mentor Commented:
u have missed the option value

<select name="Status" onchange="disable_enable()">
<option value=Single>Single
<option value=Married>Married
<option value=Divorced>Divorced
<option value=Widowed>Widowed</select>
0
 
ho_alanCommented:
function disable_enable()
{
    if (document._Recruitment.Status.value=="Single")
    {
       document._Recruitment.Children.disabled=true;
   }  
   else
        document._Recruitment.Children.disabled=false;
   return true;
}

u may try this on
hope this can inspire u
0
 
ninteen83Author Commented:
Okay .. by default it is "Single" .. Now when I select Married or any other .. the Children field is enabled .. but when I select back "Single" .. the Children field is still enabled ..

need help again :(

thanks ho_alan
0
 
ho_alanCommented:
here is the full version:  :-)

<html>
<head>
<title>Recruitment Application</title>
<script language="JavaScript" type="text/javascript">
<!--
function onFieldFocus(element) {
   if (element.disabled) {
        element.blur();
   }
}

function onPageLoad() {
   document._Recruitment.Children.disabled=true;
}

function disable_enable()
{
   if (document._Recruitment.Status.value=="Single")
   {
      
       document._Recruitment.Children.disabled=true;
  }  
   else
      document._Recruitment.Children.disabled=false;
  return true;
}

// -->
</script>

</head>
<body text="#000000" bgcolor="#FFFFFF" onload="onPageLoad()">

<form method="post" action=".." name="_Recruitment">

<table border=0>
<tr>
 <td colspan=2>     Marital Information  </td>
</tr>
<tr>
 <td><font size="2" face="Tahoma">     </font>&nbsp</td>
 <td><font size="2" face="Tahoma">     </font>&nbsp</td>
</tr>
<tr>
 <td><font size="2" face="Tahoma">     </font>Marital Status: </td>
 <td><font size="2" face="Tahoma">     </font><font size="2" face="Tahoma">
<select name="Status" onchange="disable_enable()">
<option value=Single>Single
<option value=Married>Married
<option value=Divorced>Divorced
<option value=Widowed>Widowed</select>
</font>  </td>
</tr>
<tr>
 <td><font size="2" face="Tahoma">     </font>No. of Children: </td>
 <td><font size="2" face="Tahoma">     </font><font size="2" face="Tahoma">
<select name="Children" onfocus="onFieldFocus(this)">
<option value=0>0
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4>4
<option value=5>5</select>
</font>  </td>
</tr>
</table>
<br><table border=0>
<tr>
 <td><font size="2" face="Tahoma">   </font></td>
 <td><font size="2" face="Tahoma">     </font><input type=submit value="submit" class=btn>&nbsp<input type=reset

value="reset" class=btn>  </td>
</tr>
</table></body>
</head></form>
</body>
</html>


0
 
ninteen83Author Commented:
ho_alan ... thanks :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.