CODEWITHSUNDEEP
javajavascriptjsp
Java Curious ღ
Java Curious ღ

Reputation: 3692

How to give different id to textbox run time?

I have used only single textbox and put it in loop so it will create multiple tetxbox.

I a receiving data from servlet i.e. list of items(cart items) and displaying it on jsp page.

JSP Code :

<% 

        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>             
            <%                      
        }
%>

so this will create dynamic data and display on page. I have used 2 functions on that page to call servlet and set quantity :

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();
        });
    }

so when updateqty() function calls it takes value of first textbox and pass it to servlet but I want that it will take value of that only tetxbox which is clicked. In short it takes first tetxbox value whether I click on last item tetxbox or any middle.

Page Screenshot

enter image description here

So any help Please...

Upvotes: 0

Views: 1101

Answers (2)

Neha
Neha

Reputation: 1548

When u generating id's made them dynamic like var tid = "T"+i; and @ anchor click use same id in parameter - updateProductById(<%= p.getpId() %>,updateqty(tid)); 

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

At the JSP loop where you adding the id and func do this ..

<% 
    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++;                     
    }
%>

Upvotes: 1

KhAn SaAb
KhAn SaAb

Reputation: 5376

instead of id use this try 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();
    });
}

dynamically setting id

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

Upvotes: 0

Related Questions