Get value from html input field - html

Question

How I can get the value of input with id="new_amount" and put it properly in Change amount url path. What I am trying right now is obviously not correct:
<td>
<input type="button"
onclick="location.href='${pageContext.request.contextPath}/update?id=${object.id}&?amount=${document.getElementById("new_amount").value}';"
value="Change Amount" />
</td>
Can someone please help me.
<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

I have done some static workaround (for looping) with three rows. It will be helpful to you.
Give id to table, Instead of appending the value directly I am calling function and use hidden value for your object_id. Also added class to the element to find that(ID is not good idea for repeated elements).
All you need to do is, change static values with your JSTL code.
<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>
Use these functions to get values of clicked row,
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);
}
See the Demo. If you required I can explain more. Hope this helps.
Update :
In HTML,
Your actual requirement is looks like below, I have done this using JSTL
<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';
}