Email sending problem like Ajax

Question

I’m developing a website where on the main page it has a section with a form. This form is for registering emails for sending newsletters. The other pages of the site also have other forms and all work correctly, except this main page.

HOW IT WORKS?

It is the simplest way possible. There are 2 input fields (Name and Email) and 1 send button as you can see below.

<section id="newsletter" class="newsletter bg-newsletter text-center">
    <div class="container-fluid">

        <div class="form-inline">
            <span class="newsletter-text">RECEBA NEWSLETTERS</span>
            <form id="formNewsLetter" accept-charset="utf-8">
                <input type="hidden" name="Acao" value="NewsLetter">
                <input type="hidden" name="adm_id" value="200">
                <input type="text" class="form-control form-inline" name="nome" value="" placeholder="Nome">
                <input type="email" class="form-control form-inline" name="email" value="" placeholder="E-mail">
                <button type="submit" class="btn-newsletter">ENVIAR</button>
            </form>
        </div>
    </div>
</section>

By clicking on "Send", Submit is activated and has a function javascript/jquery which processes the data through AJAX. From then on, the data arrives in the archive .PHP and then the sending procedure works. See the code javascript down below:

$("#formNewsLetter").submit(function(event){
    event.preventDefault();
    var data = $("#formNewsLetter").serialize();
    $.ajax({
        url: 'https://urldosite.com/sistema/Funcoes.php',
        type: 'POST',
        data: data,
        success: function(response){
            if(response.indexOf("alert-success") > -1){
                $("#formNewsLetter").html("<br><div class='alert alert-success'><strong>SUCESSO!</strong> Email cadastrado com êxito!</div>");
            } else {
                console.log(response);
            }
        }
    })
    .done(function() {
        console.log("success");
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });

});

WHAT IS THE PROBLEM?

The problem here is when the data "exit the form to be processed in javascript code". When I click on "Send", the page redirects and the form data is there in the URL of the website, as below:

http://urldositeprincipal.com.br/?Acao=NewsLetter&adm_id=200&nome=Lougans&email=lougans99%40mail.com

OBS: This link is from a test I did and sent, so it appears on URL browser;

WHAT I HAVE TRIED

• Send through the method and of action of <form> (works straight);
  Look at devConsole (shows no errors apparently);

WHAT I AM SURE IS NOT THE PROBLEM

• No problem in the file .PHP who sends the e-mail;

That’s it. I need your help to understand what’s going on. I’ve been through something like this before but the error was very clear, but it seems that it happened out of nowhere. Until Wednesday it was working properly and now it started to occur only in this form. The rest is fully functional.

NOTE: I would love the answers to be in part guidelines on the problem identified as well (this may come later and if you feel comfortable in doing so) an explanation of this behavior (I know it is between my page HTML and the Javascript.

If you need any other relevant information to help you understand my problem, I will be happy to edit the question and add this data.

My THANK YOU VERY MUCH to all who help me in solving these problems of mine!!!

Answer 1

Put the Prevent defaut at the end and add a return false just to make sure

$("#formNewsLetter").submit(function(event){
    var data = $("#formNewsLetter").serialize();
    $.ajax({
        url: 'https://urldosite.com/sistema/Funcoes.php',
        type: 'POST',
        data: data,
        success: function(response){
            if(response.indexOf("alert-success") > -1){
                $("#formNewsLetter").html("<br><div class='alert alert-success'><strong>SUCESSO!</strong> Email cadastrado com êxito!</div>");
            } else {
                console.log(response);
            }
        }
    })
    .done(function() {
        console.log("success");
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
    
    event.preventDefault();
    return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="newsletter" class="newsletter bg-newsletter text-center">
    <div class="container-fluid">

        <div class="form-inline">
            <span class="newsletter-text">RECEBA NEWSLETTERS</span>
            <form id="formNewsLetter" accept-charset="utf-8">
                <input type="hidden" name="Acao" value="NewsLetter">
                <input type="hidden" name="adm_id" value="200">
                <input type="text" class="form-control form-inline" name="nome" value="" placeholder="Nome">
                <input type="email" class="form-control form-inline" name="email" value="" placeholder="E-mail">
                <button type="submit" class="btn-newsletter">ENVIAR</button>
            </form>
        </div>
    </div>
</section>

Answer 2

Problem Solving - *Author’s Answer*

Thanks for the previous comments that helped me dig through some other stuff until I found the solution.

In short, the success: of AJAX was giving the problem. I believe it is because the code below did not contain a value > -1

(response.indexOf("alert-success") > -1)

I modified the success: creating another similar feedback message. Check out how it turned out:

   <script type="text/javascript">
        $("#formNewsLetter").submit(function(e){
            e.preventDefault();
            $.ajax({
                url:"https://hecato.com/sistema/Ativacao.php",
                type:'POST',
                data:$(this).serialize(),
                success:function(){ //ESSE É O NOVO SUCCESS
                    $("#formNewsLetter").html("<br><div class='alert alert-success'><strong>SUCESSO!</strong> Email cadastrado com êxito!</div>"); //
                }
            });
        });
    </script>

Well, that was it. Thank you guys. :)

Answer 3

From what I understand, the form is "submitting" the data. A first test I would do would be to replace the type="Submit" of the button by type="button", so html will ignore that it is a Submit button. Otherwise, your code seems correct. Another detail... I believe that upon receiving feedback from your backend, you will need to apply the method JSON.parse() to have access to the return as if it were an object. This makes it easier to work and handle the Infos.

Test this and tell us if it worked.