標題: javascript隨者表單而改變值的問題 [打印本頁]
作者: jackytu256 時間: 2009-8-29 16:21 標題: javascript隨者表單而改變值的問題
<script type="text/javascript">
var xmlHttp = createXmlHttp();
var strAmount = "";
function getfocus() {
document.getElementById("qty").focus();
}
function createXmlHttp() {
var xhr;
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e1) {
try {
xhr = new XMLHttpRequest();
} catch (e2) {
xhr = null;
}
}
}
return xhr;
}
//連線到servlet去做小計的計算
function checkamount() {
//document.getElementById("loding").innerHTML = '<img src="loading.gif" />';
alert("arg");
var qty = document.getElementById("qty").value;
if (qty != strAmount) {
alert("qty=[" + qty + "]\n" + "strAmount=[" + strAmount + "]");
strAmount = qty;
var url = "ProductServlet?qty=" + qty;
xmlHttp = createXmlHttp();
xmlHttp.onreadystatechange = callback;
xmlHttp.open("GET", url);
xmlHttp.send(null);
}
}
//假如連線完成就執行以下的動作
function callback() {
//document.getElementById("Loding").innerHTML = "";
if (xmlHttp != null) {
alert("xmlHttp.readyState=[" + xmlHttp.readyState + "]");
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
alert("bb");
var text = xmlHttp.responseText;
document.getElementById("amount"+i).innerHTML = text;
} else {
alert("Error");
}
}
}
</script>
<%
//讓商品會應使用者點擊而自動產生
cart.add(Product.clone());
System.out.println(Product.getId());
for (int i = 0; i < cart.size(); i++) {
Product p = (Product) cart.get(i);
out.print("</br><tr>");
%>
<td><%=p.getName()%></td>
<td> </td>
<td><label> <select name="qty" id="qty<%=i%>"
onchange="checkamount();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select> </label></td>
<td>NT$:<%=p.getPrice()%></td>
<td>
<div id="amount<%=i%>">NT$:<%=p.getAmount()%></div>
</td>
<td><label> <%=p.getInventory()%> <input type="submit"
name="取消" id="取消" value="取消" /> </label></td>
</tr>
<%
out.print("</tr></br>");
}
%>
</table>請問要如何讓callback()裡面的document.getElementById("amount").innerHTML 會隨者我的div來做變動??
謝謝!!!
作者: wmh 時間: 2009-8-30 17:02
因為你的 checkamount 也是在迴圈中輸出的，所以最簡單的方式就是如同 div 給不同的 i 一樣，把 i 給帶入 checkamount ()：
onchange="checkamount(<%=i%>);">
這樣你就知道應該 update 哪一個 div 了
PS. 附帶一提，你的 <tr> 前後都不需要放 br，br 標籤也錯了，應該是 <br />
作者: JS領事 時間: 2009-8-30 17:51
問一下
<% %>
是什麼= =?
作者: wmh 時間: 2009-8-30 18:53
這是嵌入 ASP.NET 的語法，和 PHP 預設的 <? ?> 是相似的
作者: jackytu256 時間: 2009-8-30 21:46
function checkamount() {
//document.getElementById("loding").innerHTML = '<img src="loading.gif" />';
alert("arg");
var qty = document.getElementById("qty");
if (qty != strAmount) {
alert("qty=[" + qty + "]\n" + "strAmount=[" + strAmount + "]");
strAmount = qty;
var url = "ProductServlet?qty=" + qty;
xmlHttp = createXmlHttp();
xmlHttp.onreadystatechange = callback;
xmlHttp.open("GET", url);
xmlHttp.send(null);
}
}那請問一下我checkamount 裡面加了i,那我在var qty = document.getElementById("qty");這邊如何也可以隨者div變數而作改變呢???
作者: wmh 時間: 2009-8-31 01:58
這時候你的 checkamount 就可以接變數 i，不過因為你的 update 的程式片段在 callback 內，所以你可以先把 i 存起來，最簡單的方式就是存在全域變數，等 calllback 時就知道要update 哪個 div 了。
不過，再仔細看了一下，由於你的 request 允許非同步執行，如果網路速度比較慢，單用一個全域變數儲存 i 可能不行，會造成 update 欄位的混亂。這時你可能要把 callback 直接定義在 checkamount 裡面，讓每個 callback 都分別記住不同的 i ，這樣才不會造成 update 的混亂。
function checkamount(i) {
//接到 i 了, 後續可利用
function callback() {
...
}
...
}
作者: jackytu256 時間: 2009-8-31 17:44
謝謝您~這問題已經基本解決了....真的很謝謝!!!
作者: jackytu256 時間: 2009-9-1 11:14
再請問一下.....要怎麼可以動態刪除我的表單呢.....?<script type="text/javascript">
var xmlHttp = createXmlHttp();
var strAmount = "";
function getfocus() {
document.getElementById("qty").focus();
}
function createXmlHttp() {
var xhr;
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e1) {
try {
xhr = new XMLHttpRequest();
} catch (e2) {
xhr = null;
}
}
}
return xhr;
}
function callback() {
//document.getElementById("Loding").innerHTML = "";
if (xmlHttp != null) {
alert("xmlHttp.readyState=[" + xmlHttp.readyState + "]"+"xmlHttp.Status=[" + xmlHttp.status + "]");
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
alert("bb");
var text = xmlHttp.responseText;
if(text != "" ){
document.getElementById("amount"+i).innerHTML = text;
}
} else {
alert("Error");
}
}
}
}
function deProduct(i){
alert("Delect");
var deProduct = document.getElementById("deProduct"+i).value;
alert("deProduct=["+deProduct+"]");
if(deProduct!= null){
var url = "DProServlet?deProduct="+ deProduct;
alert(url);
xmlHttp = createXmlHttp();
xmlHttp.onreadystatechange = decallback;
xmlHttp.open("GET", url);
xmlHttp.send(null);
}
function decallback() {
//document.getElementById("Loding").innerHTML = "";
if (xmlHttp != null) {
alert("xmlHttp.readyState=[" + xmlHttp.readyState + "]"+"xmlHttp.Status=[" + xmlHttp.status + "]");
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
alert("bb");
document.getElementById('myTable').deleteRow(i);
} else {
alert("Error");
}
}
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body onload="getfocus();">
<table id="myTable" width="523" height="127" border="1">
<tr>
<td width="121" height="38">商品名稱</td>
<td width="62">規格</td>
<td width="62">數量</td>
<td width="81">單價</td>
<td width="62">小計</td>
<td width="95">可買量</td>
</tr>
<%
//讓商品會應使用者點擊而自動產生
boolean dup = false;
for (int i = 0; i < cart.size(); i++) {
Product p = (Product) cart.get(i);
if (p.getId() == Product.getId())
dup = true;
}
if (dup == false)
cart.add(Product.clone());
//System.out.println(Product.getId());
for (int i = 0; i < cart.size(); i++) {
Product p = (Product) cart.get(i);
//out.println("*" + Product.getId() + "*");
out.println("</Br>");
out.print("<tr>");
%>
<tr id="Tr<%=i%>">
<td><%=p.getName()%></td>
<td> </td>
<td><label> <input type="hidden" id="prid<%=i%>"
value=<%=p.getId()%>></input>
<input type="hidden" id="deProduct<%=i%>"
value=<%=i%>></input>
<select name="qty" id="qty<%=i%>"
onchange="checkamount(<%=i%>);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select> </label></td>
<td>NT$:<%=p.getPrice()%></td>
<td>
<div id="amount<%=i%>">NT$:<%=p.getAmount()%></div>
</td>
<td><label> <%=p.getInventory()%> <input type="submit"
name="取消" id="取消" value="取消" onclick="deProduct(<%=i %>)" /> </label></td>
</tr>
<%
out.print("</tr>");
}
%>
</table>
<div id="totalamount">總金額:<%=Product.getTotalamount()%></div>
<td><a href="add.jsp" />購買</a></td>
</Br>
<td><a href="List.jsp" />繼續購買</a></td>
<p> </p>
<p> </p>
</html>謝謝
[ 本帖最後由 jackytu256 於 2009-9-3 11:44 編輯 ]
| 歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/) |
|