Получить значение из поля ввода html

Question

Как я могу получить значение ввода с id="new_amount" и правильно поместить его в поле URL-адрес для изменения количества. То, что я пытаюсь прямо сейчас, очевидно, неверно:

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

Может кто-то, пожалуйста, помогите мне.

<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

Я сделал некоторый статический обходной путь (для зацикливания) с тремя рядами. Это будет полезно для вас.

Дать идентификатор таблице, вместо того, чтобы добавлять значение непосредственно Я вызываю функцию и использую скрытое значение для вашего object_id. Также добавлен класс для элемента, чтобы найти, что (ID не является хорошей идеей для повторяющихся элементов).

Все что вам нужно сделать, изменить статические значения с помощью кода JSTL.

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

Используйте эти функции, чтобы получить значения щелкнули строки,

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

См Demo. Если вам нужно, я могу объяснить больше. Надеюсь это поможет.

Update:

В HTML Ваше фактическое требование выглядит, как показано ниже, я сделал это с использованием 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> 

В скрипте,

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'; 
}