为什么同一个控件，有时可用，用时又说“未定义”的呢？

Question

先看代码：<form name="form1">
营销员：<select name="employee" id="emp1" onchange="if (this.value!=''){emp2.value='';}">
<option value="">不选择</option>
<option value="张三">张三</option>
<option value="李四">李四</option></select>
其他营销员：<input name="employee" id="emp2" class="textbox" onblur="if (this.value!=''){emp1.value='';}"> <input type="button" value="确认" class="btn" onclick="check()">
<input type="reset" value="重置" class="btn">
</form><script language="javascript" type="text/javascript">
function check(){
if (emp1.value!="") //屏蔽其中一个，保证只有一个employee传到servlet
emp2.disabled=true;
if (emp2.value!=""){
emp1.disabled=true;
if (!checkIllegalChar(form1.employee,"",0))
return false;
}
form1.submit();
}
</script>
因为我想用两种方式都可以搜索到职员的信息，但提交的时候，只提交有内容的一个。
<select>和<input type=text>之间互相onchange和onblur都有反应，但点击按钮激活check之后，却说emp1未定义，为什么会这样呢？

Answer 1

var emp1=document.getElementById("emp1");
var emp2=document.getElementById("emp2");
<form name="form1">
营销员：<select name="employee" id="emp1" onchange="if (this.value!=''){emp2.value='';}">
    <option value="">不选择</option>
    <option value="张三">张三</option>
    <option value="李四">李四</option></select>
其他营销员：<input name="employee" id="emp2" class="textbox" onblur="if (this.value!=''){emp1.value='';}">
</form><script language="javascript" type="text/javascript">
function check(){
    //添加下面两句
    <input type="button" value="确认" class="btn" onclick="check()">
    <input type="reset" value="重置" class="btn">    if (emp1.value!="")        //屏蔽其中一个，保证只有一个employee传到servlet
        emp2.disabled=true;
    if (emp2.value!=""){
        emp1.disabled=true;
        if (!checkIllegalChar(form1.employee,"",0))
            return false;
    }
    form1.submit();
}
</script>

Answer 2

贴错了
如下：<form name="form1">
营销员：<select name="employee" id="emp1" onchange="if (this.value!=''){emp2.value='';}">
    <option value="">不选择</option>
    <option value="张三">张三</option>
    <option value="李四">李四</option></select>
其他营销员：<input name="employee" id="emp2" class="textbox" onblur="if (this.value!=''){emp1.value='';}">    <input type="button" value="确认" class="btn" onclick="check()">
    <input type="reset" value="重置" class="btn">
</form><script language="javascript" type="text/javascript">
function check(){
    //添加如下两句，就不会出现未定义了
    var emp1=document.getElementById("emp1"); 
    var emp2=document.getElementById("emp2");     if (emp1.value!="")        //屏蔽其中一个，保证只有一个employee传到servlet
        emp2.disabled=true;
    if (emp2.value!=""){
        emp1.disabled=true;
        if (!checkIllegalChar(form1.employee,"",0))
            return false;
    }
    form1.submit();
}
</script>

Answer 3

我觉得奇怪的是：为什么在<form>表单里面的两个控件，里面发生的事件不用document.getElementById来弄呢？
谢谢！

Answer 4

因为上述emp1.value和emp2.value这种写法应该是获取name的值，而这两个控件的name值是一样的，所以会报“未定义”这个错误，其实在平时写的时候最好把id和name定义成一样的。但在这里情况特殊，它是要获得任一控件的值，所以要用document.getElementById来获得，因为emp1和emp2表示的是id。

Answer 5

昨天终于找到有时可以，有时不行的原因了。
原来控件在form里面的话，就必须要用getElementById来取对象；如果不是在表单（form)里面的话，出可以不用getElementById的。