[英]Keeping submit button disabled until dynamically created required fields are filled
我想保持提交按钮处于禁用状态,直到填写必填字段。
首先,我发现了一些有关此问题的问题,但问题是我有一些必填字段,而没有必填字段,而且我正在动态创建这些字段。 这是一个例子:
<input type="text" id="releaseartist" name="releaseartist" required="true" placeholder="Required Field"/>
我也有这样的输入,这就是我动态创建它们的方式,
var trackartistinput = document.createElement('input');
trackartistinput.setAttribute('type', "text");
trackartistinput.setAttribute('id', "trackartist" + i);
trackartistinput.setAttribute('name', "trackartist");
trackartistinput.setAttribute("required", true);
trackartistinput.setAttribute("placeholder", "Required Field");
trackartistinput.setAttribute("class", "required");
这是我的提交按钮:
<input type="submit" class="btn btn-primary" value="Submit" id="form-submit" onclick="return myConfirm();" />
您可以检查到目前为止已添加到文档中的必填字段的数目,并根据计数可以将“提交”按钮的属性设置为“禁用”或“启用”。
您可以按如下方式计算所需的类组件:
var numItems = $('.required').length
编辑
要检查是否所有必需的类元素都已填写,您可以检查如下:
var required_ele = document.getElementsByClassName('required');
var allfilled=true;
for (var i = 0; i < required_ele.length; ++i) {
var item = required_ele[i];
if(item.value.length==0){
allfilled=false;
}
}
if(allfilled){
document.getElementById("form-submit").disabled = false;
}
else{
document.getElementById("form-submit").disabled = true;
}
即使用户稍后删除了必填字段中输入的值,此方法也能正常工作,提交按钮将再次被禁用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.