如何在单页面多次使用同一个表单 解决弹窗表单提交无数据问题

问题原因 #

你两次引入同一份form.php，导致页面同时存在两个name属性完全相同的表单，且所有表单控件的name也完全重复。浏览器处理表单提交时会默认匹配DOM结构中顺序靠前的表单（也就是main标签内的表单），所以弹窗内靠后的表单提交时会读取不到正确数据。当你注释掉main内的表单后，弹窗表单成为页面唯一的对应表单，就可以正常提交。

解决方案 #

方案1：给表单增加唯一前缀区分（推荐，兼容原生表单提交，无需额外JS） #

修改form.php支持接收自定义前缀参数，给表单标识和控件名增加前缀避免重复：

<?php
// 接收传入的前缀参数，默认值为main_
$form_prefix = $form_prefix ?? 'main_';
?>
<form action="" method="post" name="enquiry_<?php echo $form_prefix; ?>">
   <div class="form-list">
      <div class="fields mb-3">
        <label>Your Full Name</label>
        <input type="text" name="<?php echo $form_prefix; ?>name" class="form-control">
    </div>
      <div class="fields">
        <label>Phone Number</label>
        <input type="text" name="<?php echo $form_prefix; ?>phoneno" class="form-control">
    </div>
  </div>
 <input type="hidden" name="<?php echo $form_prefix; ?>action" value="subscribe">
 <input type="submit" name="<?php echo $form_prefix; ?>send" value="Submit">
</form>

在index.php中引入表单时分别传入不同前缀：
main区域引入：

<?php
$form_prefix = 'main_';
include('form.php');
unset($form_prefix);
?>

弹窗区域引入：

<?php
$form_prefix = 'modal_';
include('form.php');
unset($form_prefix);
?>

后端接收数据时根据前缀区分两个表单的提交即可。

方案2：JS监听表单提交，单独序列化当前提交的表单数据 #

如果不想修改后端接收逻辑，可通过JS阻止表单默认提交行为，单独读取当前触发提交的表单数据提交：
首先给form.php的表单增加统一类名：

<form action="" method="post" name="enquiry" class="enquiry-form">
<!-- 其余表单内容保持不变 -->
</form>

在index.php中增加JS代码：

document.querySelectorAll('.enquiry-form').forEach(form => {
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    // 仅序列化当前提交的表单数据，不会和另一个表单冲突
    const formData = new FormData(this);
    fetch('', {
      method: 'POST',
      body: formData
    }).then(res => {
      // 处理提交成功逻辑，比如跳转、提示、关闭弹窗
    })
  })
})

方案3：动态克隆表单避免重复渲染 #

如果两个表单的逻辑完全一致，无需同时存在，可在点击Contact Us按钮时动态将main区域的表单克隆到弹窗内，弹窗关闭后销毁克隆的表单，避免页面同时存在两个重复表单。

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