通过AJAX提交表单至Google Sheets后，实现单选按钮对应金额的PayPal跳转

我之前也碰到过类似的需求——用单选按钮做不同档位的选择，提交表单存数据后跳对应金额的PayPal，刚好可以给你分享下可行的解决方案。核心思路是拦截表单的默认提交行为，手动控制数据提交和跳转逻辑，这样就能精准匹配单选按钮对应的价格来跳转了。

具体实现步骤 #

1. 调整表单结构，给单选按钮统一标识和价格值 #

先给单选按钮设置统一的name属性，把对应价格存在value里；那些仅需存入Google Sheets的附加选项，单独用表单字段即可，不用和PayPal挂钩：

<form id="boothForm">
  <!-- 摊位类型单选按钮 -->
  <div>
    <input type="radio" name="boothType" id="standard" value="180" checked>
    <label for="standard">标准摊位 - $180</label>
  </div>
  <div>
    <input type="radio" name="boothType" id="vip" value="450">
    <label for="vip">VIP摊位 - $450</label>
  </div>

  <!-- 仅存入Sheets的附加选项 -->
  <div>
    <label>附加需求：</label>
    <input type="checkbox" name="extra" value="electricity"> 额外供电
  </div>

  <!-- 基础表单字段 -->
  <input type="text" name="fullName" placeholder="你的姓名" required>
  <input type="email" name="email" placeholder="联系邮箱" required>

  <button type="submit">提交并前往支付</button>
</form>

<!-- 提交成功模态框 -->
<div id="successModal" style="display: none; padding: 20px; border: 1px solid #ccc; margin-top: 10px;">
  <p>表单提交成功！即将跳转至PayPal支付页面...</p>
</div>

2. 用JavaScript拦截提交，处理数据存储和跳转 #

关键是用preventDefault()阻止表单默认刷新，异步提交数据到Sheets，成功后再根据选中的价格跳转到对应PayPal页面：

document.getElementById('boothForm').addEventListener('submit', async function(e) {
  e.preventDefault(); // 阻止表单默认提交刷新

  // 1. 获取选中摊位的对应价格
  const selectedPrice = document.querySelector('input[name="boothType"]:checked').value;
  // 可选：获取选中摊位的名称，用于PayPal的商品名称显示
  const boothName = document.querySelector('input[name="boothType"]:checked').nextElementSibling.textContent;

  // 2. 收集所有表单数据（包括仅存Sheets的附加选项）
  const formData = new FormData(this);

  try {
    // 3. 异步提交数据到Google Sheets（替换成你的Sheets脚本端点）
    const response = await fetch('https://script.google.com/macros/s/你的Google脚本ID/exec', {
      method: 'POST',
      body: formData
    });

    if (response.ok) {
      // 4. 显示成功模态框
      const modal = document.getElementById('successModal');
      modal.style.display = 'block';

      // 5. 延迟2秒后跳转到对应金额的PayPal页面
      setTimeout(() => {
        // 拼接PayPal标准结账链接，按需调整参数
        const paypalUrl = `https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=你的商家PayPal邮箱&amount=${selectedPrice}&currency_code=USD&item_name=${encodeURIComponent(boothName)}`;
        window.location.href = paypalUrl;
      }, 2000);
    } else {
      alert('表单提交失败，请稍后重试');
    }
  } catch (error) {
    console.error('提交出错:', error);
    alert('网络异常，请检查连接后重试');
  }
});

3. 关键注意点 #

• Google Sheets脚本配置：确保你的Sheets脚本已经开启了外部访问权限，并且doPost函数能正确接收并处理表单数据。
• PayPal参数调整：根据你的业务需求修改PayPal链接的参数，比如currency_code改成你需要的货币类型，business替换成你的商家PayPal邮箱。
• 附加选项隔离：因为我们用FormData收集了所有表单字段，那些仅需存入Sheets的选项会自动提交到后端，但不会出现在PayPal的跳转链接里，刚好符合你的需求。

这样处理后，表单提交就不会再刷新页面，而是先把数据存入Google Sheets，显示成功提示，最后跳转到对应金额的PayPal结账页面啦。

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