2

我正在尝试验证所有材料下拉列表。但是我frm.material is undefined的系统出现错误。

HTML 标记

<form name="testFrm" id="textFrm">Material 1
    <select name="material[1][]" class="Form_dropdown material_dd">
        <option value="-1">Select</option>
        <option value="2">Fine Silk</option>
        <option value="10">NZ Wool</option>
        <option value="3">Thick Silk</option>
        <option value="1">Titbetan Wool</option>
    </select>
    <select name="material[1][]" class="Form_dropdown material_dd">
        <option value="-1">Select</option>
        <option value="2">Fine Silk</option>
        <option value="10">NZ Wool</option>
        <option value="3">Thick Silk</option>
        <option value="1">Titbetan Wool</option>
    </select>
    <br />Material 2
    <select name="material[2][]" class="Form_dropdown material_dd">
        <option value="-1">Select</option>
        <option value="2">Fine Silk</option>
        <option value="10">NZ Wool</option>
        <option value="3">Thick Silk</option>
        <option value="1">Titbetan Wool</option>
    </select>
    <br />Material 3
    <select name="material[3][]" class="Form_dropdown material_dd">
        <option value="-1">Select</option>
        <option value="2">Fine Silk</option>
        <option value="10">NZ Wool</option>
        <option value="3">Thick Silk</option>
        <option value="1">Titbetan Wool</option>
    </select>
    <select name="material[3][]" class="Form_dropdown material_dd">
        <option value="-1">Select</option>
        <option value="2">Fine Silk</option>
        <option value="10">NZ Wool</option>
        <option value="3">Thick Silk</option>
        <option value="1">Titbetan Wool</option>
    </select>
    <select name="material[3][]" class="Form_dropdown material_dd">
        <option value="-1">Select</option>
        <option value="2">Fine Silk</option>
        <option value="10">NZ Wool</option>
        <option value="3">Thick Silk</option>
        <option value="1">Titbetan Wool</option>
    </select>
    <br />
    <input type="button" onclick="return checkForm()" value="validate" />
</form>

我创建了一个 jsFiddle，你可以在这里找到http://jsfiddle.net/QgghZ/12/

第一个选择选项的值是<option value="-1">Select</option>需要检查是否有任何下拉菜单未设置为选择。

我需要一个 js 函数来验证这些下拉列表。

提前谢谢大家的支持

编辑

感谢大家修复 jsFiddle 问题，但我需要一个可以迭代这些下拉列表的验证函数。

编辑

如果我使用以下 JS，它会显示名称

var boxes = document.getElementsByTagName('select');
    for(i = 0; i < boxes.length; i++){

           console.log(boxes[i].name);

    }

// Output: material[1][], material[1][], material[2][] .... someotherDropdowns

回答

这是我获得所有值的方式

function checkForm(){
    var e = false;
    var boxes = document.getElementsByClassName('material_dd');
    for(i = 0; i < boxes.length; i++){
        if(boxes[i].value == '-1'){
           e = true;
        }          
    }
    if(e){
        alert('Please select a material');
        return false;
    }

}

因此，即使还有其他选择框，它也只会检查材料下拉列表。我可以遍历该值以查看其中是否有-1。

4

4 回答 4

3

除了表单名称上的拼写错误之外，您不会通过 frm.material 获得选择的数组，它们不会像这样分组，就像您在后端脚本中收到表单时一样。你可以用类似的东西来访问它们frm["material[1][]"]，但我会使用另一种方法来代替，document.getElementsByClassName('material_dd')这样你就可以知道那里有多少元素。

于 2013-02-13T08:13:31.520 回答
1

我不明白为什么它不起作用，但是我稍微更改了您的代码，现在它可以工作了

[jsFiddle][1]


  [1]: http://jsfiddle.net/QgghZ/
于 2013-02-13T07:53:12.740 回答
0

您的 jsfiddle 设置设置错误，以下是更新的链接：

<input type="button" onClick="checkForm()" value="validate" />

http://jsfiddle.net/QgghZ/7/

此外，您的表单标签为：

<form name="testFrm" id="textFrm">Material 1

然后在你调用的脚本中：

 frm = document.getElementById("testFrm");

没有 ID 为 testFrm 的表单

于 2013-02-13T07:51:07.820 回答
0

代替 frm = document.getElementById("testFrm");

和 frm = document.getElementById("textFrm");

于 2013-02-13T07:54:36.760 回答