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

私は3行で（ループ用）いくつかの静的な回避策を行っています。それはあなたに役立つでしょう。

テーブルに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'; 
}