表单提交异常：如何传递表格数据与对应按钮的操作标识？

问题根源在于所有隐藏输入框的name均为action，表单提交时浏览器会发送所有同名输入的值，后端通常只会读取最后一个值，导致无论点击哪个按钮，都只会获取到最后一个操作值。以下是无需JavaScript的解决方法：

最优方案：利用submit按钮自身属性传递操作值 #

直接将操作值设置为submit按钮的value，并给按钮添加name="action"属性。点击对应按钮时，浏览器只会将该按钮的name和value作为参数提交，同时保留表单内的其他数据。

修改后的代码示例：

<form action="Action.php" method="POST">
   <div class="row">
      <div class="col-md-12" style="text-align: left">
         <table>
            <tbody>
               <td><label><input type="text" name="foldersTable['folderName'][]" value="foldername"></label></td>
            </tbody>
         </table>
      </div>
   </div>
   <div class="row">
      <div class="col-md-12" style="text-align: left">
         <div style="display: inline-block;">
            <img src="deleteSelected.jpg">
            <button type="submit" id="1" name="action" value="Files::deleteSelected">
               Delete Selected
            </button>
         </div>
         <div style="display: inline-block;">
            <img src="zip.jpg">
            <button type="submit" id="2" name="action" value="Zip::zipSelectedFolders">
               Zip Selected
            </button>
         </div>

         <div style="display: inline-block;">
            <img src="rename.jpg">
            <button type="submit" id="3" name="action" value="Files::renameFolders">
               Rename Selected
            </button>
         </div>
      </div>
   </div>
</form>

备选方案：给按钮设置不同的name属性 #

为每个按钮设置唯一的name，后端通过判断哪个参数存在来确定操作类型。示例代码：

<form action="Action.php" method="POST">
   <!-- 表格部分保持不变 -->
   <div class="row">
      <div class="col-md-12" style="text-align: left">
         <div style="display: inline-block;">
            <img src="deleteSelected.jpg">
            <button type="submit" id="1" name="action_delete">
               Delete Selected
            </button>
         </div>
         <div style="display: inline-block;">
            <img src="zip.jpg">
            <button type="submit" id="2" name="action_zip">
               Zip Selected
            </button>
         </div>
         <div style="display: inline-block;">
            <img src="rename.jpg">
            <button type="submit" id="3" name="action_rename">
               Rename Selected
            </button>
         </div>
      </div>
   </div>
</form>

后端可通过检查action_delete、action_zip等参数是否存在，来判断用户执行的操作。

内容的提问来源于stack exchange，提问作者Láďa Prchal