PHP Ajax форма контакта

Im построение контактной формы с помощью PHP и Ajax с помощью следующего кода:PHP Ajax форма контакта

HTML:

<head> 
<script src="js/app.js"></script>  
</head> 
<body> 
<form id="ajax-contact" method="post" action="php/mailer.php">  
    <input type="text" id="name" name="name" required> 
    <input type="text" id="email" name="email" required> 
    <textarea id="message" name="message" required></textarea>  
    <input class="submit" type="submit" value="Send"> 
</form> 
<div id="form-messages"> 
</div> 
</body>

AJAX:

$(function() { 
    var form = $('#ajax-contact'); 

    var formMessages = $('#form-messages'); 

}); 
$(form).submit(function(event) { 
    event.preventDefault(); 

}); 
var formData = $(form).serialize(); 

$.ajax({ 
    type: 'POST', 
    url: $(form).attr('action'), 
    data: formData 
}).done(function(response) { 
    $(formMessages).removeClass('error'); 
    $(formMessages).addClass('success'); 

    $(formMessages).text(response); 

    $('#name').val(''); 
    $('#email').val(''); 
    $('#message').val(''); 
}).fail(function(data) { 
    $(formMessages).removeClass('success'); 
    $(formMessages).addClass('error'); 

    if (data.responseText !== '') { 
     $(formMessages).text(data.responseText); 
    } else { 
     $(formMessages).text('Oops! An error occured and your message could not be sent.'); 
    } 
});

MAILER:

<?php 

    if ($_SERVER["REQUEST_METHOD"] == "POST") { 
     $name = strip_tags(trim($_POST["name"])); 
       $name = str_replace(array("\r","\n"),array(" "," "),$name); 
     $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL); 
     $message = trim($_POST["message"]); 

     if (empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) { 
      http_response_code(400); 
      echo "Oops! There was a problem with your submission. Please complete the form and try again."; 
      exit; 
     } 

     $recipient = "[email protected]"; 

     $subject = "New contact from $name"; 

     $email_content = "Name: $name\n"; 
     $email_content .= "Email: $email\n\n"; 
     $email_content .= "Message:\n$message\n"; 

     $email_headers = "From: $name <$email>"; 

     if (mail($recipient, $subject, $email_content, $email_headers)) { 
      http_response_code(200); 
      echo "Thank You! Your message has been sent."; 
     } else { 
      http_response_code(500); 
      echo "Oops! Something went wrong and we couldn't send your message."; 
     } 

    } else { 
     http_response_code(403); 
     echo "There was a problem with your submission, please try again."; 
    } 

?>

В Ajax при действии Я загружаю php mailer f ile отправить почту на мой текущий адрес электронной почты, но я хочу сделать это в фоновом режиме, страница не должна быть загружена, так как я использую ajax ... Я хочу остаться на html-странице формы, не перенаправляя ее php для отправки этой почты и просто показывать успешные или неудачные сообщения div: form-messages.

Что мне здесь не хватает?

источник

2015-02-02 Sesamzaad

Поместите вызов ajax в функцию отправки формы. – wayzz

Пробовал и ничего, все еще перенаправлено – Sesamzaad

попробуйте добавить return false; before event.preventDefault(); – wayzz

попробовать с этим:

Bind вашего входа кнопку отправки с классом «отправить», чтобы отправить форму с помощью Ajax. И вы можете сбросить форму, используя $ (form) [0] .reset(); INSEAD четких входных значений

$('.submit').click(function() { //<-- changed/new 
    var form = $('#ajax-contact'); 
    var formMessages = $('#form-messages'); 
    var formData = $(form).serialize(); 

    $.ajax({ 
      type: 'POST', 
      url: $(form).attr('action'), 
      data: formData 
    }).done(function(response) { 
      $(formMessages).removeClass('error'); 
      $(formMessages).addClass('success'); 

      $(formMessages).text(response); 

      $(form)[0].reset(); //<-- changed/new 

    }).fail(function(data) { 
      $(formMessages).removeClass('success'); 
      $(formMessages).addClass('error'); 

      if (data.responseText !== '') { 
       $(formMessages).text(data.responseText); 
      } else { 
       $(formMessages).text('Oops! An error occured and your message could not be sent.'); 
      } 
    }); 
});

источник

2015-02-02 13:50:53 nada

Зачем OP «попробуйте с этим»? Пожалуйста, дайте понять, что вы сделали для OP и будущих посетителей SO. Кроме того, вы не предотвратили перенаправление. –

Спасибо за образец кода, но он по-прежнему перенаправляет меня на страницу php ... – Sesamzaad

удалите «метод» с

попробовать что-то вроде этого:

$('.submit').click(function(event) { 
    //use this to dont submit the form 
    event.preventDefault(); 
    //your ajax stuff 
    $.ajax.... 
    //if you dont want to use the preventDefault function just 
    return false; 
}

источник

2015-02-02 14:15:34

Спасибо, но не мешает перенаправлению – Sesamzaad

comment '$ (form) .submit (function (event) {' function –

Не знаете ваш комментарий? – Sesamzaad

Попробуйте удалить action="php/mailer" и сделать что-то вроде следующего

function sendEmail(message){ 
    var data = new XMLHttpRequest(); 
    data.open("POST","php/mailer.php"); 

    data.onreadystatechange = function(){ 
     if(data.readyState === 4 && data.status === 200){ 
      document.getElementById('results').innerHTML = "Email sent"; 
     } 
    } 
    data.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
    data.send("message=" + message); 
}

вы можете вызвать функцию в отправке кнопка.

источник

2015-02-02 14:24:56 julekgwa

PHP Ajax форма контакта

ответ

Смежные вопросы