-1

estou tendo um problema usando Jquery, pois o mesmo está selecionando três formulários ao mesmo tempo, sendo que eles tem utilidades diferentes. Um serve para registros de novos usuários, outro para login e um que serve para que as pessoas possam enviar emails do site para mim (nodemailer).

Tudo começou quando fiz esse terceiro formulário (email), e começou a dar conflito com os demais. Digo isso pois depois que removi uma função os outros dois formulários voltaram a funcionar. O código que retirei foi esse:

/*  Não conheço muito jquery, mas acredito que o problema esteja aqui, pois  está selecionando todos os forms certo? mas eu queria selecionar  somente o do email */
`$('form').on('submit', (e) => {
e.preventDefault();
const subject = $('#subject').val()//.trim()
const emaill = $('#emaill').val()//.trim()
const text = $('#text').val()//.trim()

const data = {
    emaill,
    subject,
    text
};
//Um dos problemas que noto é que toda vez que tento fazer login ou registra uma 
//nova conta, isso aparece no meu terminal, e não deveria.
$.post('/emaill', data, function () {
    console.log('Server received our data')

});

$('#formulario').trigger("reset");

$('#resultadoAlter').show() // Faz o alert de mensagem enviada aparecer
});
2
  • Está muito ampla sua pergunta, os métodos para submeter os formulários ficam tudo no mesmo arquivo ? tem como postar todos os métodos e um trecho HTML? 11/02/2020 às 12:00
  • Pegue os formulários por id, assim será submetido apenas um formulário por vez 11/02/2020 às 12:04

2 Respostas 2

0

O que provavelmente está acontecendo, ao submeter qualquer formulário é chamada a função $('form').submit(), pois foi passado $('form'), para corrigir esse problema, basta que no lugar de form, passe alguma ID ou CLASS, assim não haverá mais esse conflito.

Segue o exemplo a baixo:

$('#formEmail').on('submit', (e) => {
    e.preventDefault();
    const subject = $('#subject').val()//.trim()
    const emaill = $('#emaill').val()//.trim()
    const text = $('#text').val()//.trim()

    const data = {
        emaill,
        subject,
        text
    };
    //Um dos problemas que noto é que toda vez que tento fazer login ou registra uma 
    //nova conta, isso aparece no meu terminal, e não deveria.
    $.post('/emaill', data, function () {
        console.log('Server received our data')

    });

    $('#formEmail').trigger("reset");

    $('#resultadoAlter').show() // Faz o alert de mensagem enviada aparecer
});
<form id="formEmail">
    <input type="text" id="subject">
    <input type="email" id="emaill">
    <input type="text" id="text">
</form>
<div id="resultadoAlter"></div>

1
  • Era exatamente isso. Em um primeiro momento mudei o script para o arquivo html onde estava o formulário (pois antes estava no index principal e assim ficava com um escopo global) e funcionou. Porém fui em sua resposta e também funcionou. Muito obrigado! 11/02/2020 às 12:19
0

O problema era o que foi dito mesmo. O seletor $("form") seleciona todos os formulários da página de uma vez. Colocando um id em cada um você irá diferenciar um do outro, porém não é preciso necessariamente criar um evento para cada um, tipo:

$("#formEmail").on("submit",...
$("#formCadastro").on("submit",...

Você pode usar apenas um evento para todos e tratar o que foi submetido de forma individual.

Basta em cada formulário você colocar um id:

<form id="formEmail">
   ...
</form>

<form id="formCadastro">
   ...
</form>

E no evento você mantém o seletor $("form") e pega a propriedade .target.id do evento para identificar qual deles foi submetido:

$('form').on('submit', (e) => {
   e.preventDefault();
   let form = e.target.id; // pega o id do form submetido
   if(form == "email"){
      ... faz o AJAX referente ao email
   }else if(form == "cadastro"){
      ... faz o AJAX referente ao cadastro
   }
});

Veja um exemplo ilustrativo:

$('form').on('submit', (e) => {
   e.preventDefault();
   let form = e.target.id;
   if(form == "email"){
      console.log("email");
   }else if(form == "cadastro"){
      console.log("cadastro");
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="email">
   Email<br>
   <button>OK</button>
</form>
<form id="cadastro">
   Cadastro<br>
   <button>OK</button>
</form>

Outra coisa que observei é que você deve colocar as linhas:

$('#formEmail').trigger("reset");
$('#resultadoAlter').show();

Dentro do callback do $.post para que sejam executadas apenas quando o AJAX tiver sido concluído:

$.post('/emaill', data, function () {
   console.log('Server received our data')
   $('#formEmail').trigger("reset");
   $('#resultadoAlter').show();
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .