javascript隨者表單而改變值的問題

jackytu256

<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>&nbsp;</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

因為你的 checkamount 也是在迴圈中輸出的，所以最簡單的方式就是如同 div 給不同的 i 一樣，把 i 給帶入 checkamount ()：

onchange="checkamount(<%=i%>);"> 

這樣你就知道應該 update 哪一個 div 了

PS. 附帶一提，你的 <tr> 前後都不需要放 br，br 標籤也錯了，應該是 <br />

JS領事

問一下
<% %>
是什麼= =?

wmh

這是嵌入 ASP.NET 的語法，和 PHP 預設的 <? ?> 是相似的

jackytu256

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

這時候你的 checkamount 就可以接變數 i，不過因為你的 update 的程式片段在 callback  內，所以你可以先把 i 存起來，最簡單的方式就是存在全域變數，等  calllback 時就知道要update 哪個 div 了。

不過，再仔細看了一下，由於你的 request 允許非同步執行，如果網路速度比較慢，單用一個全域變數儲存 i 可能不行，會造成 update 欄位的混亂。這時你可能要把 callback 直接定義在 checkamount  裡面，讓每個 callback 都分別記住不同的 i ，這樣才不會造成 update 的混亂。

function checkamount(i) {  
  //接到 i 了, 後續可利用
  function callback() {
    ...
  }
  ...
}

jackytu256

謝謝您~這問題已經基本解決了....真的很謝謝!!!

jackytu256

再請問一下.....要怎麼可以動態刪除我的表單呢.....?

<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>&nbsp;</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>&nbsp;</p>
<p>&nbsp;</p>
</html>

謝謝

[ 本帖最後由 jackytu256 於 2009-9-3 11:44 編輯 ]