需要获得一组具有相同的ID和name的input的几种尝试

如题,由于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;
		}
	}
}







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值