使用JavaScript启用和禁用表单字段_Javascript

使用JavaScript启用和禁用表单字段

javascript

使用JavaScript启用和禁用表单字段,javascript,Javascript,我在让JavaScript执行我需要的操作时遇到了麻烦。我有一个国家下拉列表，其中有美国或其他国家；然后我有一个州字段，其中列出了美国所有50个州；然后我有一个文本字段，供人们输入他们居住的国家，如果他们不住在美国。我希望能够做到的是，如果在国家下拉列表中选择了美国，我希望“其他”文本字段被禁用，州下拉列表被启用；反之亦然，如果他们选择“其他”，则状态下拉列表被禁用，“其他”文本字段被启用以下是HTML代码： <!DOCTYPE html> <html> <he

我在让JavaScript执行我需要的操作时遇到了麻烦。我有一个国家下拉列表，其中有美国或其他国家；然后我有一个州字段，其中列出了美国所有50个州；然后我有一个文本字段，供人们输入他们居住的国家，如果他们不住在美国。我希望能够做到的是，如果在国家下拉列表中选择了美国，我希望“其他”文本字段被禁用，州下拉列表被启用；反之亦然，如果他们选择“其他”，则状态下拉列表被禁用，“其他”文本字段被启用
以下是HTML代码：

<!DOCTYPE html>
<html>

<head>
<script src="countryValidation.js"></script>
</head>
<body>
<div id="form2">
<form name="createForm" onsubmit="return createValidation();" method="get">
<p>Country:    <select id="country">
            <option value="0">United States</option>
            <option value="1">Other</option>
           </select>&nbsp;*&nbsp;&nbsp;&nbsp;</p>
<p>State:    <select id="state">
          <option value="0">- -Select state- -</option>
          <option value="Alabama">Alabama</option>
          <option value="Alaska">Alaska</option>
          <option value="Arizona">Arizona</option>
          <option value="Arkansas">Arkansas</option>
          <option value="California">California</option>
          <option value="Colorado">Colorado</option>
          <option value="Connecticut">Connecticut</option>
          <option value="Delaware">Delaware</option>
          <option value="Florida">Florida</option>
          <option value="Georgia">Georgia</option>
          <option value="Hawaii">Hawaii</option>
          <option value="Idaho">Idaho</option>
          <option value="Illinois">Illinois</option>
          <option value="Indiana">Indiana</option>
          <option value="Iowa">Iowa</option>
          <option value="Kansas">Kansas</option>
          <option value="Kentucky">Kentucky</option>
          <option value="Louisiana">Louisiana</option>
          <option value="Maine">Maine</option>
          <option value="Maryland">Maryland</option>
          <option value="Massachusetts">Massachusetts</option>
          <option value="Michigan">Michigan</option>
          <option value="Minnesota">Minnesota</option>
          <option value="Mississippi">Mississippi</option>
          <option value="Missouri">Missouri</option>
          <option value="Montana">Montana</option>
          <option value="Nebraska">Nebraska</option>
          <option value="Nevada">Nevada</option>
          <option value="New Hampshire">New Hampshire</option>
          <option value="New Jersey">New Jersey</option>
          <option value="New Mexico">New Mexico</option>
          <option value="New York">New York</option>
          <option value="North Carolina">North Carolina</option>
          <option value="North Dakota">North Dakota</option>
          <option value="Ohio">Ohio</option>
          <option value="Oklahoma">Oklahoma</option>
          <option value="Oregon">Oregon</option>
          <option value="Pennsylvania">Pennsylvania</option>
          <option value="Rhode Island">Rhode Island</option>
          <option value="South Carolina">South Carolina</option>
          <option value="South Dakota">South Dakota</option>
          <option value="Tennessee">Tennessee</option>
          <option value="Texas">Texas</option>
          <option value="Utah">Utah</option>
          <option value="Vermont">Vermont</option>
          <option value="Virginia">virginia</option>
          <option value="Washington">Washington</option>
          <option value="West Virginia">West Virginia</option>
          <option value="Wisconsin">Wisconsin</option>
          <option value="Wyoming">Wyoming</option>
         </select>&nbsp;*&nbsp;&nbsp;&nbsp;</p>
 <p>Please type in what country you live in:
<input type="text" id="countryOther" />&nbsp;*&nbsp;&nbsp;&nbsp;</p>

我有另一个JavaScript函数来验证整个表单，因为我将使用它来允许人们创建帐户。我还没有到拥有SQL server的地步，也没有学过SQL、PHP或ASP.net。。。我这样做是为了一个项目，真的需要一些帮助来解决这个问题

谢谢

这符合您的要求。我还添加了一个focus命令，因为它使ui更加平滑。一旦用户单击“其他”，焦点将自动转到“其他国家”文本框，让他们键入

我可以建议一个稍微不同的方法吗？像这样的事情，也许

<form name="createForm" onsubmit="return createValidation();" method="get">
    <label for"country">Country</label>
    <select id="country" name="country" onchange="countryValidation();">
        <option value="0">Select Country</option>
            <option value="1">United States</option>
            <option value="2">Other</option>
           </select>
    <div id="moreInfo"></div>
</form> 
<script type="text/javascript">

function countryValidation() {
    var moreinfo = document.getElementById("moreInfo");
    var country = document.getElementById("country").value;
    if (country==1) {
        var states = ["Alabama", "Alaska"];
        var stateselect = '<select id="state" name="state">';
        for (var i=0; i<states.length; i++) {
            stateselect += '<option value="' + states[i] + '">' + states[i] + '</option>';
        }
        stateselect += '</select>';
        moreinfo.innerHTML = stateselect;
    } else if (country==2) {
        moreinfo.innerHTML = '<input type="text" id="countryOther" name="countryOther" value="Please enter the name of your country" />';
    }
}
</script>


国家
选择国家
美国
其他
函数countryValidation（）{
var moreinfo=document.getElementById（“moreinfo”）；
var country=document.getElementById（“国家”）.value；
如果（国家==1）{
var states=[“阿拉巴马州”、“阿拉斯加州”]；
var stateselect=''；
对于（var i=0；我感谢您的帮助，它可以工作，但只有在我进行更改然后刷新页面时才能工作。我会找出在输入时如何刷新页面…或类似的内容。因此我认为我的部分问题是我必须在过时的浏览器上检查所有内容。我非常确定当前安装在这台计算机是IE7，我无法将其更新到这台计算机上的限制。当我进入我的个人计算机时，我会再次检查它。再次感谢Ben.PS。很高兴知道我很接近。如果发现有帮助，请进行投票…这就是堆栈工作的方式我没有足够的声誉进行投票…但我接受了答案。countryOther.value=”“
最好是countryOther.selectedIndex=-1
，这样就不会选择任何选项。如果您从提交侦听器传递该选项，您将获得对表单的引用，并在函数中获得它，如函数countryValidation（form）{…}
和文档.forms[“createForm”][“country”].value
可以是form.country.value
。更不用说键入了。：-）由于某种原因，当我把它放在form.country.value
中时，它不想工作，所以我把它放在document.forms[“createForm”][“country”]中。value
这就是我这样做的原因。你需要从监听器传递它：onsubmit=“返回createValidation（this）；”
function countryValidation()
 {
  var country = document.forms["createForm"]["country"].value;
  var countryOther = document.forms["createForm"]["countryOther"];
  var state = document.forms["createForm"]["state"];

  if (country == 0)
   {
   state.disabled=false;       //enable state
   state.focus();              //focus state 
   countryOther.value="";      //clear countryOther from any prev entry
   countryOther.disabled=true; //enable countryOther
   }
  else if (country == 1)
   {
   state.disabled=true;         //disable state
   state.value=0;               //clear state from any prev value
   countryOther.disabled=false; //enable countryOther
   countryOther.focus();        //focus on countryOther
    }
 }

<form name="createForm" onsubmit="return createValidation();" method="get">
    <label for"country">Country</label>
    <select id="country" name="country" onchange="countryValidation();">
        <option value="0">Select Country</option>
            <option value="1">United States</option>
            <option value="2">Other</option>
           </select>
    <div id="moreInfo"></div>
</form> 
<script type="text/javascript">

function countryValidation() {
    var moreinfo = document.getElementById("moreInfo");
    var country = document.getElementById("country").value;
    if (country==1) {
        var states = ["Alabama", "Alaska"];
        var stateselect = '<select id="state" name="state">';
        for (var i=0; i<states.length; i++) {
            stateselect += '<option value="' + states[i] + '">' + states[i] + '</option>';
        }
        stateselect += '</select>';
        moreinfo.innerHTML = stateselect;
    } else if (country==2) {
        moreinfo.innerHTML = '<input type="text" id="countryOther" name="countryOther" value="Please enter the name of your country" />';
    }
}
</script>