Как мне изменить простую форму ниже запустить на Ajax с PHP?

Мне нужно изменить форму, чья разметка и код php, как показано ниже, чтобы работать без загрузки страницы. Так что это будет форма Ajax PHP. Я довольно новичок в AJAX. Кто-нибудь, пожалуйста, подскажите мне, как это сделать. Я буду очень благодарен.

Обратите внимание, что копия данных формы, заполненной посетителем, должна быть отправлена ​​посетителю по электронной почте.

МАРКУПЦИЯ КАК НИЖЕ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Contact form to email</title>

</head>
<body>
<div id="myemailform">
<form action="contact.php" method="post" name="myemailform">
Enter Name: <input name="name" type="text" />
Enter Email Address: <input name="email" type="text" />
Enter Message:<textarea name="message"></textarea>
<input type="submit" value="Send Form" />&nbsp;
</form>
</div>

<script type="text/javascript" src="myform.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Contact form to email</title>
</head>

<body>

<form method="post" name="myemailform" action="contact.php">

Enter Name: <input type="text" name="name">

Enter Email Address:    <input type="text" name="email">

Enter Message:  <textarea name="message"></textarea>

<input type="submit" value="Send Form">
</form>

</body>

</html>

КОД PHP ЕСТЬ (contact.php):

<?php
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$message = $_POST['message'];

$email_from = '[email protected]';

$email_subject = "New Form submission";

$email_body = "You have received a new message from the user $name.\n".
"Here is the message: $message.\n";

$aEmails = array();
$aEmails[] = '[email protected]';
$aEmails[] = $visitor_email;$headers = "From: $email_from \r\n";

$headers .= "Reply-To: $visitor_email \r\n";

foreach($aEmails as $aEmail) {
mail($aEmail,$email_subject,$email_body,$headers);
}?>

КОД JS:

$('form#myemailform').on('submit',function(e){
$.ajax({
type: 'post',
url: 'contact.php',
data: $('form#myemailform').serialize(),
success: function (res) {
alert(res);
}
});
e.preventDefault();
});

Заранее спасибо.

-1

Решение

Дай id в вашей форме и передать его через ajax что-то вроде этого:

$('form#myemailform').on('submit',function(e){
$.ajax({
type: 'post',
url: '/your/php/page/path',
data: $('form#myemailform').serialize(),
success: function (res) {
alert(res);
}
});
e.preventDefault();
});

В вашем PHP страница вы можете получить доступ ко всем вашим POST переменные. И ты готов идти …

PS: должно быть JQuery Библиотека импортирована перед запуском этого скрипта.

0

Другие решения

Я бы попробовал следующее:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('form').submit(function(e){
e.preventDefault();
var url = $(this).attr('action');
var postdata = $(this).serializeArray(),
$.post(url, postdata, function(results){
//success code
});
});
</script>
0

Пример для вас

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$('form[name=myemailform]').submit(function(e){
e.preventDefault();
$.ajax({
url: $(this).attr('action'),
type: 'post',
data: $(this).serialize(),
success: function(data){
//console.log(data); //data is which is echoing in PHP end.
}
});
});
</script>
0
По вопросам рекламы [email protected]