How to send an email without finalizing the form

Question

I wanted to know if there’s any way I can fire an email without calling my form’s action, because it has 4 steps, and in the process from step 1 to step 2 I want to email the fields that have been filled, without finalizing my form, because if I use Ubmit calling the action it closes my form and goes back to the first step, instead of going to the second step. I just need that by clicking the button it take the typed data and send by email without giving me any feedback sent, already tried everything I know

Answer 1

For each step create a div

• first div <div class="form1-group" id="passo1">
• second div <div class="form2-group" id="passo2">
• third div <div class="form3-group" id="passo3">
• fourth div <div class="form4-group" id="passo4">

CSS

//oculta as divs
#passo2,#passo3,#passo4{
    display:none;
}
input{
    width:220px;
}

Form example

<form id="regForm" action="recebe-do-form.php" method="post">
    <div class="form1-group" id="passo1">
      <p><input minlength="5" type="text" class="form-control" id="nome" name="nome" placeholder="Nome Completo*" /></p>
      <p><input type="email" class="form-control" id="email" name="email" placeholder="Email Válido*" /></p>
      <p><input type="text" class="form-control" id="celular" name="celular" placeholder="Telefone" /></p>
      <p><input type="text" class="form-control" id="sobre" name="sobre" placeholder="Como ficou sabendo sobre festas?" /></p>
      <button type="button" id="form1" onclick="validate(id)" /> Próximo</button>
    </div>

    <div class="form2-group" id="passo2">
      <input type="text" name="idade" value="" id="idade" placeholder="Idade" />
      <br />
      <input type="text" name="nascimento" id="nascimento" value="" placeholder="Data nascimento" />
      <br />
      <button type="button" id="form2" onclick="validate(id)" /> Próximo</button>

   </div>

   <div class="form3-group" id="passo3">
      <input type="text" name="estado" value="" id="estado" placeholder="Estado" />
      <br />
      <input type="text" name="cidade" value="" id="cidade" placeholder="Cidade" />
      <br />
      <button type="button" id="form3" onclick="validate(id)" /> Próximo</button>

   </div>

   <div class="form4-group" id="passo4">
      <input type="text" name="cargo" value="" id="cargo" placeholder="Cargo" />
      <br />
      <input type="text" name="empresa" value="" id="empresa" placeholder="Empresa" />
      <br />

      <button type="button" id="form4" onclick="validate(id)" /> Enviar</button>
   </div>

</form>

Each group of div contains a button calling the function validate(id) passing the value of id

The function validate(id), in accordance with the id past performs the desired actions, such as validating name, email and whatever else you want. Note the comments in the code.

function validate(id){
    /*
    Recupera o id do button clicado e
    verifica se o nome contém pelo menos 5 caracteres
    valida email
    e se estiverem ok, executa o ajax para enviar o email
    pode validar os outros campos dessa div (celular e sobre) se assim o desejar
    */
    if (id=="form1"){
        var strNome = document.getElementById("nome").value;
        if (strNome.length<5){
           $( '#nome' ).css( "border", "2px solid #e74c3c" );
           $( '#nome' ).val( "" );
           $( '#nome' ).attr("placeholder", "Minimo de 5 caracteres!");
           $( '#nome' ).focus();
           return false;
        }else{
           $( '#nome' ).css( "border", "2px solid green" );
        }

        var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
        if(!filter.test(document.getElementById("email").value)){
           $( '#email' ).css( "border", "2px solid #e74c3c" );
           $( '#email' ).focus();
           return false;
        }

        //valores do primeiro passo para passar via email
        var nome = $("#nome").val();
        var email = $("#email").val();
        var celular = $("#celular").val();
        var sobre = $("#sobre").val();

        var dataString = {"nome":nome,"email":email,"celular":celular,"sobre":sobre };

            $.ajax({
                url: 'enviarMail.php',
                type: 'POST',
                data: dataString,
                success: function(data){
                    //$("#resultado").html("Dados enviados com sucesso "+data);
                }
            });//ajax 
    }

     //neste estou validando a data de nascimento
     if (id=="form2"){
         var strNascimento = document.getElementById("nascimento").value;
         var patternData = /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/;
            if(!patternData.test(strNascimento)){
                $( '#nascimento' ).val( "" );
                $( '#nascimento' ).attr("placeholder", "dd/mm/yyyy");
                $( '#nascimento' ).css( "border", "2px solid #e74c3c" );
                return false;
            }
    }

    //aqui envia o formulário
    if (id=="form4"){
        $("#regForm").submit();
    }

    /*
    recupera o ultimo caractere da string id, soma 1,
    esconde todas as divs e mostra a div seguinte a atual.
    */
    var res = id.charAt(id.length-1);
    res=parseInt(res)+1;
    //esconde todas
    $('div[id^="passo"]').hide();
    //mostra a proxima
    $('#passo'+res).show();


} 

enviarMail.php

/******* CODIGO EMAIL *******/

/* Uma dica para envio de emails
Baixe os arquivos  PHPMailerAutoload.php - class.smtp.php -  class.phpmailer.php
em github - https://github.com/PHPMailer/PHPMailer/tree/5.2-stable
Crie uma pasta  PHPMailer-master no mesmo diretório da sua aplicação PHP e 
publique os arquivos baixados nesta pasta (PHPMailer-master).
*/


$nome = $_POST['nome'];

$email = $_POST['email'];

$celular = $_POST['celular'];

$sobre = $_POST['sobre'];

//email Destinatario
$emailDest = "[email protected]";

$email = Trim(str_replace("'","",$email));


require_once 'PHPMailer-master/PHPMailerAutoload.php';

$mail = new PHPMailer();
$mail->IsSMTP();
$mail->Host = 'smtp.dominio.com';
$mail->Port = 587;
$mail->SMTPAuth = true;
$mail->IsHTML(true);
$mail->Username = '[email protected]';
$mail->Password = 'senha';

//$mail->SMTPSecure = false; //Diz que nao tem tls/ssl
$mail->SMTPSecure = 'tls';  
//$mail->SMTPAutoTLS = false; //Diz que nao tem tls/ssl

//$mail->SMTPDebug = 2; //Mostra os bugs

//E-mail remetente
$mail->From = $email;

//Nome do remetente
$mail->FromName = $nome;

//Assunto da mensagem
$mail->Subject = "teste mail";

//Corpo da mensagem
$mail->Body = "Celular ".$celular." - Mensagem ".$sobre;

//Corpo da mensagem em texto
//$mail->AltBody = 'Conteudo do e-mail em texto';


//Destinatario 
$mail->AddAddress ($emailDest);

$mail->Send();