如何为文本框运行时赋予不同的id?

时间:2013-12-11 13:09:52

标签: java javascript jsp

我只使用了单个文本框并将其放入循环中,因此它将创建多个tetxbox。

我从servlet接收数据,即项目列表(购物车项目)并在jsp页面上显示。

JSP代码:

<% 

        List<Product> prodList = (List<Product>)request.getAttribute("productList");        
        Float totalbill = 0.0f;
%>

<% 
        for(Product p : prodList)
        {           
                    %>
            <tr >
              <td width="226" rowspan="3" ><img src="product_images/<%=p.getpImage() %>" width="100px" height="100px" alt="No Image" /></td>
              <td colspan="7" ><%= p.getpName() %><a onclick="removeProductById(<%= p.getpId()%>);" title="Remove From Cart" > <img alt="" src="images/delete.png" height="25px" width="25px"></a></td>
              </tr>
            <tr style="height: 28px;">
              <td colspan="6" ><div align="right"><%=p.getpPrice() %>0 &nbsp;&nbsp;&nbsp; x &nbsp;&nbsp;&nbsp; </div></td> 
              <td style="border-left:0px;"> <input type="text" value="<%=p.getQty() %>"  id="txtqty" name="txtqty"><a onclick="updateProductById(<%= p.getpId() %>,updateqty());" href="#"  title="Update Quantity"> <img alt="Updt" src="images/updatecart.png" height="25px" width="25px"> </a></td>
              </tr>
            <tr style="height: 28px;">
              <td colspan="7" style="padding-right: 10px;font-size:15px;"><div align="center">Sub Total : &nbsp;&nbsp;&nbsp;<%=p.getQty() * p.getpPrice() %>0</div></td>

              <% totalbill= totalbill +  p.getQty() * p.getpPrice();%>
              </tr>             
            <%                      
        }
%>

所以这将创建动态数据并在页面上显示。 我在该页面上使用了2个函数来调用servlet并设置数量:

function updateqty()
    {
        var qty = document.getElementById("txtqty").value;
        return qty;
    }

    function updateProductById(pId,pqty)
    {
        var qty = document.getElementById("txtqty").value;
        $.getJSON("updatecart?pid=" + pId + "&minqty="+ pqty +"&rand=" + Math.floor((Math.random()*100)+1), function(json) {
            alert(json.msg);
            window.location.reload();
        });
    }

所以当updateqty()函数调用时,它会获取第一个文本框的值并将其传递给servlet但是我希望它只取得那个被点击的tetxbox的值。 简而言之,无论我点击最后一项tetxbox还是任何中间,它都需要第一个tetxbox值。

页面截图

enter image description here

所以任何帮助请...

2 个答案:

答案 0 :(得分:1)

当你生成id时,它们就像var tid =“T”+ i一样动态;和@锚点击在参数中使用相同的id - updateProductById(&lt;%= p.getpId()%&gt;,updateqty(tid));

function updateqty(id)
{
    var qty = document.getElementById(id).value;
   return qty;
}

在你添加id和func的JSP循环中执行此操作..

<% 
    String id ="T";int i=0;
    for(Product p : prodList)
    {           
                %>
        <tr >
          <td width="226" rowspan="3" ><img src="product_images/<%=p.getpImage() %>" width="100px" height="100px" alt="No Image" /></td>
          <td colspan="7" ><%= p.getpName() %><a onclick="removeProductById(<%= p.getpId()%>);" title="Remove From Cart" > <img alt="" src="images/delete.png" height="25px" width="25px"></a></td>
          </tr>
        <tr style="height: 28px;">
          <td colspan="6" ><div align="right"><%=p.getpPrice() %>0 &nbsp;&nbsp;&nbsp; x &nbsp;&nbsp;&nbsp; </div></td> 
          <td style="border-left:0px;"> <input type="text" value="<%=p.getQty() %>"  id="<%=id+i%>" name="txtqty"><a onclick="updateProductById(<%= p.getpId() %>,updateqty('<%=id+i%>'));" href="#"  title="Update Quantity"> <img alt="Updt" src="images/updatecart.png" height="25px" width="25px"> </a></td>
          </tr>
        <tr style="height: 28px;">
          <td colspan="7" style="padding-right: 10px;font-size:15px;"><div align="center">Sub Total : &nbsp;&nbsp;<%=p.getQty() * p.getpPrice() %>0</div></td>

          <% totalbill= totalbill +  p.getQty() * p.getpPrice();%>
          </tr>             
        <% 
        i++;                     
    }
%>

答案 1 :(得分:0)

而不是id使用this试试这个

function updateqty()
{
    var qty = document.getElementById(this).value;
    return qty;
}

function updateProductById(pId,pqty)
{
    var qty = document.getElementById(this).value;
    $.getJSON("updatecart?pid=" + pId + "&minqty="+ pqty +"&rand=" + Math.floor((Math.random()*100)+1), function(json) {
        alert(json.msg);
        window.location.reload();
    });
}

动态设置ID

<td style="border-left:0px;"> <input type="text" value="<%=p.getQty() %>" id="<%=p.getQty() %>" name="txtqty">