我有一个简单的html,有两个表单,每个表单有四个输入字段:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="initial-scale=1" />
<title>Test3</title>
</head>
<body>
<h1>Two Forms</h1>
<form id="form1" name="form1" method="post" action="test.php">
<label for="name">F1 Name*</label>
<input type="text" name="name" id="name"/>
<br/>
<label for="phone">*Phone*</label>
<input type="text" name="phone" id="phone"/>
<br/>
<label for="email">Email</label>
<input type="text" name="email" id="email"/>
<br/>
<label for="postcode">*Postcode</label>
<input type="text" name="postcode" id="postcode" class="input-textfield"/>
<br/>
<input type="submit" name="Submit" value="Submit" />
</form>
<br/><br/>
<form id="form2" name="form2" method="post" action="test.php">
<label for="name2">F2 Name*</label>
<input type="text" name="name2" id="name2"/>
<br/>
<label for="phone2">*Phone*</label>
<input type="text" name="phone2" id="phone2"/>
<br/>
<label for="email2">Email</label>
<input type="text" name="email2" id="email2"/>
<br/>
<label for="postcode2">*Postcode</label>
<input type="text" name="postcode2" id="postcode2" class="input-textfield"/>
<br/>
<input type="submit" name="Submit2" value="Submit" />
</form>
<script type="text/javascript" src="check-form.js"></script>
</body>
</html>
我尝试在每个表单之前插入一个段落,并在每个输入字段后面显示一个段落以显示消息:
var nlForms = []; var arPForSubmitMsg = []; // 1d arrays for forms.
var arNlInputs = new Array([]); // 2d arrays for inputs.
var darSpanForErrorMsg = new Array([]); // 2d arrays for inputs.
window.onload = initialise;
function initialise() {
// for creating and inputing paragraph and span elements for displaying submit and error messages.
nlForms = document.getElementsByTagName('form');
for (f = 0; f < nlForms.length; f++) {
arNlInputs[f] = nlForms[f].getElementsByTagName("input"); // store list into array makeing it double.
}
// create paragraph elements of class 'submitmsg'and insert them before each form.
for (f = 0; f < nlForms.length; f++) {
arPForSubmitMsg[f] = document.createElement('p');
arPForSubmitMsg[f].setAttribute('class', 'submitmsg');
arPForSubmitMsg[f].innerHTML = "hello form " + f;
var nodeFormParent = nlForms[f].parentNode;
nodeFormParent.insertBefore(arPForSubmitMsg[f], nlForms[f]);
}
// create span elements of class 'errormsg' and
// insert them after each input which is required or needs to be validated.
for (f = 0; f < nlForms.length; f++) {
for (i=0; i < arNlInputs[f].length; i++) {
// STOP - here it stops when f=1 and i=0 (it does get inside this for loop)
darSpanForErrorMsg[f][i] = document.createElement("span");
// but it doesn't get to this point when f=1 and i=0;
darSpanForErrorMsg[f][i].innerHTML = "hello span " + i;
darSpanForErrorMsg[f][i].class = "errormsg";
var nodeInputParent = arNlInputs[f][i].parentNode;
var nodeInputNextSibling = arNlInputs[f][i].nextSibling ;
nodeInputParent.insertBefore(darSpanForErrorMsg[f][i], nodeInputNextSibling);
}
}
} // end initialise().
第一个表单的字段填充得很好,但不适用于第二个表单。我检查过,当代码进入第二个for循环时代码停止,当f = 1且i = 0时再次开始迭代。我受到了保护,无法解决我在这里发生的事情。我将不胜感激任何帮助或建议。
答案 0 :(得分:0)
我想出来(经过漫长的一夜):-):
即使2D数组声明为2D(使用= array([]);),仍然需要将数组中的每个元素声明为数组以使其成为2D。因此,缺少的代码行是:
darSpanForErrorMsg[f] = [];
它应该放在第一个for循环中的第一行。初学者错误;我希望它会帮助其他人坚持下去。