event.preventDefault () for attachment with php and js [duplicate]

0

I have the following script that does a validation in the contact form and shows the message in div like the message was sent or not, as this is sent below the normal message in my email, but in that same form I have one field attachment and when I try to send an attachment I do not get anything in my email.

// Contact form 
var form = $('#main-contact-form');
form.submit(function(event){
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        type: "POST",
        url: $(this).attr('action'),
        data: $("#main-contact-form").serialize(),
        beforeSend: function(){
            form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Enviando Mensagem...</p>').fadeIn() );
        }
    }).done(function(data){
        form_status.html('<p class="text-success">Mensagem enviada. O mais breve possível retornaremos o contato.</p>').delay(9000).fadeOut();
    });
});
  

Form

<form  enctype="multipart/form-data"  name="contact-form" action="envia.php" method="post" id="main-contact-form"> <!--  chama o envia.php --> 
                                <!--<form id="main-contact-form" name="contact-form" method="post" form action="envia.php"> -->   

                             <div class="form-group">
                                <input type="text"  input name="nomeremetente" id="nomeremetente" class="form-control" placeholder="Nome" required>
                            </div>
                             <div class="form-group">
                                <input type="telefone" input name="telefone" class="form-control" placeholder="DDD + Telefone" required>
                            </div>
                            <div class="form-group">
                                <input type="empresa" input name="empresa" class="form-control" placeholder="Empresa" required>
                            </div>
                             <div class="form-group">
                                <input type="cidade" input name="cidade" class="form-control" placeholder="Cidade" required>
                            </div>
                            <div class="form-group">
                                <input type="email" input name="emailremetente" class="form-control" placeholder="E-mail" required>
                            </div>
                            <div class="form-group">
                               <!--<input type="text" input name="assunto" class="form-control" placeholder="Assunto" required>-->
                               <select id="mySelect" input name="assunto" size="1" class="form-control"  required>
                               <option value="Sem Assunto">Selecione o Assunto</option>
                               <option value="Comercial">Comercial</option>
                               <option value="Cotação">Cotação</option>
                               <option value="Informação">Informação</option>
                               <option value="Reclamação">Reclamação</option>
                               <option value="Sugestão">Sugestão</option>
                               <option value="Trabalhe Conosco">Trabalhe Conosco</option>
                               <option value="Outros">Outros</option>
                               </select>
                            </div>
                            <div class="form-group" id="inputOculto">
                                  <input id="anexo" name="arquivo" type="file"  class="form-control-anexo"  input/> 
                            </div>            

                            <div class="form-group">
                              <textarea input name="mensagem" class="form-control" rows="3" placeholder="Mensagem" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">Enviar Mensagem</button>
                            </form> 
    
asked by anonymous 05.04.2018 / 20:21

1 answer

1

First check the form declaration if you have the enctype="multipart/form-data" tag then try using the FormData

Ex

 $.ajax({
        type: "POST",
        url: $(this).attr('action'),
        data: new FormData(this),
        processData: false,
        contentType: false,
        beforeSend: function(){
            form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Enviando Mensagem...</p>').fadeIn() );
        }
    }).done(function(data){
        form_status.html('<p class="text-success">Mensagem enviada. O mais breve possível retornaremos o contato.</p>').delay(9000).fadeOut();
    });
    
05.04.2018 / 20:43