2013-08-22 2 views
1

У меня есть рабочая контактная форма php, с проверкой HTML5 для входов (добавляется к ним, и введите имя/адрес электронной почты), но у меня есть одна проблема.Форма контакта с PHP с проверкой HTML5, отображение сообщения?

, когда сообщение посылается открывает новую вкладку, и это говорит спасибо Ваше сообщение было отправлено, что является нормальным из-за process.php

<?php 
//Retrieve form data. 
//GET - user submitted data using AJAX 
//POST - in case user does not support javascript, we'll use POST instead 
$name = ($_GET['name']) ? $_GET['name'] : $_POST['name']; 
$email = ($_GET['email']) ?$_GET['email'] : $_POST['email']; 
$website = ($_GET['website']) ?$_GET['website'] : $_POST['website']; 
$comment = ($_GET['comment']) ?$_GET['comment'] : $_POST['comment']; 
//flag to indicate which method it uses. If POST set it to 1 
if ($_POST) $post=1; 
//Simple server side validation for POST data, of course, 
//you should validate the email 
if (!$name) $errors[count($errors)] = 'Please enter your name.'; 
if (!$email) $errors[count($errors)] = 'Please enter your email.'; 
if (!$comment) $errors[count($errors)] = 'Please enter your message.'; 
//if the errors array is empty, send the mail 
if (!$errors) { 
    //recipient - change this to your name and email 
    $to = '[email protected]';  
    //sender 
    $from = $email; 

    //subject and the html message 
    $subject = 'Hello from ' . $name;  
    $message = ' 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head></head> 
    <body> 
    <table> 
     <tr><td>Name: </td><td>' . $name . '</td></tr> 
     <tr><td>Email: </td><td>' . $email . '</td></tr> 
     <tr><td>Message: </td><td>' . nl2br($comment) . '</td></tr> 
    </table> 
    </body> 
    </html>'; 
    //send the mail 
    $result = sendmail($to, $subject, $message, $from); 

    //if POST was used, display the message straight away 
    if ($_POST) { 
     if ($result) echo 'Thank you! We have received your message.'; 
     else echo 'Sorry, unexpected error. Please try again later'; 

    //else if GET was used, return the boolean value so that 
    //ajax script can react accordingly 
    //1 means success, 0 means failed 
    } else { 
     echo $result;  
    } 
//if the errors array has values 
} else { 
    //display the errors message 
    for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>'; 
    echo '<a href="index.html">Back</a>'; 
    exit; 
} 
//Simple mail function with HTML header 
function sendmail($to, $subject, $message, $from) { 
    $headers = "MIME-Version: 1.0" . "\r\n"; 
    $headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n"; 
    $headers .= 'From: ' . $from . "\r\n"; 

    $result = mail($to,$subject,$message,$headers); 

    if ($result) return 1; 
    else return 0; 
} 
?> 

, но как я могу сделать это показать сообщение под кнопку отправки ? это HTML сторона

<form method="post" action="process.php"> 
<div class="element"> 
    <label><i class="icon-user"></i></label> 
    <input type="name" name="name" placeholder="write your name here" class="text" required/> 
</div> 
<br> 
<div class="element"> 
    <label><i class="icon-envelope"></i></label> 
    <input type="email" name="email" placeholder="write your e-mail here" class="text" required/> 
</div> 
<br> 
<div class="element"> 
    <label><i class="icon-comment"></i></label> 
    <textarea name="comment" placeholder="write your message here" class="text textarea"required></textarea> 
</div> 
<br> 
<div class="element el-submit"> 

    <input class="submit" type="submit" id="submit"/> 

</div> 
</form> 

Я имею в виду, когда я нажимаю кнопку отправки, и это хорошо, я хочу, чтобы отобразить сообщение, как «Ваше сообщение было отправлено», но я хочу под кнопку отправки, не на новой странице

ответ

0

Если вы не хотите показывать, что на следующей странице создайте всплывающее окно, чтобы показать сообщение «Спасибо», его внешний вид выглядит великолепно. используйте ваш html-код таким образом.

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<script> 
function myFunction() 
{ 
alert("Thanks for mail!"); 
} 
</script> 
</head> 

<body> 
<form method="post" action="process.php"> 
<div class="element"> 
    <label><i class="icon-user"></i></label> 
    <input type="name" name="name" placeholder="write your name here" class="text" required/> 
</div> 
<br> 
<div class="element"> 
    <label><i class="icon-envelope"></i></label> 
    <input type="email" name="email" placeholder="write your e-mail here" class="text" required/> 
</div> 
<br> 
<div class="element"> 
    <label><i class="icon-comment"></i></label> 
    <textarea name="comment" placeholder="write your message here" class="text textarea"required></textarea> 
</div> 
<br> 
<div class="element el-submit"> 

    <input type="button" onclick="myFunction()" value="Submit"> 

</div> 
</form> 
</body> 
</html> 
1

Сделайте файл в один, так что вы POST данные в тот же файл, как показано ниже

<?php 
if($_POST) //If the form is submitted 
{ 
$notification=""; //Used for catching all your messages 
//Retrieve form data. 
//GET - user submitted data using AJAX 
//POST - in case user does not support javascript, we'll use POST instead 
$name = ($_GET['name']) ? $_GET['name'] : $_POST['name']; 
$email = ($_GET['email']) ?$_GET['email'] : $_POST['email']; 
$website = ($_GET['website']) ?$_GET['website'] : $_POST['website']; 
$comment = ($_GET['comment']) ?$_GET['comment'] : $_POST['comment']; 
//flag to indicate which method it uses. If POST set it to 1 
if ($_POST) $post=1; 
//Simple server side validation for POST data, of course, 
//you should validate the email 
if (!$name) $errors[count($errors)] = 'Please enter your name.'; 
if (!$email) $errors[count($errors)] = 'Please enter your email.'; 
if (!$comment) $errors[count($errors)] = 'Please enter your message.'; 
//if the errors array is empty, send the mail 
if (!$errors) { 
//recipient - change this to your name and email 
$to = '[email protected]';  
//sender 
$from = $email; 

//subject and the html message 
$subject = 'Hello from ' . $name;  
$message = ' 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head></head> 
<body> 
<table> 
    <tr><td>Name: </td><td>' . $name . '</td></tr> 
    <tr><td>Email: </td><td>' . $email . '</td></tr> 
    <tr><td>Message: </td><td>' . nl2br($comment) . '</td></tr> 
</table> 
</body> 
</html>'; 
//send the mail 
$result = sendmail($to, $subject, $message, $from); 

//if POST was used, display the message straight away 
if ($_POST) { 
    if ($result) echo 'Thank you! We have received your message.'; 
    else $notification.= 'Sorry, unexpected error. Please try again later'; 

//else if GET was used, return the boolean value so that 
//ajax script can react accordingly 
//1 means success, 0 means failed 
} else { 
    $notification.= $result;  
} 
//if the errors array has values 
} else { 
//display the errors message 
for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>'; 
$notification.= '<a href="index.html">Back</a>'; 
exit; 
} 
//Simple mail function with HTML header 
function sendmail($to, $subject, $message, $from) { 
$headers = "MIME-Version: 1.0" . "\r\n"; 
$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n"; 
    $headers .= 'From: ' . $from . "\r\n"; 
    $result = mail($to,$subject,$message,$headers); 
    if ($result) return 1; 
    else return 0; 
} 
} //First If loop 
?> 
<form method="post" action="process.php"> 
<div class="element"> 
<label><i class="icon-user"></i></label> 
<input type="name" name="name" placeholder="write your name here" class="text" required/> 
</div> 
<br> 
<div class="element"> 
<label><i class="icon-envelope"></i></label> 
<input type="email" name="email" placeholder="write your e-mail here" class="text" required/> 
</div> 
<br> 
<div class="element"> 
<label><i class="icon-comment"></i></label> 
<textarea name="comment" placeholder="write your message here" class="text textarea"required></textarea> 
</div> 
<br> 
<div class="element el-submit"> 

<input class="submit" type="submit" id="submit"/> 
<?php 
if(!empty($notification)) //This will display notification after submit 
{ 
echo $notification; 
} 
?> 
</div> 
</form> 

Вы также можете использовать AJAX для достижения того, что вам требуется. Следующие учебные пособия являются лучшими образцами.

  1. http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

  2. http://www.9lessons.info/2009/04/submit-form-jquery-and-ajax.html

  3. http://www.phpeveryday.com/articles/jQuery-AJAX-Form-Submission-P973.html

0

важный момент пропустил в ответах до сих пор является action="some.php", который должен быть изменен на action="" вы должны удалить стороне сервера PHP; следовательно, действие «пост» находится внутри контактной формы. Я нашел всеобъемлющий учебник по этому вопросу, относящийся к HTML5 CSS3 и PHP here.

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