PHP单页面放置多个form表单失效 原有正常表单被破坏如何解决

根本原因 #

你新增的收藏表单的结束标签书写错误：将</form>误写为<form>，浏览器会识别为你在第一个表单内部又新开了一个表单，导致后续的聊天表单被判定为第一个表单的嵌套内容，所以两个表单的配置、提交逻辑会完全混淆，修改第一个表单的action会连带作用到第二个表单上。

修复操作 #

1. 修正新增表单的结束标签
   将收藏表单最后一行的<form>替换为</form>，修正后的完整代码如下：

<div class="overlay">
 <div style="margin-top:25%;"> </div>
   <form id="favForm" class="favFormClass" action="" method="post" enctype="multipart/form-data"> 
         <input type="hidden" name="id_post_fav" value="<?php echo $row['id_post'];?>" />
         <button type="submit" name="fav" style="background:transparent; border:none; cursor:pointer;"> <i class="fa fa-heart" style="font-size:60px;color:red;" aria-hidden="true"></i></button>
    </form>
</div> 

2. 可选优化项
   为避免后续出现兼容性问题，可给聊天表单的提交按钮添加明确的type="submit"属性，两个表单的action可以独立设置不同值，不会再互相干扰。

效果验证 #

修复后两个表单为独立的DOM节点，各自的提交逻辑、配置参数完全独立，原有聊天表单的功能会恢复正常，新增的收藏表单也可以正常提交数据。

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