Question

有人可以帮助我，看看我哪里出错了吗？

<script type="text/javascript">
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
  {
  alert("Enter Name");
  return false;
  }
var x=document.forms["myForm"]["car[]"].value;
if (x==null || x=="")
  {
  alert("Select Car");
  return false;
  }
}
  function add(tbl1) {
    var tb = document.getElementById(tbl1);
    var rowCount = tb.rows.length;
    var row = tb.insertRow(rowCount);
    var colCount = tb.rows[1].cells.length;
    for(var i=0; i<colCount; i++) {
        var newCell = row.insertCell(i);
        newCell.innerHTML = tb.rows[1].cells[i].innerHTML;
    }
  }

</script>
</head>
<body>
<form name="myForm" action="post.php" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<br><br>
<p>2. Your previous cars</p>
<table id="cars" border="1">

<tr><td width = "150"><center>Car</center></td>

</tr><tr>

</td><td><select name="car[]">
<option value="" selected=“selected”>Select one please</option>
<option value=Ford> Ford </option>
<option value=Audi> Audi </option>
<option value=Volvo> Volvo </option>
<option value=Nissan> Nissan </option>
<option value=Car 5>Car 5 </option>
</select></td>

</tr></table><br><br>
<input type="button" value="Add Row" onclick="add('cars')"/>
<input type="submit" value="Submit">
</form>

我创建了一系列汽车，所以如果personA有更多汽车，他们可以点击添加并选择另一个。如果他们有1辆汽车，只需输入名称和1辆汽车，表单有效但当我点击添加行并选择另一辆汽车时，它不起作用？

由于

Answer 1

您不能拥有具有相同name属性的多个输入字段。如果按Add Row按钮，组合框将重复，但它保持相同的名称，因此document.forms["myForm"]["car[]"].value;变为未定义。

解决此问题的一种方法是：

将<select name="car[]">设为<select name="car[1]">并将您的javascript内循环更改为以下内容：

newCell.innerHTML 
     = tb.rows[1].cells[i].innerHTML.replace("car[1]", "car["+rowCount+"]");

但是，您现在需要遍历每个car[x]，以便完成验证。

Answer 2

你的问题是，当有一个名为“car []”的选择元素时，document.forms["myForm"]["car[]"]是一个元素，但是当存在名为“car []”的多重选择元素时，它是一个数组（元素）。您的验证假定它始终是一个元素，因此它失败。

你可以测试document.forms["myForm"]["car[]"]是否是一个数组，你可能会觉得很尴尬，或者你可以使用document.getElementsByName("car[]")，它总会返回一个元素数组供你迭代。

如果数组为空或第一个元素不符合您的有效条件，则以下if将评估为true。

var x = document.getElementsByName("car[]");
if (x.length == 0 || x[0].value == null || x[0].value == "") { /* do stuff */ }

这个解决方案假设只有第一个必须是有效的（假设没有“删除汽车”按钮，这似乎最合理;如果这不是你的意图，迭代它们并返回false，如果任何不符合有效性条件

验证一系列下拉框？

2 个答案: