За последние 24 часа нас посетили 55076 программистов и 1781 робот. Сейчас ищет 951 программист ...

Форма для добавления отзывов без перезагрузки страницы

Тема в разделе "JavaScript и AJAX", создана пользователем Luter1984, 9 ноя 2010.

  1. Luter1984

    Luter1984 Активный пользователь

    С нами с:
    9 ноя 2010
    Сообщения:
    66
    Симпатии:
    0
    Доброго времени суток! Совсем недавно начал заниматься JavaScript программированием и возникает очень много вопросов...Как например и сейчас... :).
    На сайте имеется колонка с отзывами и форма для добавления отзывов:
    [​IMG]
    следующего вида:
    /////////////////////////////////////// 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')",$databasic);
    /*формируем блок отправки письма владельцу сайта*/
    /*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_comments);
    //Помещаем результат в массив
    $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 } );
    }
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    Заранее спасибо
     
  2. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    дык ты ж его и не добавляешь. юзай jquery, а то тут кода многовато :D читать лень
     
  3. Апельсин

    Апельсин Активный пользователь

    С нами с:
    20 мар 2010
    Сообщения:
    3.645
    Симпатии:
    2
    Luter1984
    скажи, вот тебе самому приятно смотреть в то, что ты сюда выложил? куча кода, в который даже вникать нет желания
     
  4. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    Апельсин
    там вникать не во что =) только последний абзац роляет:
    [js]

    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
    } );
    }

    [/js]

    собственно где-то между 14 и 19 строкой должна быть отрисовка запосченого камента.

    на ойкуери это делается просто и красиво. а на чистом js я ни бум-бум
     
  5. Luter1984

    Luter1984 Активный пользователь

    С нами с:
    9 ноя 2010
    Сообщения:
    66
    Симпатии:
    0
    Спасибочки разобрался