主页 / coding / 问题 / 79494386
Accepted
Golden Commander
Asked: 2025-03-08 20:36:54 +0800 CST

Google 表单事件监听器

  • 772

我的目标是在提交表单时打开一个 paypal 页面，但什么也没有发生，所以我添加了没有记录任何内容的日志。

我的代码的第一个控制台日志出现了，但是函数内部的日志onSubmit()没有出现，但我也知道该函数正在运行，因为google.script.run.processForm()正在被调用并且也没有错误消息。

console.log("Page loaded, preparing to submit form");

window.onload = function() {
  var form = document.querySelector('form');
  console.log(form)
  form.addEventListener('submit', onSubmit); // Listen for the submit event
}

function onSubmit(event) {
  event.preventDefault();

  alert("onSubmit() was called!");
  console.log("Form submitted");

  google.script.run
    .withSuccessHandler(function(url) {
      console.log("Redirecting to:", url);

      if (typeof url === "string" && url.startsWith("https://")) {
        window.open(url, "_self");
      } else {
        alert("Error: Invalid PayPal link.");
      }
    })
    .processForm();
}

<form>
  <iframe src="https://docs.google.com/forms/d/e/(private)/viewform?embedded=true" width="640" height="1169" frameborder="0" marginheight="0" marginwidth="0">Wird geladen…</iframe>
</form>
javascript

1 个回答

  1. Best Answer

    没有显示 的​​事实alert证明您的程序从未达到应该发生警报的点。因此在练习结束时，.onSubmit不会调用。

    先不说你的iframe意思，在某些情况下，例如var form = document.querySelector('form');检索到的表单与您预期的表单不同，这种情况是可能发生的。想象一下，一个 HTML 有两个表单，您想将提交事件处理程序附加到第二个表单。querySelector('form')不是很具体。请参阅此代码片段：

    document.querySelector('form').addEventListener('submit', function(evt) {
    evt.preventDefault();
    alert('The form submitted');
});
    <form>Form1 <button>Lick me to continue</button></form>
<form>Form2 <button>Lick me to continue</button></form>

    您可以看到选择器找到了第一个表单并向其附加了一个事件。如果您打算将事件附加到第二个表单，那么它将无法按预期工作。

    现在，在iframe运行中，页面内部iframe可能有一个form，但这只是提交form页面内部的iframe，而不是form封装iframe外部页面的。如果您打算提交form包含提交iframe时的的iframe，您可以执行以下操作：

    myIframe.addEventListener('load', function() {
    if (myIframe === 'some/path/here') {
        myIframe.parentNode.submit();
    }
});


    let param = 1;
let firstLoad = true;
function changeSrc() {
    document.getElementById("myframe").src = `https://www.google.com?param=${param++}`;
}

document.getElementById("myform").addEventListener("submit", function(evt) {
    evt.preventDefault();
    alert("loaded " + document.getElementById("myframe").src + " and submit event triggered!");
});

document.getElementById("myframe").addEventListener("load", function() {
    if (!firstLoad) document.querySelector("#myform button").click();
    firstLoad = false;
});
    iframe {
    width: 500px;
    height: 500px;
}
    <form id="myform">
    <button style="display: none;">Submit</button>
    <input type="button" value="Change Source" onclick="changeSrc(event)">
    <br>
    <iframe id="myframe" src="https://www.google.com"></iframe>
</form>

    submit()我还通过在加载时触发表单的按钮进行了测试iframe，但未能检测到提交，可能是因为不是人为触发的。但如果您通过自动点击提交按钮来执行此操作，则可行。

    • 1

相关问题