表单添加name属性后action失效 无法同时对接general_api与谷歌表

问题原因 #

你绑定的表单提交事件中调用了e.preventDefault()，该方法会阻止表单的默认提交行为：

• 表单加name="gsheet"属性时，JS可以通过document.forms['gsheet']正确选中表单，submit事件绑定生效，默认提交到general_api.php的行为被阻止，因此后端接口不运行
• 表单移除name属性时，JS无法匹配到对应表单，事件绑定不生效，默认提交行为正常运行，但谷歌表提交逻辑无法触发

解决方案 #

方案1：修改前端JS逻辑，谷歌表提交完成后手动触发表单默认提交 #

调整你的GSheet提交JS代码如下即可：

const scriptURL = 'https://script.google.com/macros/s/xxxxx/exec'
const form = document.forms['gsheet']
let submittedToGsheet = false

form.addEventListener('submit', e => {
  // 已完成谷歌表提交则直接放行默认行为
  if (submittedToGsheet) return
  e.preventDefault()
  fetch(scriptURL, { method: 'POST', body: new FormData(form)})
    .finally(() => {
      // 无论谷歌表提交成功/失败，都继续走原表单提交流程
      submittedToGsheet = true
      form.submit()
    })
})

方案2：将谷歌表提交逻辑迁移到后端PHP处理（更稳定） #

该方案无需修改前端代码，在原有general_api.php的跳转逻辑前新增谷歌表数据提交代码即可，避免前端跨域、网络波动等问题影响主流程：

// 原有curl执行、响应解析逻辑不变，在跳转前新增以下代码
// 组装谷歌表需要的字段
$gsheetPost = [
    'name' => $_POST['name'],
    'phone' => $_POST['phone'],
    'quantity' => $_POST['quantity'],
    'address' => $_POST['address'],
    'city' => $_POST['city'],
    'zipcode' => $_POST['zipcode'],
    'notes' => $_POST['notes']
];
$curlGsheet = curl_init();
curl_setopt_array($curlGsheet, [
    CURLOPT_URL => 'https://script.google.com/macros/s/xxxxx/exec',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => http_build_query($gsheetPost),
    CURLOPT_TIMEOUT => 1 // 超时设为1秒，避免谷歌接口异常影响主流程
]);
curl_exec($curlGsheet);
curl_close($curlGsheet);

// 原有跳转逻辑不变
echo "<script>top.location.href='$redirection_url';</script>";

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