Início / coding / Perguntas / 79494386
Accepted
Golden Commander
Asked: 2025-03-08 20:36:54 +0800 CST

EventListener do Google Forms

  • 772

Meu objetivo é que ao enviar o formulário uma página do PayPal seja aberta, mas nada aconteceu, então adicionei os logs que não registraram nada.

Os primeiros logs do console do meu código aparecem, mas os que estão dentro da função onSubmit()não aparecem, mas também sei que a função está em execução, porque google.script.run.processForm()está sendo chamada e também não há nenhuma mensagem de erro.

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 respostas

  1. Best Answer

    O fato de que o alertnão é mostrado prova que seu programa nunca chega ao ponto onde o alerta deveria acontecer. Portanto, no final do exercício, não .onSubmité chamado .

    Deixando seu iframede lado por um segundo, isso é possível em casos como quando var form = document.querySelector('form');recuperou algum outro formulário diferente do que você esperava. Imagine um HTML com dois formulários e você quer anexar um manipulador de eventos submit ao segundo formulário. querySelector('form')não é muito específico. Veja este snippet:

    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>

    Você pode ver que seu seletor encontrou o primeiro formulário e anexou um evento a ele. Se você pretendia anexar o evento ao segundo formulário, então ele não funcionará como você pretendia.

    Agora, com o iframeem jogo, sua página dentro do iframepode ter um formdentro dele, mas isso é apenas enviar o formdentro da página do iframe, mas não o formque encapsula o iframena página externa. Se você pretende enviar o formque inclui o iframequando o iframefoi enviado, você pode fazer algo como abaixo:

    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>

    Eu também testei acionando o submit()do formulário no iframecarregamento, mas isso não detectou o envio, talvez porque não foi acionado por humanos. Mas se você fizer isso por meio de clique automático no botão de envio, então funciona.

    • 1

relate perguntas