Problems with forms

Asked

Viewed 58 times

0

I’m trying to make a form using js and php, only when I click the send button, it always stays with "Sending email..." and never sends, I checked console and says that the error is in email.php (404 error not found)... If anyone can help me, follow below the codes I used:

HTML:

<div class="contact-form">
     <h3>Contate-nos</h3>
          <form id="main-contact-form" name="contact-form" method="post"  action="email.php">
               <div class="form-group">
                    <input type="text" name="name" class="form-control" id="name" placeholder="Nome">
               </div>
               <div class="form-group">
                   <input type="email" name="email" class="form-control" id="email" placeholder="Email">
               </div>
               <div class="form-group">
                   <input type="text" name="subject" class="form-control" id="subject" placeholder="Assunto">
               </div>
               <div class="form-group">
                   <textarea name="message" class="form-control" rows="8" id="message" placeholder="Message"></textarea>
               </div>
               <button type="submit" name="submit" class="btn btn-primary">Enviar Mensagem</button>
         </form>
</div>

JS:

<script>
       var form = $('#main-contact-form');
       form.submit(function(event){
            event.preventDefault();
        var form_status = $('<div class="form_status"></div>');
           var data = {
               name: $('#name').val(),
               email: $('#email').val(),
               subject: $('#subject').val(),
               message: $('#message').val()
           };
           $.ajax({
               url: $(this).attr('action'),
               type: "POST",
               dataType: "json",
               data: {'data': data},
               beforeSend: function(){
                   form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Enviando email...</p>').fadeIn() );
               },
            success: function (data) {
                if(data == 1){
                    form_status.html('<p class="text-success">Sucesso!</p>').delay(3000).fadeOut();
                }
                else{
                    form_status.html('<p class="text-error">Desculpe,
tente novamente!</p>').delay(3000).fadeOut();
                }
            },
            error: function (xhr, status, error) {
                console.log(error);
            }
         });
    });
   </script>

PHP:

<?php
$data = $_POST['data'];
$name       = $data['name'];
$from       = $data['email'];
$subject    = $data['subject'];
$message    = $data['message'];
$to         = '[email protected]';
$headers = "MIME-Version: 1.0";
$headers .= "Content-type: text/plain; charset=iso-8859-1";
$headers .= "From: {$name} <{$from}>";
$headers .= "Reply-To: <{$from}>";
$headers .= "Subject: {$subject}";
$headers .= "X-Mailer: PHP/".phpversion();
if(mail($to, $subject, $message, $headers)){
    echo 1;
}
else{
    echo 0;
}
javascript html ajax

  • The archive email.php is there ? It is in the same directory as this file HTML ?

  • it gets, this php I put there is email.php

  • File name is correct ? Because error 404 want that does not exist or not found, practically the same thing. Is using .htaccess ? If yes, ask the question.

  • Yes, I have checked several times and even renamed, but it is correct yes :c, I am not using htacess

  • What is the complete path that appears in Console on the flap Network ?

  • Within your ajax has this code url: $(this).attr('action'), prints it on the console and see if it is loading the correct link from email.php, console.log($(this).attr('action'));

  • only gave Undefined

  • Your error is not in Ajax or anything, it is exclusively in PHP. Your email sending code does not work, it is returning error, so your form does not advance. Review this sending code because it is wrong.

Show 3 more comments

1 answer

0

I think you should write your code again Javascript, take this example:

$( "#formulario" ).submit(function( event ) {
  event.preventDefault();
  $.ajax({
    method: "POST",
    url: $(this).attr('action'),
    data: { nome: $("[name='nome']").val(), msg: $("[name='msg']").val() }
  })
  .done(function( data ) {
    console.log(data.form);
  });
  
});
input[type='text'] {
  letter-spacing: 1px;
  padding: 8px 4px;
  width: 250px;
}

input[type='submit'] {
  background: #069;
  border: 0px;
  color: #fff;
  letter-spacing: 1px;
  padding: 8px 24px;
  text-transform: uppercase;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<form id="formulario" action="https://httpbin.org/post">
  <p><input type="text" name="nome" value="Stackoverflow Português :)"></p>
  <p><input type="text" name="msg" value="O script está funcionando :D"></p>
  <p><input type="submit" value="Enviar"></p>
</form>

Browser other questions tagged javascript html ajax

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