Holen Wert von HTML-Eingabefeld

Question

Wie kann ich den Wert der Eingabe mit id="new_amount" bekommen und es richtig in Änderungsbetrag URL-Pfad. Was ich gerade versuche ist offensichtlich nicht korrekt:

<td> 
    <input type="button" 
onclick="location.href='${pageContext.request.contextPath}/update?id=${object.id}&?amount=${document.getElementById("new_amount").value}';" 
value="Change Amount" /> 
</td> 

Kann mir bitte jemand helfen.

<table class=goods> 
<tr> 
    <td>Name</td> 
    <td>Amount</td> 
</tr> 
<c:forEach var="object" items="${goods}"> 
    <tr> 
     <td id="name"><c:out value="${object.name}"></c:out></td> 
     <td id="amount"><c:out value="${object.amount}"></c:out></td> 
     <td id="new_amount"><p>New amount:</p> <input type="number" id="new_amount" /></td> 
     <td><input type="button" 
      onclick="location.href='${pageContext.request.contextPath}/update?id=${object.id}&?amount=${document.getElementById("new_amount").value}';" value="Change Amount" /></td> 
     <td><input type="button" onclick="location.href='${pageContext.request.contextPath}/delete?id=${object.id }';" value="Delete"/></td> 
    </tr> 
</c:forEach> 
<tr> 
    <td><a href="${pageContext.request.contextPath }/addgoods">Add new 
     goods</a></td> 
</tr> 

Answer 1

Ich habe einige statische Abhilfe (für Looping) erfolgt mit drei Reihen. Es wird dir hilfreich sein.

ID an Tabelle übergeben, anstatt den Wert direkt anzufügen, rufe ich Funktion auf und verwende versteckten Wert für Ihre object_id. Auch Klasse hinzugefügt, um das Element zu finden (ID ist keine gute Idee für wiederholte Elemente).

Alles, was Sie tun müssen, ist statische Werte mit Ihrem JSTL Code zu ändern.

<table id="goods"> 
    <tr> 
     <th>Name</th> 
     <th>Amount</th> 
     <th>New Amount</th> 
     <th>Actions</th> 
    </tr> 
    <tr> 
     <td>test1</td> 
     <td>100</td> 
     <td><input type="number" name="new_amount" class="amount" /></td> 
     <td><input type="button" onclick="updateObject(this)" value="Edit" />/<input type="button" onclick="deleteObject(this)" value="Delete"/></td> 
     <input type="hidden" value="1" class="goods_id" /> 
    </tr> 
    <tr> 
     <td>test2</td> 
     <td>200</td> 
     <td><input type="number" name="new_amount" class="amount" /></td> 
     <td><input type="button" onclick="updateObject(this)" value="Edit" />/<input type="button" onclick="deleteObject(this)" value="Delete"/></td> 
     <input type="hidden" value="2" class="goods_id" /> 
    </tr> 
    <tr> 
     <td>test3</td> 
     <td>300</td> 
     <td><input type="number" name="new_amount" class="amount" /></td> 
     <td><input type="button" onclick="updateObject(this)" value="Edit" />/<input type="button" onclick="deleteObject(this)" value="Delete" /></td> 
     <input type="hidden" value="3" class="goods_id" /> 
    </tr> 
</table> 

diese Funktionen können Sie die Werte von geklickt Reihe bekommen,

window.updateObject = function(object){ 
    // Get nearest text box values based on class. 
    var object_id = $(object).closest('tr').find('.goods_id').val(); 
    var amount = $(object).closest('tr').find('.amount').val(); 
    alert("ID : "+object_id+" Amount :"+amount); 
} 

window.deleteObject = function(object){ 
    var object_id = $(object).closest('tr').find('.goods_id').val(); 
    alert("ID : "+object_id); 
} 

Siehe Demo. Wenn Sie benötigt werden, kann ich mehr erklären. Hoffe das hilft.

Update:

In HTML, Ihre tatsächlichen Bedarf wie unten aussieht, ich diese JSTL Verwendung getan haben

<table id="goods"> 
<tr> 
    <td>Name</td> 
    <td>Amount</td> 
    <td>New Amount</td> 
    <td>Actions</td> 
</tr> 
<c:forEach var="object" items="${goods}"> 
    <tr> 
     <td><c:out value="${object.name}"></c:out></td> 
     <td><c:out value="${object.amount}"></c:out></td> 
     <td><p>New amount:</p> <input type="number" id="new_amount" class="amount" /></td> 
     <td><input type="button" onclick="updateObject(this)" value="Change Amount" />/
      <input type="button" onclick="deleteObject(this)" value="Delete"/></td> 
     <input type="hidden" value="${object.id}" class="goods_id" /> 
    </tr> 
</c:forEach> 
<tr> 
    <td><a href="${pageContext.request.contextPath }/addgoods">Add new 
     goods</a></td> 
</tr> 

In Script,

window.updateObject = function(object){ 
    // Get nearest text box values based on class. 
    var object_id = $(object).closest('tr').find('.goods_id').val(); 
    var amount = $(object).closest('tr').find('.amount').val(); 
    //alert("ID : "+object_id+" Amount :"+amount); 
    location.href='${pageContext.request.contextPath}/update?id=object_id&?amount=amount'; 
} 

window.deleteObject = function(object){ 
    var object_id = $(object).closest('tr').find('.goods_id').val(); 
    //alert("ID : "+object_id); 
    location.href='${pageContext.request.contextPath}/delete?id=object_id'; 
}