PHP&JavaScript POST请求问题求助：弹窗后添加按钮无法获取回调数据

嘿，我来帮你捋清楚这个问题哈～

问题出在哪？ #

你现在的按钮逻辑其实只做了一件事：弹出新窗口，完全没触发表单的POST提交！原因有两个：

1. 按钮是type="button"，这种按钮本身就不会触发表单的默认提交行为；
2. onclick里的return false还进一步阻止了任何可能的表单提交动作。

所以你的表单根本没向/app/addons/myapp/callback发送过POST请求，自然就获取不到数据啦。

怎么解决？ #

根据你的需求（点按钮弹窗，之后在弹窗里点添加按钮要提交POST），给你两种可行方案：

方案1：弹窗操作完再提交表单（推荐）

这种方式适合需要在弹窗里完成操作、收集数据后，再把数据提交到callback路径的场景：

1. 先给原页面的表单加个ID，方便后续调用，还可以加个隐藏字段用来存弹窗传回来的数据：

<form id="customiseForm" action="/app/addons/myapp/callback" method="post">
  <input type="hidden" name="popupData" id="popupData">
  <input type="button" value="Customise" onclick="openMyPopup(); return false;">
</form>

2. 写个打开弹窗的JS函数，顺便监听弹窗状态：

function openMyPopup() {
  // 打开弹窗时指定名字，方便后续操作
  const popupWindow = window.open('https://mywebsite.com', 'popup', 'width=800,height=800');
  
  // 可选：如果需要用户关闭弹窗后自动提交，可以加个定时器监听
  const checkClosed = setInterval(() => {
    if (popupWindow.closed) {
      clearInterval(checkClosed);
      // 这里可以自动提交表单，或者提示用户操作
      // document.getElementById('customiseForm').submit();
    }
  }, 1000);
}

3. 在你的弹窗网站（https://mywebsite.com）里，给添加按钮加点击事件，把数据传给父窗口并提交表单：

// 假设弹窗里的添加按钮ID是addBtn
document.getElementById('addBtn').addEventListener('click', () => {
  // 这里替换成你实际要传递的数据
  const dataToSend = '我是从弹窗来的数据';
  
  // 把数据放到父窗口的隐藏字段里
  window.opener.document.getElementById('popupData').value = dataToSend;
  
  // 触发父窗口的表单提交
  window.opener.document.getElementById('customiseForm').submit();
  
  // 提交完可以关掉弹窗
  window.close();
});

方案2：点按钮同时弹窗+提交表单

如果不需要等弹窗操作，只是点按钮时既要弹窗又要提交预设好的表单数据，那简单改一下按钮就行：

<form action="/app/addons/myapp/callback" method="post">
  <!-- 这里放你要提交的表单字段 -->
  <input type="submit" value="Customise" onclick="window.open('https://mywebsite.com', 'popup','width=800,height=800');">
</form>

⚠️ 注意：这种方式表单会立即提交，弹窗同时打开。如果后端需要等弹窗的操作数据，别用这个方案！

额外提醒 #

如果你的弹窗网站和原页面不是同域的，直接用window.opener操作父窗口会被浏览器阻止。这种情况可以用postMessage来传递数据，父窗口监听message事件，收到数据后再提交表单。

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