Send information without finalizing the form (Submit)

Asked

Viewed 99 times

0

I have a form in html and I need to fill the fields and click on the "Next" button to send the form by email without the person noticing, because the form continues in the next steps...

<div class="form-group">
  <input id="texto nomeform1" minlength="5" type="text" class="form-control" name="nome" placeholder="Nome Completo*">
</div>

<div class="form-group">
  <input id="texto" type="email" class="form-control" name="email" placeholder="Email Válido*">
</div>

<div class="form-group">
  <input type="text" class="form-control" id="celular" name="celular" placeholder="Telefone">
</div>

<div class="form-group">
  <input type="text" class="form-control" name="sobre" placeholder="Como ficou sabendo sobre festas?">
 </div>
                            
<button type="button" name="usrSubmit" class="next action-button enviar_email" id="proximo" disabled value="Próximo"> Próximo</button>

Currently I can already send to the email the information I want but it finalizes the form...

php javascript html jquery ajax

  • You mean the page updates and therefore the rest of the form is never presented?

  • @Joãolucas as the form is completed in 4 parts by the user, I need that in the transition from step 1 to step 2 is triggered by email the completed data of step 1 without the user realizing that a part of his data has already been sent. Currently it does the triggers the email and finalizes the form and goes back to step 1 to be filled again.

  • What you should do is use Jquery to make this form switch, for example, opening and closing the parts according to the fill and then sending everything at once.

  • But the other parts of the form are missing to rehearse an answer.

  • What comes after sending the data?

  • Should the data be sent by e-mail after each step? Or it can be hidden while the later step is filled in?

Show 1 more comment

1 answer

0

Hi @Jvs Corrêa,

Let’s assume that you are already with Ajax implemented, if you are not need to add a code like this:

$("#form1 .next").click(function(){


    var form = $(this);
        var formdata = false;
        if (window.FormData){
            formdata = new FormData(form[0]);
        }

        var formAction = form.attr('action');
        $.ajax({
            url         : "form-folder/salvar.php",
            data        : formdata ? formdata : form.serialize(),
            cache       : false,
            contentType : false,
            processData : false,
            type        : 'GET',            
            success     : function(data, textStatus, jqXHR){

                // Callback code

                //alert(data);

                //$(".temp_message").html(data);


            }
        });

        return false

});//end click

This way, when you click on btn '.next', the data will be sent via GET with Ajax to the file that you manage the data, sending them by email. In this scenario, each next, a new email will be sent, without reloading the page.

  • If you want the email to be sent only at the end of all next’s, that is to say fill the Passo1, click next, Passo2 > next, and when it arrives at the last one then the sending occurs, then some more items need to be implemented. It can be with the layout itself, creating a guide mechanism, where you run an Hide() and show() according to next, or working with sessions.

Browser other questions tagged php javascript html jquery ajax

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