Doubt how to use the runJS function to call a JS function in an external file

Wappler General Need Help
1

I have a form and I need to call a JS function to reset it after a successful submission. I've tried setting the function to global (windows.resetFormulario), but I always get an error that the function can't be found. The function is in a JS file that is loaded at the end before the tag.
Can someone help me?

image
image1164Ă—250 13.2 KB

image
image797Ă—676 28 KB

image
image829Ă—97 4.27 KB

2

Have you tried this:

Use the Dynamic Events, Success, Selected Action is your form - Reset - check clear data.

image
image788Ă—319 13.7 KB

3

Your js file needs to be included on the page where you call this function.
Also - please post the form code here, so we can check it, it's hard to debug code from screenshot.

Also, you don’t really need the DOMContentLoaded listener for this function, as it’s not DOM dependent and you’re calling it later.

4

Here's the code:

<form action="../../dmxConnect/api/eventos/somos_alabe25/create.php" method="post" id="form_inscricao" is="dmx-serverconnect-form" dmx-generator="bootstrap5" dmx-form-type="vertical" dmx-on:error="notifies.warning(lastError.response)" dmx-on:success="run([{'bootbox.alert':{message:'Informação submetida com sucesso. Entraremos em contacto caso seja necessário mais informação.',title:'Mensagem',centerVertical:true,buttons:{ok:{label:'Fechar',className:'btn-success'}}}},{run:{outputType:'text',action:`form_inscricao.reset()`}},{run:{outputType:'text',action:`var_tipo.setValue(0)`}},{run:{outputType:'text',action:`text_tipo_inscricao.setValue(0)`}},{runJS:{outputType:'text',function:'resetarFormulario'}}])">


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  <script src="../../js/inscricoes_somos_alabe25_public.js" defer></script>
</body>

</html>

document.addEventListener('DOMContentLoaded', function () {
    console.log("Script de gestão de inscrições carregado");


    // Constantes
    const TIPOS_INSCRICAO = {
        ASSOCIADO: '1',
        NAO_ASSOCIADO: '2'
    };

    const PRECOS = {
        [TIPOS_INSCRICAO.ASSOCIADO]: { presencial: 60, online: 35 },
        [TIPOS_INSCRICAO.NAO_ASSOCIADO]: { presencial: 120, online: 70 }
    };

    // Elementos principais
    const form = document.getElementById('form_inscricao');
    const recaptchaElement = document.querySelector('.g-recaptcha');
    const errorContainer = document.getElementById('validation_errors');

    // Função para resetar o formulário
    function resetarFormulario() {
        console.log("executando reset completo");
        limparErros();

        // Reset completo para todos os participantes
        for (let i = 1; i <= 6; i++) {
            const nomeField = document.getElementById(`inp_participante${i}_nome`);
            const emailField = document.getElementById(`inp_participante${i}_email`);
            const onlineCheck = document.getElementById(`inp_participante${i}_online`);
            const almocoCheck = document.getElementById(`inp_participante${i}_almoco`);

            // Resetar valores
            if (nomeField) nomeField.value = '';
            if (emailField) emailField.value = '';
            if (onlineCheck) onlineCheck.checked = false;
            if (almocoCheck) almocoCheck.checked = false;

            // Forçar desativação
            if (emailField) emailField.disabled = true;
            if (onlineCheck) onlineCheck.disabled = true;
            if (almocoCheck) almocoCheck.disabled = true;

            // Remover classes de estilo
            const container = emailField?.closest('.col-sm-10');
            if (container) {
                container.classList.remove('has-active-participant');
                container.classList.add('text-muted');
            }

            // Remover estados de inválido
            if (emailField) emailField.classList.remove('is-invalid');
        }

        // Resetar campos específicos do tipo de inscrição
        document.getElementById('inp_socio_nome').value = '';
        document.getElementById('inp_outro_nome').value = '';

        // Resetar checkboxes de consentimento
        document.getElementById('inp_consent_dados_pessoais').checked = false;
        document.getElementById('inp_consent_recolha_imagens').checked = false;

        // Resetar tipo de inscrição
        document.querySelector('input[name="radio_tipo"]').checked = true;

        // Atualizar cálculo
        calcularCusto();
    }
....
5

A simple form.reset() is not enough for what I want, I need to clear variables and more

1 Like
6

Try taking out the function outside of the DOMContentLoaded listener.

7

It's working! thanks for your help!