Показывать ответ отправленной формы на той же странице. (Нет обновления)

Как я могу показать ответ из представленной формы контакта (на той же странице под формой), а не отправлять пользователя на новую страницу после отправки?

Я видел, как некоторые люди создавали элемент div, а затем добавляли в него полученный ответ. Это рекомендуемый подход?

Вот что я имею до сих пор:

PHP:

<?php $name =$_GET['name']; $email =$_GET['name']; $message =$_GET['name']; $to = "support@loaidesign.co.uk"; $subject = ""; $message = ""; $headers = "From: $email"; if(mail($to,$subject,$message,$headers)) { echo "<h2>Thank you for your comment</h2>"; } else{ echo "<h2>Sorry, there has been an error</2>"; } ?>

и вот HTML :

 <div class="wrapperB"> <div class="content"> <form id="contactForm" action="assets/email.php" method="get"> <label for="name">Your Name</label> <input name="name" id="name" type="text" required placeholder="Please enter your name"> <label for="email">Email Address</label> <input name="email" id="email" type="email" required placeholder="Please enter your email address here"> <label for="message">Message</label> <textarea name="message" id="message" required></textarea> <button id="submit" type="submit">Send</button> </form> </div> </div> </div>

Это рабочий пример с использованием предлагаемого примера с сайта JQuery и ответа pajaja .

Решение:

Поместите это в <head> своей веб-страницы.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

ИЛИ

Загрузите JQuery и включите его так же.

Форма:

Ваша контактная форма остается неизменной.

 <form id="contactForm" action="assets/email.php" Method="POST"> <label for="name">Your Name</label> <input name="name" type="text" required placeholder="Please enter your name"> <label for="email">Email Address</label> <input name="email" type="email" required placeholder="Please enter your email address here"> <label for="message">Message</label> <textarea name="message" required></textarea> <button type="submit">Send</button> </form>

Возвращенные данные:

Добавьте свой элемент ответа, который вы хотите в теле.

<div id="contactResponse"></div>

Javascript:

Теперь разместите (желательно непосредственно перед </body> ) код javascript:

 <script> $("#contactForm").submit(function(event) { /* stop form from submitting normally */ event.preventDefault(); /* get some values from elements on the page: */ var $form = $( this ), $submit = $form.find( 'button[type="submit"]' ), name_value = $form.find( 'input[name="name"]' ).val(), email_value = $form.find( 'input[name="email"]' ).val(), message_value = $form.find( 'textarea[name="message"]' ).val(), url = $form.attr('action'); /* Send the data using post */ var posting = $.post( url, { name: name_value, email: email_value, message: message_value }); posting.done(function( data ) { /* Put the results in a div */ $( "#contactResponse" ).html(data); /* Change the button text. */ $submit.text('Sent, Thank you'); /* Disable the button. */ $submit.attr("disabled", true); }); }); </script>

Скрипт действия:

Ваш контактный (PHP) файл остается прежним, но меняет $ _GET на $ _POST:

 <?php $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $to = "xxx@xxx.xxx"; $subject = ""; $message = ""; $headers = "From: $email"; if( mail($to,$subject,$message,$headers) ) { echo "<h2>Thank you for your comment</h2>"; } else { echo "<h2>Sorry, there has been an error</h2>"; } ?>

Результат:

Теперь это должно отправить данные из формы в submit, а затем отобразить возвращенные данные в элементе #contactResponse . Кнопка также установит текст в «Отправлено, спасибо», а также отключение кнопки.

Для этого вам нужно использовать ajax. Самое простое решение – получить jQuery javascript-библиотеку, используя ее .post функцию, для которой вы можете найти документацию и примеры здесь . В вашем случае это будет выглядеть примерно так:

 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#submit").click(function(){ var name_value = $("#name").val(); var email_value = $("#email").val(); var message_value = $("#message").val(); $.post("assets/email.php", { name: name_value, email: email_value, message: message_value }).done(function(data) { $("#response").html(data); }); }); }) </script>

Также неправильный код PHP:

 $name =$_GET['name']; $email =$_GET['name']; $message =$_GET['name']

Вы получаете $_GET['name'] для всех трех переменных.

edit : Я добавил полный пример, но он не протестирован, так что вы можете иметь представление о том, как делать то, что вы хотите. Кроме того, поскольку это использует HTTP POST-запрос, вам нужно будет отредактировать свой PHP, чтобы он получал значения $_POST массива, а не $_GET . Также вам нужно добавить <div id="response"></div> где вы хотите отобразить ответ.

Вы можете просто сохранить его на одной странице. Например, если ваша форма находится на contact.php , просто повторите свой код следующим образом:

 <form action='' method='post'> <input type='test' name='name' placeholder='Your name here' required='required' /><br /> <input type='submit' value='submit' name='contact' /> </form> <?php if(isset($_POST['contact']) && !empty($_POST['name'])){ echo "You submitted this form with value ".$_POST['name']."."; } ?>

Конечно, это перезагрузит эту страницу. Если вы не хотите, чтобы страница была перезагружена, вам необходимо использовать ajax.

Я сделал это с помощью JQuery Form Plugin . Здесь есть еще один.

Мой прецедент был гораздо более активным. Он включал загрузку файла вместе с некоторыми введенными пользователем полями и базовыми учетными данными в заголовке. Плагин Form обрабатывал их все, используя обычные поля $ .ajax.