Сохранение данных в куки
Есть некая форма,в которой пользователь заполняет 3 поля.Надо сохранять,допустим , 10 результатов ввода.Как лучше это сделать?
Я думаю с cookie работать,но не пойму как мне туда массив добавлять наиболее удобным способом |
Кто заведовать ими должен, сервер или клиент? В любом случае запись будет строки, это будет json, просто у сервера и клиента различны функции для этого: РНР - json_encode(array), JS - JSON.stringify(array).
|
Клиент.Тип вот код:
<!DOCTYPE html>
<html>
<head>
<title>Сайт</title>
<style>
body
{
background: #f6e8d7;
}
#helpMe
{
background: #f0f0f0;
width: 400px;
padding: 10px;
border: 2px solid #000;
}
input[type="submit"]
{
border: 4px inset #100;
cursor: url(WorldOfWarCraft/arrow.cur),pointer;
}
p b
{
color:orange;
border: 1px inset #100;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
background: #808080;
outline-style: outset;
}
img.rightfoto
{
margin: 0px;
float: right ;
}
.active {
border: 1px solid red;
color: red;
}
</style>
</head>
<body>
<img class="img.rightfoto" src="image.png" " >
<form method="GET" action="handler.php" class="formWithValidation" style="float: left;">
<fieldset class="fieldset" style="width: 400px;">
<h3 style="font-family: fantasy;font-stretch: inherit;font-weight: 0;" >ЗАГОЛОВОК </h5>
<h5> 210001 <h3>
<p><b name="textX"> X</b> </p>
<div id="helpMe">
<input type="button" class='checkboxxx' name="InputX" onclick="change(-2)" value="-2">
<input type="button" class='checkboxxx' name="InputX" onclick="change(-1.5)" value="-1.5">
<input type="button" class='checkboxxx' name="InputX" onclick="change(-1)" value="-1">
<input type="button" class='checkboxxx' name="InputX" onclick="change(-0.5)" value="-0.5">
<input type="button" class='checkboxxx' name="InputX" onclick="change(0)" value="0">
<input type="button" class='checkboxxx' name="InputX" onclick="change(0.5)" value="0.5">
<input type="button" class='checkboxxx' name="InputX" onclick="change(1)" value="1">
<input type="button" class='checkboxxx' name="InputX" onclick="change(1.5)" value="1.5">
<input type="button" class='checkboxxx' name="InputX" onclick="change(2)" value="2">
</div>
<Br>
<input type="hidden" id="InputX" name="InputX" value="" />
<p><b> Y</b></p>
<p><input type="text" class="Y" maxlength="5" size="6" name="InputY" placeholder=" От -3 до 3"></p>
<p><b> R</b></p>
<p>
<p><input type="text" class="RRR" maxlength="5" size="6" name="InputR" placeholder=" От 1 до 4"></p>
</p>
<p><input type="submit" class="validateBtn" ></p>
</fieldset>
</form>
<script>
var SMSx;
var SMSy;
var SMSr;
var conditionX=0;
var form=document.querySelector('.formWithValidation');
var button=document.querySelectorAll('.checkboxxx');
function change(value)
{
document.getElementById("InputX").value= value;
}
for (var buttoned of button)
{
buttoned.addEventListener('click', function (event)
{
var X=event.clientX;
var Y=event.clientY;
button.forEach(i =>
i.classList.remove('active'));
this.classList.toggle('active');
});
};
function showError(container, errorMessage) {
var msgElem = document.createElement('span');
msgElem.className = "error-message";
msgElem.innerHTML = errorMessage;
container.appendChild(msgElem);
}
function resetError(container) {
if (container.lastChild.className == "error-message") {
container.removeChild(container.lastChild);
}
}
form.addEventListener('submit', function (event)
{
resetError(document.querySelector('.fieldset') );
var elems = form.elements;
if (elems.InputY.value)
{
var reg=/^\d+[,]\d*$|^\d+$/ ;
if(reg.test(elems.InputY.value))
{
SMSy=""
}
else
{
SMSy="Ошибка заполнения Y";
event.preventDefault() ;
}
}
else
{
SMSy=" Заполните Y <Br>";
event.preventDefault() ;
}
if ((elems['InputX'][0].classList.contains('active'))||(elems['InputX'][1].classList.contains('active'))||
(elems['InputX'][2].classList.contains('active'))||(elems['InputX'][3].classList.contains('active'))||
(elems['InputX'][4].classList.contains('active'))||(elems['InputX'][5].classList.contains('active'))||
(elems['InputX'][6].classList.contains('active'))||(elems['InputX'][7].classList.contains('active'))
||(elems['InputX'][8].classList.contains('active')))
{
SMSx=""
}
else
{
SMSx="<p style=\"font-size: 120%; font-family: monospace; color: #cd66cc\">Заполните X </p> ";
event.preventDefault() ;
}
if (elems.InputR.value)
{
var reg=/^\d+[,]\d*$|^\d+$/ ;
if(reg.test(elems.InputR.value))
{
SMSr=""
}
else {
SMSr="Ошибка заполнения R";
event.preventDefault() ;
}
}
else
{
SMSr=" Заполните R <Br>";
event.preventDefault() ;
}
showError(document.querySelector('.fieldset') , SMSx+SMSy+SMSr);
});
</script>
</body>
</html>
И надо значения X,R,Y записать в куки по 10 раз(10 разных вводов) |
Цитата:
Цитата:
Цитата:
|
Цитата:
1)Да.10 предыдущих вводов(ну или 20,30 и т.д) 2)А вот и нет.Препод специально уточнил,что именно Button 3)Ну,вот задание. Разработать PHP-скрипт, определяющий попадание точки на координатной плоскости в заданную область, и создать HTML-страницу, которая формирует данные для отправки их на обработку этому скрипту. Параметр R и координаты точки должны передаваться скрипту посредством HTTP-запроса. Скрипт должен выполнять валидацию данных и возвращать HTML-страницу с таблицей, содержащей полученные параметры и результат вычислений - факт попадания или непопадания точки в область. Я это так понял,что 2 файла. |
stavatar@yandex.ru, так в чём проблема у вас, чтобы это сделать? У вас получается один PHP-скрипт, который должен вывести сначала (т. е. когда кол-во GET-параметров равно нулю) форму, затем когда вы нажимаете отправить форму, у вас тот же PHP-скрипт проверяет, считает и выводит результат, записывает для истории в локальное хранилище результат.
А то, что вам человек сказал, что там должны быть кнопки, так это с точки зрения человека они выглядят как кнопки, а с точки зрения программиста это <input type="radio" name="InputX" value="-2"> <input type="radio" name="InputX" value="-1.5"> <input type="radio" name="InputX" value="-1"> <input type="radio" name="InputX" value="-0.5"> <input type="radio" name="InputX" value="0"> <input type="radio" name="InputX" value="0.5"> <input type="radio" name="InputX" value="1"> <input type="radio" name="InputX" value="1.5"> <input type="radio" name="InputX" value="2">Это так технически выглядит, а при помощи CSS вы можете их как угодно оформить. |
Цитата:
2)"Скрипт должен выполнять валидацию данных и возвращать HTML-страницу с таблицей" Я так понял,что должна открываться новая страница с таблицей |
stavatar@yandex.ru,
Цитата:
Цитата:
Вот PHP-код, написанный по вашему описанию в посте №5... https://repl.it/@Malleys/SquigglyWelllitBsddaemon Вот как он работает... https://squigglywelllitbsddaemon.malleys.repl.co/ |
Вложений: 1
Цитата:
1. В задании есть блок с картинкой и там рядом с ней написано какие интерактивные элементы должны использоваться в форме для ввода X,Y,R. Если там написано Button, то для каждого значения должна быть отдельная кнопка (тег <button> или около того. Checkbox'ы, RadioButton и прочее не использовать). Если там написан Text, то это обычный <input> Большое спасибо,сейчас прочту. Правда там надо не все делать на php...Там есть и еще и другие требования(я их на всякий случай в виде вложений кинул) .Но думаю,на основе этого кода все сделаю.Большое спасибо! |
Цитата:
|
| Часовой пояс GMT +3, время: 11:10. |