2个相同name值的INPUT如何做无刷新加法运算 - Web 开发 / Ajax
目前我有2个INPUT框，里面没有ID，只有NAME属性，并且2个NAME属性值都相同，如何用AJAX做无刷新加法求和运算？
如果是2个ID属性值不同的我会，但是我要求的是没有ID只有NAME属性
实际情况是循环出N个INPUT，其NAME属性值相同，无ID属性值，在同一页面对INPUT中的数据进行修改，最后在该页面中显示修改后数据相加总和，麻烦各位了，谢谢
以下是2个不同ID属性值的AJAX无刷新运算代码test.asp和test1.asp
- VB code
<script type="text/javascript" language="javascript">var xmlHttp;//创建XHRfunction createXmlHttpRequest() {//非IEif (window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();if (xmlHttp.overrideMimeType) {xmlHttp.overrideMimeType("text/xml");}}//IEelse if (window.ActiveXObject) {try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");}catch (e) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}}if (!xmlHttp) {window.alert("你的浏览器不支持创建XMLhttpRequest对象");}return xmlHttp;}//实现function addNumber() {var a = document.getElementById("tb1").value;var b = document.getElementById("tb2").valuecreateXmlHttpRequest();var url = "test1.asp?a1=" + a + "&a2=" + b;//发送请求的页面。在该页面返回所需的xmlHttp.open("GET",url,true);//打开xmlHttp.onreadystatechange = showResult;//处理xmlHttp.send(null);}//处理过程function showResult() {if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) {document.getElementById("tb3").value = xmlHttp.responseText;}else if(xmlHttp.status == 404) {alert(xmlHttp.responseText);}}}</script> <form id="form1"> <div> <table> <tr><td><p>加法运算:</p></td></tr> <tr> <td><input type="text" id="tb1" name="tb1" value="0" onkeyup="addNumber()" /></td> <td>+</td> <td><input type="text" id="tb2" name="tb2" value="0" onkeyup="addNumber()" /></td> <td>=</td> <td><input type="text" id="tb3" name="tb3" /></td> </tr> </table> </div> </form>- VB code
<%aa = Request.QueryString("a1")bb = Request.QueryString("a2")cc = cdbl(aa) + cdbl(bb)Response.Write cc%>[解决办法]
用数组方式引用同name的字段
var a = document.form1.xxx[0].value;
var b = document.form1.xxx[1].value
[解决办法]
if(document.form1.xxx.length){
for(var i=0;i<document.form1.xxx.length;i++){
document.form1.xxx[i].value;
}
else document.form1.xxx.value;
[解决办法]
<script type="text/javascript" language="javascript">
var xmlHttp;
//创建XHR
function createXmlHttpRequest() {
//非IE
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
if (xmlHttp.overrideMimeType) {
xmlHttp.overrideMimeType("text/xml");
}
}
//IE
else if (window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (!xmlHttp) {
window.alert("你的浏览器不支持创建XMLhttpRequest对象");
}
return xmlHttp;
}
//实现
function addNumber() {
var tb = document.getElementsByName('tb');
createXmlHttpRequest();
var url = "test1.asp?a1=" + tb[0].value + "&a2=" + tb[1].value;//发送请求的页面。在该页面返回所需的
xmlHttp.open("GET",url,true);//打开
xmlHttp.onreadystatechange = showResult;//处理
xmlHttp.send(null);
}
//处理过程
function showResult() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
document.getElementById("tb3").value = xmlHttp.responseText;
}
else if(xmlHttp.status == 404) {
alert(xmlHttp.responseText);
}
}
}
</script>
<form id="form1">
<div>
<table>
<tr><td><p>加法运算:</p></td></tr>
<tr>
<td><input type="text" name="tb" value="0" onkeyup="addNumber()" /></td>
<td>+</td>
<td><input type="text" name="tb" value="0" onkeyup="addNumber()" /></td>
<td>=</td>
<td><input type="text" id="tb3" name="tb3" /></td>
</tr>
</table>
</div>
</form>
[解决办法]
用jquery来做
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">
var xmlHttp;
//创建XHR
function createXmlHttpRequest() {
//非IE
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
if (xmlHttp.overrideMimeType) {
xmlHttp.overrideMimeType("text/xml");
}
}
//IE
else if (window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (!xmlHttp) {
window.alert("你的浏览器不支持创建XMLhttpRequest对象");
}
return xmlHttp;
}
//实现
function addNumber() {
var obj = $("input[name='tb1']")
var a = obj.get(0).value;
var b = obj.get(1).value;
createXmlHttpRequest();
var url = "test1.asp?a1=" + a + "&a2=" + b;//发送请求的页面。在该页面返回所需的
xmlHttp.open("GET",url,true);//打开
xmlHttp.onreadystatechange = showResult;//处理
xmlHttp.send(null);
}
//处理过程
function showResult() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
$("input[name='tb1']").get(2).value = xmlHttp.responseText;
}
else if(xmlHttp.status == 404) {
alert(xmlHttp.responseText);
}
}
}
</script>
</head>
<body>
<form id="form1">
<div>
<table>
<tr><td><p>加法运算:</p></td></tr>
<tr>
<td><input type="text" id="tb1" name="tb1" value="0" onkeyup="addNumber()" /></td>
<td>+</td>
<td><input type="text" id="tb2" name="tb1" value="0" onkeyup="addNumber()" /></td>
<td>=</td>
<td><input type="text" id="tb3" name="tb1" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>