Форма обратной связи без обновления страницы - PullRequest
Новая
       0

Форма обратной связи без обновления страницы

0 голосов
/ 16 февраля 2012

Я промочил ноги от обработки формы, так что терпите меня. У меня есть основная форма HTML и скрипт, который отправляет почту. На данный момент отправляет и обновляет чтобы дать отзыв. Что бы я хотел, чтобы можно было оставить отзыв без обновления страницы.

HTML 

<html>
<head>
<title>E-Mail Form</title>
</head>
<body>
<form action="beta_sendmail.php" method="POST">
<p><strong>Name: </strong><br/>
<input type="text" size="25" name="name" /></p>
<p><strong>E-Mail Address: </strong><br />
<input type="text" size="25" name="email" /></p>
<p><strong>Message: </strong><br />
<textarea name="message" cols="30" rows="5"></textarea></p>
<p><input type="submit" value="send" /></p>
</form>
</body>
</html>

и PHP 

<html>
<head>
<title>Mail Sending Script</title>
</head>
<body>
<?php
echo "<p>Thank you, <b>".$_POST["name"]."</b>, for your message!</p>";
echo "<p>Your email address is: <b>".$_POST["email"]."</b>.</p>";
echo "<p>Your message was: <br/>";
echo $_POST["message"]."</p>";
//start building the mail string
$msg = "Name: ".$_POST["name"]."\n";
$msg .= "E-Mail: ".$_POST["email"]."\n";
$msg .= "Message: ".$_POST["message"]."\n";
//set up the mail
$recipient = "mailto@me.com";
$subject = "Form Submission Results";
$mailheaders = "From: My Web Site <defaultaddress@yourdomain.com> \n";
$mailheaders = "Reply-To: ".$_POST["email"];
//send the mail
mail($recipient, $subject, $msg, $mailheaders);
?>
</body>
</html>

Ответы [ 5 ]

2 голосов
/ 16 февраля 2012

Если вы используете jQuery, как предлагал @Michael, и который я также рекомендую, вот отличный урок, чтобы сделать именно это: http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

В сущности, есть 3 части:

1) HTML-форма

2) Javascript / jQuery

  • Обрабатывает форму отправки события. Вы можете выполнить проверку на стороне клиента здесь, и, если вы удовлетворены, отправьте форму через AJAX на ваш php-скрипт для обработки.

3) PHP скрипт

  • Обрабатывает обработку формы на стороне сервера. Возвращает данные обратно в ваш javascript, чтобы вы могли продолжить обработку и делать с ней все, что вам нужно.
1 голос
/ 16 февраля 2012

Вы должны будете использовать jQuery. Примерно так: 

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

    var dataString = 'postVariableName=' + $("postVariableValue").val() + '&postVariableName=' + $("postVariableValue").val();

    //alert (dataString);return false;   //to check the string being sent 
    $.ajax({  
        type: "POST", 
        url: "postPath.php",
        data: dataString,  
        success: function(data) {
            //create jquery object from the response html
            var $response=$(data);

            //query the jq object for the values
            var title = $response.filter('div#title').text(); //Check the resulting post page output for a div with an ID of "title", and put it's text into a variable called "title"
            var cbody = $response.filter('div#cbody').html(); //Check the resulting post page output for a div with an ID of "cbody", and put it's html into a variable called "cbody"

            $("input#title").val(title); //Display the title on the page
            $("div#cbody").html(cbody); //Display the cbody on the page
        }
    });
});
1 голос
/ 16 февраля 2012

Возможно, вы захотите начать заниматься AJAX.

http://www.smashingmagazine.com/2008/10/16/50-excellent-ajax-tutorials/

http://en.wikipedia.org/wiki/AJAX

1 голос
/ 16 февраля 2012

Вы можете пойти 2 способами:

1.) Чтобы посмотреть какой-нибудь JavaScript, который сделает эту работу за вас, скорее всего, AJAX, через jQuery или Dojo или, если вы мазохист, вручную.

2.) Поместите iframe где-нибудь на своей странице и сделайте свою форму target iframe - это может быть часть страницы, на которой находится форма - поэтому большая часть страницы будет стоять на месте, пока форма заменяется сообщением "спасибо".

1 голос
/ 16 февраля 2012

Здесь вам нужно начать изучать AJAX.Его цель выполняет именно то, что вы делаете.Это означает Асинхронный Javascript И XML.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...