我有一个表单,在提交之前应填写所有文本框。我的表格看起来像这样
<form name="form" method="post" action="url" onsubmit="return checkEmpty(this)" >
<div class="field">
<label>field1</label><input type="text" name="f1" />
</div>
<div class="field">
<label>field2</label><input type="text" name="f2" />
</div>
..
....
......
input type="submit" name="Submit" value="submit" />
</form>
我在这里做的是,当提交表单时,我检查是否有任何文本框为空,如果有任何我创建dom
元素h3
并将其附加到{{1}相应字段的相应字段,如果文本框不为空,我检查是否有任何文本框附加到相应的字段,如果我找到一个我删除它。这是我的javascript代码
div
现在,当我提交表单时,浏览器会冻结。
* 此外,我的代码在ggogle Chrome中无效,但只有firefox *
直到我没有删除元素代码工作正常但删除元素是必要的,因为假设用户在第一次尝试时没有在文本框1中输入任何值,因此将添加function checkEmpty(form) {
var textboxes=form.elements;
for(var i=0;i<textboxes.length;i++)
{
if((textboxes[i].type=="text" || textboxes[i].type=="password") && textboxes[i].textLength==0) //text box is empty
{
var msg=document.createElement('h3');
msg.innerHTML="u cant leave this field blank";
textboxes[i].parentNode.appendChild(msg);
return false;
}
else //text box is not empty
{
var rem_msg=textboxes[i].parentNode.getElementsByTagName('h3');
for(var j=0;j<rem_msg.length;j++)
textboxes[i].parentNode.removeChild(rem_msg[j]);
}
}
}
元素,但现在他首先输入一些文本文本框但是将第二个文本框留空,因此第一个文本框的h3
元素应该消失。
因为代码下面的答案 不再冻结浏览器了 我仍然只能添加
h3
元素到dom但不能删除 他们。所以代码在firefox中运行 但不是谷歌浏览器。
答案 0 :(得分:3)
问题是你在两个不同的循环中使用变量i
。当内循环结束时,它总是会将i
设置为rem_msg.length
,这将使外循环不会达到其退出状态,因此最终会出现无限循环。
要解决您的问题,您只需将第二个i
重命名为例如{} j
你很高兴。
答案 1 :(得分:1)
我认为可能是格式错误for
:
for(var i=0;i<rem_msg.length;;i++)
您还有一个额外的;
,所以我认为i++
没有运行。