求助！如何用js实现页面输入元素自动累加判断？

qq1212 2009-10-21 02:43:04

我想实现如下功能：表格自动生成5个文本输入框vol+i，我在这些文本框中输入数字，用js判断这些数字累加是否超过了assgVol的值，如果超过了报错，否则可以继续输入。

下面的代码我写了一半不知道如何操作下去了。我尝试使用hidden域tt保存已经填写的文本框的总计，但是数值总是保存不起来，哪位大侠能教教我该怎么处理了？

举例：assgVol为27，我在这5个动态生成的text文本框中输入数值，当已经填写的数值总和超过了27则报错，否则允许继续填写。



function setPerc(value) {

	if(Number(value) > Number(document.all.assgVol.value)) {

		alert("输入数量大于总量");

		return;

	}



	var ttv = document.getElementById("tt").value;

	ttv = ttv*1+value*1;

        alert(ttv);

}



<td><input type="text" name="assgVol" value="27"></td>

<% for (int i=0; i<5; i++) { %>

<td>

    <input type="hidden" id="tt" name="tt" value="">

    <input type="text" name="vol<%=i%>" value="" onchange="setPerc(this.value)">

</td>

<% } %>

...全文

245 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

develop_design_level 2009-10-22

打赏
举报

10楼是我按照你的需求新写的一个完整的JSP页面，拿过来就可以用。你可以试一试。
—— 要是能用，记得给分哦 ——

develop_design_level 2009-10-22

打赏
举报



<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    

    <title>My JSP 'test.jsp' starting page</title>

    

	<meta http-equiv="pragma" content="no-cache">

	<meta http-equiv="cache-control" content="no-cache">

	<meta http-equiv="expires" content="0">    

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<meta http-equiv="description" content="This is my page">



<script type="text/javascript">

	function setPerc(obj){

		/*

			进行数字校验

		 */

		var regExp = /^\d+$/g;

	    var isNumber = regExp.test(obj.value);

	    if(!isNumber){

	    	alert('请输入数字！');

	    	obj.value = '';

	    	obj.focus();

	    	return;

	    }

		var totalValue = parseInt(document.getElementById('assgVolId').value);

		var compareValue = 0;//定义全局变量，用来进行比较的

		

		for(var i = 0 ; i < 5 ; i++){

			var tempValue = document.getElementById('testId' + i ).value;//根据ID得到数值

			if(tempValue == '' || tempValue == null){

				tempValue = 0;

			}else{

				tempValue = parseInt(tempValue);

			}

			compareValue = compareValue + tempValue;

		}

		

		if(compareValue > totalValue){

			alert('总数是： ' + totalValue + '，输入的数字之和已经超过总数！');

			return;

		}

	}

</script>



  </head>

  

  <body>

  <table style="width:800;border:1 solid black;">

  	<tr>

  		<td><input type="text" id="assgVolId" name="assgVol" value="27"/></td>

  		<%for(int i = 0 ; i < 5 ; i++){ %>

  		<td>

  			<input type="text" id="testId<%=i %>" name="vol<%=i %>" onkeyup="setPerc(this)">

  		</td>	

  		<%} %>

  	</tr>

  </table>

  </body>

</html>

jinjing_0316 2009-10-22

打赏
举报

这样应该是NAN的问题，你在累加的时候会将字符转化成数字，“”无法转换。

kyzy_yy_pm 2009-10-22

打赏
举报

用ajax

qq1212 2009-10-22

打赏
举报

如何解决呢？

qq1212 2009-10-21

打赏
举报

还是有问题比如我输入25，5报错了我把第一个25改成5 可是照样还是报错还是不行啊

qq1212 2009-10-21

打赏
举报

奇怪了那我原来写的为什么不可以？

likejun45 2009-10-21

打赏
举报

转换一下就好啦
Number(document.getElementById("tt").value=document.getElementById("tt").value)+Number(value )这个就是不字符串相加是数字相加了如果还需要转换成字符串直接toString（）就可以了

qq1212 2009-10-21

打赏
举报

楼上你这样就相当于只是一个简单的字符串拼接
document.getElementById("tt").value=document.getElementById("tt").value+value
这句不行的
2+2!=4而等于22

zhong2006 2009-10-21

打赏
举报

<td><input type="text" name="assgVol" value="27"></td>
<input type="hidden" id="tt" name="tt" value="0">
<% for (int i=0; i<5; i++) { %>
<td>
<input type="text" name="vol<%=i%>" value="" onchange="setPerc(this.value)">
</td>
<% } %>

function setPerc(value)
{
document.getElementById("tt").value=document.getElementById("tt").value+value
if(document.getElementById("tt").value.>document.all.assgVol.value)
{
alert("总和大于27");
}
}

zhong2006 2009-10-21