Screenshot我试图验证复选框和多个文本框。首先应禁用文本框,并且仅在勾选复选框时才应启用文本框。如果勾选复选框的同一行上的文本框保留为空,则还会弹出警报。
<table class="table table-bordered">
<tr align="center" style="background-color:black; color:white;">
<tr> <td colspan="8" style="background-color:silver;"><input type="submit" class="btn btn-primary" id="addSPtoCart" name="addSPtoCart" value="Add To Cart" class="button-L" /></td></tr>
<tr align="center" style="background-color:black; color:white;">
<td class="border"><span class="table-head"><label>Favorite</label></span></td>
<td><span class="table-head"><label>Material Code</label></span></td>
<td><span class="table-head"><label>Material Desc</label></span></td>
<td><span class="table-head"><label>Chart</label></span></td>
<td><span class="table-head"><label>Shade</label></span></td>
<td><span class="table-head"><label><?php echo $month1 ?></label></span></td>
<td><span class="table-head"><label><?php echo $month2 ?></label></span></td>
<td><span class="table-head"><label><?php echo $month3 ?></label></span></td>
<!--<td class="no-border" align="center"><span class="table-head">Action</span></td>-->
</tr>
<tr class="abc" align="center">
<style>.abc:nth-child(even){background-color: silver;}</style>
<td><input type="checkbox" name="fav[]" id="fav[]" value="<?php echo $d['materialID']; ?>" /></td>
<td><label><?php echo $d['materialCode']; ?></label></td>
<td><label><?php echo $d['materialDesc']; ?></label></td>
<td><label><?php echo $d['chart']; ?></label></td>
<td><label><?php echo $d['shade']; ?></label></td>
<td><input type="text" class="form-control" style="width:80px; " size ="5" name="qty_1<?php echo $d['materialID'] ?>" id="qty_1<?php echo $d['materialID'] ?>" value =<?php echo $var1 ?> ></td>
<td><input type="text" class="form-control" style="width:80px;" size ="5" name="qty_2<?php echo $d['materialID'] ?>" id="qty_2<?php echo $d['materialID'] ?>" value =<?php echo $var2 ?> ></td>
<td><input type="text" class="form-control" style="width:80px;" size ="5" name="qty_3<?php echo $d['materialID'] ?>" id="qty_3<?php echo $d['materialID'] ?>" value =<?php echo $var3 ?> ></td>
<!-- <td class="no-border" align="center"><a href="<?php //echo SITEURL; ?>/salesplan/salesplan-details/?id=<?php //echo $d['mmID']; ?>&mCatID=<?php// echo $_REQUEST["mCatID"];?> ">View</a></td> -->
</tr>
<tr><td colspan="8"><input type="submit" class="btn btn-primary" id="addSPtoCart" name="addSPtoCart" value="Add To Cart" class="button-L" /></td></tr>
</table>
<script type="text/javascript">
function validateForm() {
var x = document.forms["frmFav"]["qty_1"].value;
var y = document.forms["frmFav"]["qty_2"].value;
var z = document.forms["frmFav"]["qty_3"].value;
//var a = document.forms["frmFav"]["fav"].value;
if ((x == "") || (!this.frmFav.fav.checked)) {
alert("This field cannot be left empty !");
return false;
}
}
</script>
答案 0 :(得分:0)
您应该对该按钮进行onclick操作以调用validateForm()函数
<input type="submit" class="btn btn-primary" id="addSPtoCart" name="addSPtoCart" value="Add To Cart" class="button-L" onclick="return validateForm()"/>
要启用和禁用文本框,请先将禁用的属性设置为
<td><input type="text" class="form-control" style="width:80px; " size ="5" name="qty_1<?php echo $d['materialID'] ?>" id="qty_1<?php echo $d['materialID'] ?>" value =<?php echo $var1 ?> disabled></td>
用于触发启用和禁用框
的功能 function checkboxchange(x){
var formcontrol = x.parentNode.parentNode.getElementsByClassName("form-control");
for (var i = 0; i < formcontrol.length; i++){
if(formcontrol[i].disabled)
formcontrol[i].disabled = false;
else
formcontrol[i].disabled = true;
}
}
在复选框中添加函数调用
<td><input type="checkbox" name="fav[]" id="fav[]" value="<?php echo $d['materialID']; ?>" onchange="checkboxchange(this)"/></td>
希望有帮助
更新到validateForm()函数
function validateForm() {
var validate = document.querySelectorAll(".form-control:not(:disabled)");
for (var i = 0; i < validate.length; i++){
if (validate[i].value=="") {
alert("This field cannot be left empty !");
return false;
}
}
}