如题,由于input是动态生成,起先也可以给id设置成不同的动态名,但是为了尽量不改后台代码。于是尝试了几种方法。
需求,有一个【增加】按钮,用户每按一次,增加一个input输入框,要实现判断input框是否输入。但由于id一样,所以网上找了一些方法。
环境,JS:
// 处理加载 输入框
var pcInputIndex = 1 ;
function autoLoadInput(par) {
if(par != null && par != "") {
var html = "" ;
if(par == "pc") { // 处理批次按钮
var $pc = $("#pc") ;
html = "<tr id = 'pc_" + pcInputIndex + "' >" ;
html += "<td>" ;
html += "<input type='text' name='pcv' id='pcv' class='text' maxlength='200' style='width: 400px;' />" ;
html += " <a href=javascript:delAutoLoadInput('pc_',"+pcInputIndex+"); >删除</a>" ;
html += "</td>" ;
html += "</tr>" ;
$pc.append(html) ; // 添加元素
pcInputIndex ++ ;
}
}
}
html += "<input type='text' name='pcv" + pcInputIndex + "' id='pcv" + pcInputIndex + "' class='text' maxlength='200' style='width: 400px;' />" ;
JSP:
<tr>
<th>
批次号:
</th>
<td>
<input type="button" class="button" οnclick="autoLoadInput('pc') ;" value=" + 新增批次" />
</td>
</tr>
①最开始,想法是有动态的值pcInputIndex,那么input的id也可以动态设置。
于是:
html += "<input type='text' name='pcv" + pcInputIndex + "' id='pcv" + pcInputIndex + "' class='text' maxlength='200' style='width: 400px;' />" ;
然后我的判断方法就是:
function submitForm(n) {
if(n != "0") {
var pcn = $("table #pc").find("tr").length ;
if(pcn == null || pcn <= 0) {
$.message("warn","请填写商品进货批次信息 !");
return false;
}
if(pcInputIndex > 1){
for(var i = 1; i < pcInputIndex; i++){
var pcvId = 'pcv'+i;
var pcv = $("#"+pcvId+"").val();
if($("#"+pcvId+"").length > 0){
if(pcv == null || pcv == ""){
$("#"+pcvId+"").focus();
$.message("warn","请填写商品进货批次信息 !");
return false;
}
}
}
}
}
}
由于pcInputIndex只做了++处理,但是删除按钮没有做--处理,所以多了判断
if($("#"+pcvId+"").length > 0){
但是,后台代码也要随之改变,我想应该还有不变更的ID的方法。毕竟不想改动太大
// 批次号
String[] pcvs = null ;
// 判断是否草稿件
if(state.equals(ProductQuality.ProductQualityState.Quality_State_1.getCode())) {
// 批次号
pcvs = request.getParameterValues("pcv") ;
if(pcvs == null) {
return Constants.ERROR_VIEW;
}
// 此处代码省略
}
②于是又找到了这个方法,本来是很好的方法,简单明了,但是不知道为什么,明明方法可以进,光标都到位了,message却显示不出来,不知道是不是和作用域有关,现在的我还是懂的太少,只能记录下来,以后再解惑了
if(pcInputIndex > 1){
$('input[id="pcv"]').each(function(){
var pcv=$(this).val();
if(pcv == null || pcv == ""){
$(this).focus();
$.message("warn","请填写商品进货批次信息 !");
return false;
}
});
}
③网上找的也是ByName,我自己尝试了用ById,发现不行,最后还是这个方法,完美解决
if(pcInputIndex > 1){
var pcvs = document.getElementsByName("pcv");
var info = "";
for (var i = 0; i< pcvs.length; i++) {
info = pcvs[i].value;
if (info == null || info == "") {
pcvs[i].focus();
$.message("warn","请填写商品进货批次信息 !");
return false;
}
}
}