Como enviar um formulário para dois destinos ao mesmo tempo (sem causar um colapso na Matrix)

Porque um submit é pouco, dois é bom, e três o Mikrotik bloqueia.

---

Introdução

Você já tentou enviar dados para o Mikrotik e para um WebHook ao mesmo tempo? Não? Então você vive uma vida tranquila demais.

Neste tutorial, vamos complicar o simples: validar um CPF, mascará-lo, enviar para um webhook invisível, e ainda logar o usuário no hotspot.

---

Pré-requisitos

• Um HTML com mais camadas que uma cebola.
• Conhecimentos em JavaScript suficientes pra saber que getElementById() é mais fiel que querySelector().
• Coragem.

---

A lógica (ou a ausência dela)

1. O usuário digita nome e CPF.
2. O CPF é validado, formatado e psicologicamente avaliado.
3. O formulário hidden envia os dados para o webhook da empresa.
4. Após 2 segundos (ritual obrigatório), o login original é enviado ao Mikrotik.

---

O código mágico

htmlCopyEdit<form id="loginForm" action="$(link-login-only)" method="post">
  <input name="nome" required>
  <input name="cpf" id="documento" required minlength="14" maxlength="14" oninput="aplicarMascara()">
  <input type="submit" id="submitBtn" value="Acessar Internet">
</form>

<form id="whForm" action="https://webhook.example.com" method="post" target="hiddenFrame" style="display:none;">
  <input type="hidden" id="whNome" name="nome">
  <input type="hidden" id="whcpf" name="cpf">
</form>

<iframe name="hiddenFrame" style="display:none;"></iframe>

---

JavaScript com propósitos místicos

jsCopyEditdocument.getElementById("loginForm").addEventListener("submit", function(e) {
    e.preventDefault(); // Pare de confiar no comportamento padrão.

    if (!validarDocumento()) return false; // Se não validar, nem tenta.

    const nome = document.querySelector("input[name='nome']").value;
    const cpf = document.getElementById("documento").value;

    document.getElementById("whNome").value = nome;
    document.getElementById("whcpf").value = cpf;
    document.getElementById("whForm").submit(); // Primeiro strike.

    setTimeout(() => {
        document.getElementById("loginForm").submit(); // Segundo strike.
    }, 2000); // Delay místico para sincronia de realidades.
});

---

Mas por que funciona?

Porque JavaScript é um ato de fé. E também porque:

• O form escondido usa um iframe pra enviar dados sem recarregar a página.
• O form do Mikrotik precisa ser enviado por último pra não cortar a festa antes da hora.
• O delay de 2 segundos é o tempo exato pro universo respirar.

---

Erros comuns (e por que você vai cometê-los)

• Usar value dos inputs antes de o form ser submetido? Vai dar undefined.
• Esquecer o id no campo cpf e usar querySelector()? Vai caçar com vara curta.
• Trocar a ordem dos submits? Vai quebrar o webhook antes de nascer.

---

Considerações Finais

Se tudo funcionar de primeira, revise: algo está errado.

Mas se funcionar depois de uns 3 testes, 2 alertas duplicados e um botão girando… então, meus parabéns: você desbloqueou o Modo Kemper. =D