| Luter1984 | 09.11.2010 09:35 |
Форма для добавления отзывов без перезагрузки страницы
Доброго времени суток! Совсем недавно начал заниматься JavaScript программированием и возникает очень много вопросов...Как например и сейчас... :).
На сайте имеется колонка с отзывами и форма для добавления отзывов:
следующего вида:
/////////////////////////////////////// view.php ////////////////////////////////////
.................................................. .................................................. .
<script language="JavaScript" type="text/javascript" src="js/comm.js"></script>
<script language="JavaScript" type="text/javascript" src="js/JsHttpRequest.js"></script>
.................................................. .................................................. .......
<!--Блок для добавления комментариев-->
<p class='otsiv_sapis_2'>Добавить новый отзыв:</p>
<div align="center" id="cerror"></div>
<!--Форма для добавления комментариев-->
<form action="#" enctype="multipart/form-data" method="post" name="addcom" id="addcom" onSubmit="return false">
<p class='formcomments_text'><label>Ваше имя:</label>
<input name="author" type="text" size="40" maxlength="40" class="fonesearch" id="author"
onblur="this.className='fonesearch'" onfocus="this.className='fonesearch_2'"/>
</p>
<p class='formcomments_text'>
<label>Текст отзыва:<br />
<textarea name="text_comments" cols="60" rows="10" class="fonetextarea"
onblur="this.className='fonetextarea'" onfocus="this.className='fonetextarea_2'"></textarea>
</label>
</p>
<p class='formcomments_text'>
<label>Введите сумму с картинки:</label><br />
<img src="<?php echo $myarrayres_comsuumma["image"] ?>" /><br />
<input name="proverka" type="text" size="12" maxlength="5" class="fonesearch_2"
onblur="this.className='fonesearch_2'" onfocus="this.className='fonesearch'"/>
</p>
<input name="id" type="hidden" value="<?php echo $id ?>" />
<p class='butcom'>
<input type="image" src="image/knopka_com.gif" class="combut" border="0"
onclick="doLoad(document.getElementById('addcom')) "/>
</p>
</form>
.................................................. .................................................. .
Данные с формы обрабатываются посредством скриптов obcomments.php, comm.js, JsHttpRequest.js и JsHttpRequest.php
Если все данные введены верно, то появляется сообщение. - Спасибо за отзыв и отзыв заносится в базу данных, но чтобы появился и сам отзыв до перезагрузки страницы - этого не происходит. Нужно вручную перезагрузить страницу и, лишь тогда можно увидеть только что введенный отзыв. Как сделать, чтобы информация, которую человек вводит в форму была выведена на страницу сразу же после нажатия кнопки - Добавить...
/////////////////////////////////////// obcomments.php ////////////////////////////////////
.................................................. .................................................. .......
<?php
// Запрет на кэширование
header("Expires: Mon, 23 May 1995 02:00:00 GTM");
header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GTM");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
//****
$log =="";
$error="no"; //флаг наличия ошибки
require_once ("JsHttpRequest.php");
$JsHttpRequest =& new JsHttpRequest("windows-1251");
/*соединение с базой данных и различные проверки на правильность введенных данных*/
.................................................. ..................................
if($error=="no")
{
$prov = 0;
/*создаем переменную с датой*/
$data = date("Y-m-d");
/*добавляем данные в базу*/
$res_comdobav = mysql_query("INSERT INTO commentarii (sametka_id,author,datacomments,text)
VALUES ('$id','$author','$data','$text_comments')",$datab asic);
/*формируем блок отправки письма владельцу сайта*/
/*1 элемент функции mail*/
$address = "Lexluterking@ya.ru";
/*2 элемент функции mail*/
$subject = "Новый отзыв о товаре";
/*вытаскиваем данные из базы данных*/
$res_mail = mysql_query("SELECT title FROM rubriki WHERE id='$id'",$databasic);
/*подпроверка №4 - проверяем на правильность вывод данных в переменную $res_mail*/
if (!$res_mail)
{
echo "<p>Обращение к базе данных не состоялось. Оповестите об этом администратора по email:
Lexluterking@ya.ru <br />
<strong>Код ошибки:</strong></p>";
exit(mysql_error());
}
/*подпроверка №5 - проверяем были ли данные вынесены из базы данных, т.е. существует хотя бы одно значение в
$res_mail*/
if (mysql_num_rows($res_mail) > 0)
{
/*вытаскиваем результаты запроса в переменную массив*/
$myarrayres_mail = mysql_fetch_array($res_mail);
}
/*Действие №4 - избавляемся от накладок при совпадении имен*/
$tovar_title = $myarrayres_mail["title"];
/*3 элемент функции mail*/
$message = "На сайте был размещен отзыв к товару: ".$tovar_title."\nОтзыв добавил(а): ".$author.
"\nДата добавления отзыва: ".$data."\nСодержание отзыва следующее: ".$text_comments.
"\nСсылка на описание товара: http://localhost/rasumeika/view_p.php?id=".$id."";
/*соединяем все элементы почтового сообщения в функцию mail*/
mail($address,$subject,$message,"Content-type:text/plain; Charset=windows-1251\r\n");
$ok ="<p style='font-family:Tahoma, Verdana, Arial, sans-serif; font-size:12px; color:#333333; border:2px solid #0c7f00;
padding:10px; margin:20px; background-color:#E6E9FB;'><strong>Спасибо! Ваш отзыв добавлен!<br />
Через пару минут он будет размещен на сайте</strong></p>";
// преобразуем Enter в перенос строки
$text_comments=str_replace("\n","<br>\n",$text_com ments);
//Помещаем результат в массив
$GLOBALS['_RESULT'] = array(
'error' => 'no',
'text' => $text_comments,
'ok' => $ok
);
}
else //если есть ошибки
{
$log = "<p><font color=#ED401D><strong>Ошибка</strong></font></p><ul style='font-family:Tahoma, Verdana, Arial, sans-serif;
font-size:12px; border:2px solid #ED401D; padding:10px; margin:20px;'>".$log."</ul>";
//Отправляем результат в массив
$GLOBALS['_RESULT'] = array(
'error' => 'yes',
'er_mess' => $log);
}
/////////////////////////////////////// comm.js ////////////////////////////////////
// JavaScript Document
function doLoad(value){
err=document.getElementById('cerror');
err.innerHTML = "<img src='image/loading1.gif' width='16' height='16'><br><p>Ваш отзыв обрабатывается...</p>";
// Create new JsHttpRequest object.
var req = new JsHttpRequest();
// Code automatically called on load finishing.
req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.responseJS.error == 'no') {
// Clear error information.
err.innerHTML = ' ';
// Write req.responseJS to page element (_req.responseJS become responseJS).
err.innerHTML = req.responseJS.ok;
/*очищаем поля формы после успешной отправки сообщения*/
form = document.getElementById('addcom');
form.author.value = "";
form.text_comments.value = "";
form.proverka.value = "";
}
else
{
err.innerHTML = req.responseJS.er_mess;
}
}
}
// Prepare request object (automatically choose GET or POST).
req.open(null, 'obcomments.php', true);
// Send data to backend.
req.send( { q: value } );
}
На сайте имеется колонка с отзывами и форма для добавления отзывов:
следующего вида:
/////////////////////////////////////// view.php ////////////////////////////////////
.................................................. .................................................. .
<script language="JavaScript" type="text/javascript" src="js/comm.js"></script>
<script language="JavaScript" type="text/javascript" src="js/JsHttpRequest.js"></script>
.................................................. .................................................. .......
<!--Блок для добавления комментариев-->
<p class='otsiv_sapis_2'>Добавить новый отзыв:</p>
<div align="center" id="cerror"></div>
<!--Форма для добавления комментариев-->
<form action="#" enctype="multipart/form-data" method="post" name="addcom" id="addcom" onSubmit="return false">
<p class='formcomments_text'><label>Ваше имя:</label>
<input name="author" type="text" size="40" maxlength="40" class="fonesearch" id="author"
onblur="this.className='fonesearch'" onfocus="this.className='fonesearch_2'"/>
</p>
<p class='formcomments_text'>
<label>Текст отзыва:<br />
<textarea name="text_comments" cols="60" rows="10" class="fonetextarea"
onblur="this.className='fonetextarea'" onfocus="this.className='fonetextarea_2'"></textarea>
</label>
</p>
<p class='formcomments_text'>
<label>Введите сумму с картинки:</label><br />
<img src="<?php echo $myarrayres_comsuumma["image"] ?>" /><br />
<input name="proverka" type="text" size="12" maxlength="5" class="fonesearch_2"
onblur="this.className='fonesearch_2'" onfocus="this.className='fonesearch'"/>
</p>
<input name="id" type="hidden" value="<?php echo $id ?>" />
<p class='butcom'>
<input type="image" src="image/knopka_com.gif" class="combut" border="0"
onclick="doLoad(document.getElementById('addcom')) "/>
</p>
</form>
.................................................. .................................................. .
Данные с формы обрабатываются посредством скриптов obcomments.php, comm.js, JsHttpRequest.js и JsHttpRequest.php
Если все данные введены верно, то появляется сообщение. - Спасибо за отзыв и отзыв заносится в базу данных, но чтобы появился и сам отзыв до перезагрузки страницы - этого не происходит. Нужно вручную перезагрузить страницу и, лишь тогда можно увидеть только что введенный отзыв. Как сделать, чтобы информация, которую человек вводит в форму была выведена на страницу сразу же после нажатия кнопки - Добавить...
/////////////////////////////////////// obcomments.php ////////////////////////////////////
.................................................. .................................................. .......
<?php
// Запрет на кэширование
header("Expires: Mon, 23 May 1995 02:00:00 GTM");
header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GTM");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
//****
$log =="";
$error="no"; //флаг наличия ошибки
require_once ("JsHttpRequest.php");
$JsHttpRequest =& new JsHttpRequest("windows-1251");
/*соединение с базой данных и различные проверки на правильность введенных данных*/
.................................................. ..................................
if($error=="no")
{
$prov = 0;
/*создаем переменную с датой*/
$data = date("Y-m-d");
/*добавляем данные в базу*/
$res_comdobav = mysql_query("INSERT INTO commentarii (sametka_id,author,datacomments,text)
VALUES ('$id','$author','$data','$text_comments')",$datab asic);
/*формируем блок отправки письма владельцу сайта*/
/*1 элемент функции mail*/
$address = "Lexluterking@ya.ru";
/*2 элемент функции mail*/
$subject = "Новый отзыв о товаре";
/*вытаскиваем данные из базы данных*/
$res_mail = mysql_query("SELECT title FROM rubriki WHERE id='$id'",$databasic);
/*подпроверка №4 - проверяем на правильность вывод данных в переменную $res_mail*/
if (!$res_mail)
{
echo "<p>Обращение к базе данных не состоялось. Оповестите об этом администратора по email:
Lexluterking@ya.ru <br />
<strong>Код ошибки:</strong></p>";
exit(mysql_error());
}
/*подпроверка №5 - проверяем были ли данные вынесены из базы данных, т.е. существует хотя бы одно значение в
$res_mail*/
if (mysql_num_rows($res_mail) > 0)
{
/*вытаскиваем результаты запроса в переменную массив*/
$myarrayres_mail = mysql_fetch_array($res_mail);
}
/*Действие №4 - избавляемся от накладок при совпадении имен*/
$tovar_title = $myarrayres_mail["title"];
/*3 элемент функции mail*/
$message = "На сайте был размещен отзыв к товару: ".$tovar_title."\nОтзыв добавил(а): ".$author.
"\nДата добавления отзыва: ".$data."\nСодержание отзыва следующее: ".$text_comments.
"\nСсылка на описание товара: http://localhost/rasumeika/view_p.php?id=".$id."";
/*соединяем все элементы почтового сообщения в функцию mail*/
mail($address,$subject,$message,"Content-type:text/plain; Charset=windows-1251\r\n");
$ok ="<p style='font-family:Tahoma, Verdana, Arial, sans-serif; font-size:12px; color:#333333; border:2px solid #0c7f00;
padding:10px; margin:20px; background-color:#E6E9FB;'><strong>Спасибо! Ваш отзыв добавлен!<br />
Через пару минут он будет размещен на сайте</strong></p>";
// преобразуем Enter в перенос строки
$text_comments=str_replace("\n","<br>\n",$text_com ments);
//Помещаем результат в массив
$GLOBALS['_RESULT'] = array(
'error' => 'no',
'text' => $text_comments,
'ok' => $ok
);
}
else //если есть ошибки
{
$log = "<p><font color=#ED401D><strong>Ошибка</strong></font></p><ul style='font-family:Tahoma, Verdana, Arial, sans-serif;
font-size:12px; border:2px solid #ED401D; padding:10px; margin:20px;'>".$log."</ul>";
//Отправляем результат в массив
$GLOBALS['_RESULT'] = array(
'error' => 'yes',
'er_mess' => $log);
}
/////////////////////////////////////// comm.js ////////////////////////////////////
// JavaScript Document
function doLoad(value){
err=document.getElementById('cerror');
err.innerHTML = "<img src='image/loading1.gif' width='16' height='16'><br><p>Ваш отзыв обрабатывается...</p>";
// Create new JsHttpRequest object.
var req = new JsHttpRequest();
// Code automatically called on load finishing.
req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.responseJS.error == 'no') {
// Clear error information.
err.innerHTML = ' ';
// Write req.responseJS to page element (_req.responseJS become responseJS).
err.innerHTML = req.responseJS.ok;
/*очищаем поля формы после успешной отправки сообщения*/
form = document.getElementById('addcom');
form.author.value = "";
form.text_comments.value = "";
form.proverka.value = "";
}
else
{
err.innerHTML = req.responseJS.er_mess;
}
}
}
// Prepare request object (automatically choose GET or POST).
req.open(null, 'obcomments.php', true);
// Send data to backend.
req.send( { q: value } );
}