Javascript 在jsp页面中，单击“确认仅出现在第一行表单”按钮。在第二行表单提交中，它不会出现，并且执行我的ajax调用

我开发了SpringBootWeb应用程序，前端有JSP页面。 我在表中显示用户列表，并且在我的每一行中都有相应的操作（每个操作的表单），如更新、重置、删除等。在删除操作中，我首先显示确认消息。若用户按Ok，我将向控制器发出Ajax get调用，控制器将用户从数据库中删除，并返回状态0或1。我注意到，在第一次记录中，它显示确认，在OK时，它发送呼叫，并返回正确的响应。当我单击第二个记录删除按钮时，它不会显示确认消息并提交返回错误405 Get Method not supported的表单。我也没有观察到任何其他记录是按照行为工作的

我的JSP代码如下

我尝试了不同的方式来显示确认消息，比如onclick，我尝试过执行它，但结果是一样的。 我删除了所有其他js/css库，在我的页面上只删除了j query，但它会产生相同的输出。我还尝试创建一个简单的页面，并模拟它所显示的相同行为

<div id="disabledContent" class="container border rounded bg-light"
   style="margin-top: 5px; margin-bottom: 10px;">
   <form method="post" action="/createUserDetails">
      <button type="submit" value="Add User"
         class="btn btn-success btn-lg">+</button>
   </form>
   <table class="table table-light">
      <thead class="thead-light">
         <tr>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
            <th colspan="6" scope="col">Actions</th>
         </tr>
      </thead>
      <tbody>
         <c:forEach items="${userList}" var="item">
            <tr>
               <td>${item.firstName}</td>
               <td>${item.lastName}</td>
               <td>
                  <form method="post" action="/assignUserLicense">
                     <input type="hidden" name="userId" value="${item.id}">
                     <input type="hidden" name="customerUniqueId"
                        value="${customerUniqueId}">
                     <button type="submit" value="Assign License"
                        class="btn btn-warning">Assign License</button>
                  </form>
               </td>
               <td>
                  <form method="post" action="/unassignUserLicense">
                     <input type="hidden" name="userId" value="${item.id}">
                     <input type="hidden" name="customerUniqueId"
                        value="${customerUniqueId}">
                     <button type="submit" value="UnAssign License"
                        class="btn btn-warning">Unassign License</button>
                  </form>
               </td>
               <td>
                  <form method="post" action="/modifyUserDetails"
                     id="modifyUserDetailsForm">
                     <input type="hidden" name="userId" id="userId"
                        value="${item.id}"> <input type="hidden"
                        name="customerUniqueId" id="customerUniqueId"
                        value="${customerUniqueId}"> <input type="hidden"
                        name="displayName" id="displayName"
                        value="${item.displayName}"> <input type="hidden"
                        name="userPrincipalName" id="userPrincipalName"
                        value="${item.userPrincipalName}"> <input
                        type="hidden" name="firstName" id="firstName"
                        value="${item.firstName}"> <input type="hidden"
                        name="lastName" id="lastName" value="${item.lastName}">
                     <button type="submit" value="Modify User"
                        class="btn btn-warning">Modify User</button>
                  </form>
               </td>
               <td>
                  <form method="post" action="/resetUserUserDetails">
                     <input type="hidden" name="userId" value="${item.id}">
                     <input type="hidden" name="customerUniqueId"
                        value="${customerUniqueId}">
                     <button type="submit" value="Get User"
                        class="btn btn-warning">Reset Password</button>
                  </form>
               </td>
               <td>
                  <form id="myDeleteFrom">
                     <input type="hidden" name="userId" value="${item.id}">
                     <input type="hidden" name="customerUniqueId"
                        value="${customerUniqueId}">
                     <button type="submit" value="Get User"
                        class="btn btn-warning">Delete User</button>
                  </form>
               </td>
            </tr>
         </c:forEach>
      </tbody>
   </table>
   <div></div>
</div>

---

我希望它能在任何一行上运行。单击“删除表单”“提交”按钮。

每一行都有一个id为“myDeleteFrom”的按钮。ID是唯一的，对于多个元素不能相同。为按钮分配一个类，并通过使用类来引用每个按钮以使其独立工作。标签的形式中没有

操作

属性delete@KamleshBhurke当我点击按钮时，我的表单字段上有id，我的表单是由上面javascript代码中的jquery处理的。@NawedKhan，我怀疑也是这样。我已经删除了jquery并尝试使用javascript onclick执行相同的操作，我在这里调用了一些函数，我可以显示确认消息，但我注意到的一点是，我的用户ID保持不变。然而，我已经创建了另一个页面，从这里我发送了post请求，并查看了另一个页面上的数据，它显示了每个记录的正确用户id。但当我尝试通过javascript/jquery执行此操作时，它会为每个记录返回相同的id。这与jquery或javascript无关。jsp正在创建行，每个表单都有相同的id。更改为。然后将$（“#myDeleteFrom”）更改为$（“.myDeleteFrom”）

                    $("#myDeleteFrom")
                            .submit(
                                    function() {
                                        var confirmResponse = confirm("Are you sure you want to delete this user");

                                        if (confirmResponse) {
                                            //Ajax get call 
                                        } else {
                                            return false;
                                        }
                                    });
                });