Jquery by selecting three forms at once

Asked

Viewed 34 times

-1

I am having a problem using Jquery, because it is selecting three forms at the same time, and they have different utilities. One is for new user registrations, another for login and one that serves for people to send emails from the site to me (nodemailer).

It all started when I made this third form (email), and began to conflict with others. I say this because after I removed a function the other two forms came back to work. The code I removed was this:

/*  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
});
javascript jquery form

  • It is very wide your question, the methods to submit the forms are all in the same file ? have to post all methods and an HTML snippet?

  • Take the forms by id, so only one form will be submitted at a time

2 answers

0


What is probably happening, when submitting any form is called the function $('form').submit(), for it was passed $('form'), to fix this problem, just in place of form, any pass ID or CLASS, so there will no longer be this conflict.

Follow the example below:

$('#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>

  • That’s exactly what it was. At first I changed the script to the html file where the form was (because before it was in the main index and so was with a global scope) and it worked. But I went in his reply and it also worked. Thank you very much!

0

The problem was what was said. The selector $("form") selects all forms from the page at once. Placing a id in each you will differentiate from each other, however nay it is necessary to necessarily create an event for each one, like:

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

You can only use one event for everyone and treat what has been submitted individually.

Just in each form you put one id:

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

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

And in the event you keep the selector $("form") and take the property .target.id of the event to identify which of them was submitted:

$('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
   }
});

See an illustrative example:

$('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>

Another thing I noticed is that you should put the lines:

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

Inside the callback of the $.post to be executed only when AJAX has been completed:

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

Browser other questions tagged javascript jquery form

You are not signed in. Login or sign up in order to post.