Подскажите как добавить запись без перезагрузки страницы

Статус
В этой теме нельзя размещать новые ответы.
StrikeOFF

StrikeOFF

♥kan inte lyfta utan lift♥
Регистрация
20 Мар 2010
Сообщения
372
Реакции
204
Нужна формочка(Nickname, Mail, Text) которая добавляет запись на страницу.

Мы пишем комментарий, нажимаем Submit и надпись появляется в определенном месте.
Пишем еще один - добавляется под ней. Тоесть чтобы можно было выводить вводимую инфу с учетом что вокруг будет появлятся нужный html, чтобы не портить внешний вид.

Сохранение коммента на странице не нужно, перезагрузил - все исчезло.
 
это делается с помощью ajax и манипуляций с DOM, посмотрите в сторону jquery или prototype, примеров предостаточно. пример очень уж общий, чтоб что либо более конкретное советовать.
 
А можно тыкнуть в меня урлом или примером? я бы не постил сюда, если бы не искал
 
StrikeOFF написал(а):
А можно тыкнуть в меня урлом или примером? я бы не постил сюда, если бы не искал
Нажмите для раскрытия...
Для просмотра ссылки Войди или Зарегистрируйся (это подразумевает, что запрос будет идти на сервер и там что-то исполняться и возращаться результатом)
Для просмотра ссылки Войди или Зарегистрируйся

ну и Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
 
На сервер как раз не желательно. Хотелось бы чтобы за рамки страницы не выходило. Ajax просто не знаком мне ни разу. Подожду может что-то точно списывающееся сбросят. Если нет - наверное прийдется учить
 
Какая, собственно цель? Мне не особо понятен смысл такого скрипта, в котором вся информация теряется при обновлении страницы. Это что-то в стиле "сижу, флужу сам с собой" получается... :conf:
 
HTML: 
<html>
    <head>
        <title>Test</title>
        
        <script type="text/javascript">
            function placeMessage ( ) {
                
                var _nickname = document.getElementById('nickname').value; // Получаем ник
                if (_nickname.length == 0) { // Проверка наличия текста
                    alert ('Enter your nickname!');
                    return false;
                }
                
                var _mail = document.getElementById('mail').value; // Получаем почту
                if (_mail.length == 0) { // Проверка наличия текста
                    alert ('Enter your mail!');
                    return false;
                }
                
                var _text = document.getElementById('text').value; // Получаем текст
                if (_text.length == 0) { // Проверка наличия текста
                    alert ('Enter the text!');
                    return false;
                }
                
                var _code = '<div><a href="mailto:' + _mail + '">' + _nickname + '</a> says: ' + _text + '</div><hr />'; // формируем код
                var _obj = document.getElementById('messages-content'); // выбираем слой для вставки кода
                _obj.innerHTML = _obj.innerHTML + _code;  // добавляем код 
                
                document.getElementById('nickname').value = ''; // очищаем поля формы
                document.getElementById('mail').value = '';
                document.getElementById('text').value = '';
            }
        </script>
    </head>
    <body>
        <div id="messages-content"></div>
        
        <div id="message-form">
            <form action="index.html" onSubmit="javascript:placeMessage();return false;">
                <p>Nickname:</p>
                <input id="nickname" name="nickname" type="text" />
                
                <p>Mail:</p>
                <input id="mail" name="mail" type="text" />
                
                <p>Text:</p>
                <textarea id="text" name="text" rows="3"></textarea><br />
                
                <input name="submit" type="submit" value="Submit" />
            </form>
        </div>
    </body>
</html>
Самый простой пример, без использования сторонних библиотек. В примере отсутствуют любые проверки на наличие xss, валидатор почтового адреса, и вообще, это самый примитивный пример. Так что, я бы не советовал использовать его для чего-то серьезного.
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху