Контактная форма без обновления

Question

Контактная форма без обновления

Я пытался создать эту форму для отображения ошибок или подтверждающего сообщения без обновления страницы.

Я пытался использовать JQuery, но безуспешно. Мой код jQuery совершенно неправильный, и я пытался создавать его слишком много раз.

Может кто-нибудь, пожалуйста, укажите мне в правильном направлении?

HTML

   <form method="post" action="index.php" autocomplete="on">

<label>Name</label>
<input name="name" placeholder="What is your name?">

<label>Email</label>
<input name="email" type="email" placeholder="Your email please">

<label>Message</label>
<textarea rows="10"name="message" placeholder="What would you like to say?"></textarea>

<label>*What is 2+2? (Anti-spam)</label>
<input name="human" placeholder="Type Here">

<input id="submit" name="submit" type="submit" value="Submit">

</form>

PHP

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: removed ';
$to = 'removed';
$subject = 'From: removed';
$human = $_POST['human'];

$body = "From: $name\n E-Mail: $email\n Message:\n $message";

if ($_POST['submit']) {
if ($name != '' && $email != '') {
if ($human == '4') {
if (mail ($to, $subject, $body, $from)) {
echo '<p>Your message has been sent!</p>';
} else {
echo '<p>Something went wrong, go back and try again!</p>';
}
} else if ($_POST['submit'] && $human != '4') {
echo '<p>You answered the anti-spam question incorrectly!</p>';
}
} else {
echo '<p>You need to fill in all required fields!!</p>';
}
}
?>

-3

contact-form jquery php

Решение

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

Да я мог. Для достижения этого вам необходимо использовать AJAX. Должно работать что-то вроде следующего, но я не проверял это:

$('form').submit(function(e) {
var formData = $(this).serialize(); //Get the form data (input)

//Post with AJAX
$.post("post-contact.php", formData)
.done(function(data) {
alert('Succes!')
})
.fail(function(data) {
alert('Failed!')
});

return false; //Prevent form from being submitted (same as e.preventDefault())
});

Я надеюсь, что это поможет вам, вы должны прочитать документы для получения дополнительной информации.

1

Источник

Accepted Answer

Посмотрите на $ .post от jQuery.

Вы могли бы иметь такую форму:

<form id="form">
<label for="field">Field</label><br />
<input name="field" id="field" placeholder="Field" />
<span id="responseField"></span>
<br /><br />
<input type='submit' value='Send !'/>
</form>

Проверка PHP так:

$json = array("status" => "OK", "error" => []);
if (isset($_POST['field'])) // Test if every field is here
{
// Test if "field" is OK
if (!preg_match("/^[a-zA-Z0-9]+$/", $_POST['field']))
{
$json['status'] = "NO";
$json['error']['field'] = "Must be alphanumeric";
}
}
else
$json['status'] = "NO";

echo json_encode($json);
exit();

И JS, как это

$(document).on("ready", function() {
$("#form").submit(function() {
var url = "check.php";
$.post(url, {field: $("#field").val()}, function(data) {
var json = $.parseJSON(data);
if (json.status == "OK")
alert("Everything is OK!");
else
$("#responseField").html(json.error.field || "");
});
return false;
});
});

Что произойдет: Вы отправляете значение «field», оно проверяется в PHP (здесь, просто буквенно-цифровая проверка, делайте, что хотите). Когда вы проверяете форму, заполните $json переменная. Отправь это после. Затем ваш JS проверит, все ли прошло хорошо, иначе он напечатает ваш отзыв в промежутке после поля.

Для большей мобильности, проверьте ответ JasonK, он отправляет всю форму автоматически, что намного лучше, чем создание объекта для отправки. Он также проверяет, не завершается ли запрос ajax, что является очень хорошей привычкой, мой код прост, чтобы понять, как работают запросы AJAX.

2