Обработка формы и вывод на стороне браузера средствами DHTML

redzerg · June 20, 2012

Задача: "Доска пожеланий"

Написать HTML страницу и сценарий на JavaScript для управления доской пожеланий. Доска должна содержать форму для добавления нового пожелания и перечень существующих пожеланий.

задача:

1. Перед добавлением пожелания проверить корректность полей.

? Имя - только буквы, минимум 3 символа

? Поле e-mail обязательное и соответствует правилам записи электронной mail адрес

? Пожелания является обязательным для заполнения.

2. В случае если данные введены некорректно, отображать сообщения о правилах заполнения полей.

3. Добавление пожелания реализуются на стороне браузера средствами DHTML.

4. Новое пожелания отображается первым вверху.

5. Пожелания отражаются в три колонки.

6. Расположение и отображения элементов задается стилями CSS.

Помогите пожалуйста с Пунктом 3

Приложил свой код

Заранее Спасибо

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Page</title>
<script type="text/javascript">
function validateForm()
{

if(document.getElementById("name").value == "")
{
alert("Fill in your name");
return false;
}
if(document.getElementById("name").value.length < 3)
{
alert("Your name too short");
return false;
}
if(document.getElementById("name").value.length > 15)
{
alert("Your name too long");
return false;
}
if(document.getElementById("email").value.indexOf("@") == -1)
{
alert("Bad E-mail");
return false;
}
if(document.getElementById("email").value.lastIndexOf(".") < document.getElementById("email").value.indexOf("@")+2)
{
alert("Bad E-mail 1");
return false;
}
if(document.getElementById("comment").value == "")
{
alert("Comment Empty");
return false;
}
if(document.getElementById("comment").value.length < 15)
{
alert("Comment to short");
return false;
}
if(document.getElementById("comment").value.length > 120)
{
alert("Comment to long(Max 120 Symbols)");
return false;
}

else
{
var newDiv = document.createElement('div');
div.className = 'newAdd';

var divList = document.getElementById('maindiv');
var firstDiv= divList.getElementsByTagName('div')[0];

newDiv.InnerHTML = document.getElementById('name').value;
divList.insertBefore(newDiv , firstDiv);

return true;
}

}
</script>
<style type="text/css">
.newAdd {width:20%; height:100px; margin-left:10%; margin-top:10px; margin-bottom:10px; float:left; border:1px #000 solid; text-align:center}
</style>
</head>
<body style="background-color:grey;">
<center><form name="form1" onsubmit="return validateForm();" method="post" style="margin-top:25px;">
<label for='mail'>Name*</label>
<p>
<input type="text" name="name" id="name">
</p>
<label for='mail'>E-mail*</label>
<p>
<input type="text" name="email" id="email">
</p>
<label for='mail'>Comment*</label>
<p>
<textarea name="comment" id="comment" cols="40" rows="3" maxlength="120"></textarea>
</p>
<p>
<input type="submit" value="Submit">
</p>
</form></center>
<div id="maindiv" style="width:1000px; height:auto; overflow:hidden; background-color:white; margin-left:auto; margin-right:auto; border:1px #000 solid">
<div class="newAdd">1111111111111111111</div>
<div class="newAdd">2222222222222222222</div>
</div>
</body>
</html>

Avalon4eg · June 20, 2012

Странное требование.

Как тогда организовать хранение данных? Ведь записи должны быть видны и другим пользователя.

Или имелось в виду только организация добавления и вывода - если так то в чем проблема - JS вам в помощь

redzerg · June 20, 2012

Да только добавить и чтобы его вывело

Пожалуйста помоги с JS - не могу понять как это сделать

Avalon4eg · June 20, 2012

ajax.

redzerg · June 20, 2012

все примеры что я нашел все связаны с php и обработкой через сервер

Пожалуйста Авалончег

напиши пример функции а то мне через час идти на тестирование а я не могу понять это го )

Avalon4eg · June 20, 2012

А без PHP и работы с сервером ту не обойтись!

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

Или ваш сайт не использует баз данных и PHP

redzerg · June 20, 2012

ето не сайт

ето просто тестовая страница

надо вот такую штуку для теста написать

Заполнил - Нажал Sumbmit - Пошла проверка или все ОК - Если все ОК создается новый DIV и в него выводит значение поля Comment и добавляет на страницу без перезагрузки

Edited June 20, 2012 by redzerg

Avalon4eg · June 20, 2012

замените в форме кнопку submit на button к примеру и поставе на событие запуск вашей функции

записываете в переменные email, name, comment значения value ваших инпутов и тексэрии

далее формируйте html код типа такого


var content = "<div><p>"+name+"</p>"
comment += "<p>"+email+"</p>"
content += "<p>"+comment+</p></div>"

далее выводите это сообщение

к примеру у вас есть слой <div id="masages"></div> в него нужно вывести это пожелание

(не поню как этонаписать на чистом JS напишу как этозделать на jquery)


$('#masages').prepend(content)

в этом случае вам нужн будет подключить библиотеку

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

этонужно зделать до описание вашего скрипта

redzerg · June 20, 2012

Авалончек трудно понять из кусков кода

пожалуйста перепиши под это что куда вставлять

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>My Page</title>

<script type="text/javascript">
function validateForm()
{

if(document.getElementById("name").value == "")
{
alert("Fill in your name");
return false;
}

else
{
return true;
}

}
</script>
<style type="text/css">
.newAdd {width:20%; height:100px; margin-left:10%; margin-top:10px; margin-bottom:10px; float:left; border:1px #000 solid; text-align:center}
</style>
</head>
<body style="background-color:grey;">
<center>
<form name="form1" method="post" style="margin-top:25px;">
<label for='mail'>Name*</label>
<p>
<input type="text" name="name" id="name">
</p>
<label for='mail'>E-mail*</label>
<p>
<input type="text" name="email" id="email">
</p>
<label for='mail'>Comment*</label>
<p>
<textarea name="comment" id="comment" cols="40" rows="3" maxlength="120"></textarea>
</p>
<p>
<input type="button" value="Comment" onClick="validateForm();">
</p>
</form></center>
<div id="maindiv" style="width:1000px; height:auto; overflow:hidden; background-color:white; margin-left:auto; margin-right:auto; border:1px #000 solid">
<div class="newAdd">1111111111111111111</div>
<div class="newAdd">2222222222222222222</div>
</div>
</body>
</html>

Avalon4eg · June 20, 2012

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"

></script>
<title>My Page</title>

<script type="text/javascript">
function validateForm()
{

if(document.getElementById("name").value == "")
{
alert("Fill in your name");
return false;
}

else
{
var email = $('#email').val()
var name = $('#name').val()
var coment  = $('#comment').val()

var content = "<div><p>"+name+"</p>"
content += "<p>"+email+"</p>"
content += "<p>"+coment+"</p></div>"
alert(content)
$('.newAdd').prepend(content)
}

}
</script>
<style type="text/css">
.newAdd {width:20%; height:100px; margin-left:10%; margin-top:10px; margin-bottom:10px; float:left; border:1px #000 solid; text-align:center}
</style>
</head>
<body style="background-color:grey;">
<center>
<form name="form1" method="post" style="margin-top:25px;">
<label for='mail'>Name*</label>
<p>
<input type="text" name="name" id="name">
</p>
<label for='mail'>E-mail*</label>
<p>
<input type="text" name="email" id="email">
</p>
<label for='mail'>Comment*</label>
<p>
<textarea name="comment" id="comment" cols="40" rows="3" maxlength="120"></textarea>
</p>
<p>
<input type="button" value="Comment" onClick="validateForm();">
</p>
</form></center>
<div id="maindiv" style="width:1000px; height:auto;  background-color:white; margin-left:auto; margin-right:auto; border:1px #000 solid">
<div class="newAdd"></div>
</div>
</body>
</html>

Edited June 20, 2012 by Avalon4eg

redzerg · June 20, 2012

не работает :huh:

Avalon4eg · June 20, 2012

странно у меня все работает. Может вы скопировали не весь код - я его корректировал пару раз

upd

только что переписал - попробуйте

тока

alert(content)

лишнее

Edited June 20, 2012 by Avalon4eg

oilefra · July 18, 2012

Задача: "Доска пожеланий"
Написать HTML страницу и сценарий на JavaScript для управления доской пожеланий. Доска должна содержать форму для добавления нового пожелания и перечень существующих пожеланий.
задача:
1. Перед добавлением пожелания проверить корректность полей.
? Имя - только буквы, минимум 3 символа
? Поле e-mail обязательное и соответствует правилам записи электронной mail адрес
? Пожелания является обязательным для заполнения.
2. В случае если данные введены некорректно, отображать сообщения о правилах заполнения полей.
3. Добавление пожелания реализуются на стороне браузера средствами DHTML.
4. Новое пожелания отображается первым вверху.
5. Пожелания отражаются в три колонки.
6. Расположение и отображения элементов задается стилями CSS.
Скажите пожалуйста, я так понимаю это задание вы делали перед тестированием на курсы софтсерва. Вам удалось пройти это тестирование? Можете рассказатьпро задания которые вам на нем давали?

nerv · July 19, 2012

JS работает только в браузере

node.js

Great Rash · July 19, 2012

Курсы чтоль? Или на работу тестовое задание?

Все записи надо хранить в массиве. После заполнения формы и нажатия сабмита, циклом пробегаемся по массиву в обратном порядке и выводим записи в какой-нибудь блок. Что вам конкретно непонятно? Элементы на странице,судя по предоставленному вами коду, вы уже умеете создавать.

Функция validateForm у вас написана криво, в смысле задачу свою она выполняет но только не совсем правильно. Что например будет если у вас неверно заполнены одновременно несколько полей? Юзер будет думать, что неверно заполнено только одно поле и при следующем сабмите опять получит предупреждение. Ошибки надо не алертами показывать, а тоже складывать в массив и потом проверять, что если в массиве есть хоть 1 элемент, значит форма валидацию не прошла и нужно показать все ошибки сразу.

В общем пока вам двойка

Sign In

Обработка формы и вывод на стороне браузера средствами DHTML

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information