HTML中<button>/<input>点击原理及Servlet按钮参数判断问询

Hey there! Let's tackle your questions one by one, starting with the HTML button behavior, then moving to your Servlet logic issue.

When you click one of these elements, here's the step-by-step flow:

• First, the click event is triggered: If the element has an onclick attribute (like your Remove button with the alert), that JavaScript code runs first.
• If it's a submit-type button (<button type="submit"> or <input type="submit">) inside a <form>:
  • The browser collects all form controls with a name attribute from the form.
  • It sends a request to the URL specified in the form's action attribute, using the method (GET/POST) defined.
    • For GET requests: Parameters are appended to the URL as query strings.
    • For POST requests: Parameters are sent in the request body.
  • Crucially: Only the clicked submit button's name and value are included in the request parameters. Other buttons in different forms (or even the same form, if not clicked) won't be sent.
• If it's a regular button (type="button"): It won't trigger a form submit by default—only the code in its onclick handler runs.

Looking at your JSP code, you've got each button in its own form: Update uses POST to updateEmployee, and Remove uses GET to the same URL. Good news—your fear of both button values being sent is unfounded! Because each button is in a separate form, clicking one only sends that button's parameters to the server.

Here's how to handle this in your Servlet:

Option 1: Use the request method (matches your current setup) #

Since Update uses POST and Remove uses GET, you can handle them in the respective doPost and doGet methods:

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // Handle Update: only triggered when the Update button is clicked
    String companyId = request.getParameter("editButton");
    if (companyId != null) {
        // Run your update logic here using companyId
    }
}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // Handle Remove: only triggered when the Remove button is clicked
    String companyId = request.getParameter("delButton");
    if (companyId != null) {
        // Run your delete logic here using companyId
    }
}

Option 2: Optimize with a single form (cleaner markup) #

If you want to simplify your JSP, you can put both buttons in the same form. This way, you don't need separate forms per row. Here are two ways to do this:

Sub-option 2a: Use a shared "action" parameter with value prefixes

<td>
    <form action="updateEmployee" method="post">
        <button type="submit" name="action" value="update_${list.cid}">Update</button>
        <button type="submit" name="action" value="delete_${list.cid}">Remove</button>
    </form>
</td>

Then in your Servlet's doPost method:

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String action = request.getParameter("action");
    if (action != null) {
        String[] parts = action.split("_");
        String companyId = parts[1];
        if (action.startsWith("update_")) {
            // Execute update logic
        } else if (action.startsWith("delete_")) {
            // Execute delete logic
        }
    }
}

Sub-option 2b: Use unique button names with a hidden ID field

<td>
    <form action="updateEmployee" method="post">
        <input type="hidden" name="cid" value="${list.cid}">
        <button type="submit" name="updateBtn">Update</button>
        <button type="submit" name="deleteBtn">Remove</button>
    </form>
</td>

Then in your Servlet:

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String companyId = request.getParameter("cid");
    if (request.getParameter("updateBtn") != null) {
        // Update logic here
    } else if (request.getParameter("deleteBtn") != null) {
        // Delete logic here
    }
}

Either approach works—your original setup is totally valid, and the first option will work perfectly for your existing code.

内容的提问来源于stack exchange，提问作者Adzz