从 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

我已经用三行做了一些静态解决方法（用于循环）。对你有帮助。

为表提供 id，而不是直接附加值，我调用函数并为您的 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。如果你需要我可以解释更多。希望这会有所帮助。

更新：

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