日期:2014-05-16  浏览次数:20615 次

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;
//创建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 a = document.getElementById("tb1").value;
var b = document.getElementById("tb2").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) {
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