How do I send an email form and change the DIV to another one with a message?

Question

Oie

I did next:

HTML

<div id="minhaDiv">
    <form id="formulario">
        <input type="text" name="nome" id="nome" autocomplete="off" placeholder="Digite seu Nome">
        <input type="text" name="email" id="email" autocomplete="off" placeholder="Digite seu email">
        <input type="button" id="salvar" name="salvar" value="Salvar" class="btn-toggle" data-element="#minhaDiv">
    </form>
    </div>
    <div id='msgsucess' class='output' style="display: none">
     Obrigado por entrar em contato.
    </div>

JS Query

$(document).ready(function (){
$("#salvar").click(function (){
   var form = new FormData($("#formulario")[0]);
   $.ajax({
       url: 'recebeDados.php',
       type: 'post',
       dataType: 'json',
       cache: false,
       processData: false,
       contentType: false,
       data: form,
       timeout: 8000,
       success: function(e){
           e.preventDefault();
           el = $(this).data('element');
           $(el).toggle();
           $('#minhadiv').hide();               
           $('#mgssucess').show();
       }
   });
});
});

File in PHP receipts.php

$nome  = $_POST['nome'];
$email = $_POST['email'];

$headers = "MIME-Version: 1.1\r\n";
$headers .= "Content-type: text/plain; charset=UTF-8\r\n";
$headers .= "From: [email protected]\r\n"; // remetente
$headers .= "Return-Path: [email protected]\r\n"; // return-path
$envio = mail("[email protected]", "$nome", "$email", $headers);

He erases the div minhaDiv, but did not show the other

Answer 1

It’s simple, the div has the following id: id='msgsucess'
and your code is like this:
$('#mgssucess').show();
just change to:
$('#msgsucess').show();

Answer 2

Your code won’t work because e.preventDefault(); is invalid. At the moment you attempt to perform this function, the browser will error and stop the execution of the rest of the code.

Another mistake is that $(this) returns the function in which it was called, i.e., $(this).data('element'); is also invalid as it is being called within success and therefore, $(this) returns success.

In this error, it will not stop the execution, but it is always good to correct.

In addition, the ID the elements are invalid.

Correct code:

$(document).ready(function (){
    $("#salvar").click(function (){
       var form = new FormData($("#formulario")[0]);
       $.ajax({
           url: 'recebeDados.php',
           type: 'POST',
           dataType: 'json',
           cache: false,
           processData: false,
           contentType: false,
           data: form,
           timeout: 8000,
           success: function(e){
                $('#minhaDiv').hide();               
                $('#msgsucess').show();
           },
           error: function(err) {
               alert( err.responseText )
           }
       });
    });
});