How do I send a form by e-mail and change the DIV to another one with a message?

Question

How do I send a form by e-mail and change the DIV to another one with a message?

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Oie

I did following:

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

PHP file receivedData.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);

It deletes the div minhaDiv , but did not show the other

php javascript jquery

asked by anonymous 02.03.2018 / 12:33

2 answers

How to get the runtime of a program with shell script? I can not find the glew graphic library

score 1 · Answer 1

1

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

02.03.2018 / 12:46

score 1 · Answer 2

Your code will not work because e.preventDefault(); is invalid. The moment you try to execute this function, the browser will give error and stop the execution of the rest of the code.

Another error is that $(this) returns the function it was called in, that is, $(this).data('element'); is also invalid because it is being called inside success and therefore $(this) returns success .

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

Additionally, ID of 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 )
           }
       });
    });
});