01.04.2015, 19:00
|
Новичок на форуме
|
|
Регистрация: 01.04.2015
Сообщений: 6
|
|
Отобразить данные формы на другой странице
Приветствую всех. Очень слаб в веб-программухе, больше сижу на ООП языках. Очень нужна помощь.
есть форма на первой странице html. нужно ввести данные в форму, а затем с помощью кнопки отправить вывести все данные, которые я ввел на другой странице (введенные данные хранятся в ассоциативном массиве). Каждый раз когда я буду нажимать кнопку отправить данные с формы, прошлая информация должна удаляться и вместо нее должны быть отображены новые данные, которые я ввел в форме.
Первое поле - ФИО, должно сохранятся каждый раз, когда оно изменяется и выводится в виде ненумерованного списка отдельно от другой информации (отдельно от других полей формы). нужно сделать с помощью JS.
вот что есть.
|
|
01.04.2015, 19:44
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Принять на другой странице посредством JS, это разбить строку с GET параметрами:
var data = location.search.substring(1).split('&');
while(d = data.shift()) {
d = d.split('=');
alert('Key: ' + d[0] + ', Value: ' + d[1])
}
Не самое лучшее средство для создания сайтов.
|
|
02.04.2015, 11:08
|
Новичок на форуме
|
|
Регистрация: 01.04.2015
Сообщений: 6
|
|
Сообщение от laimas
|
Принять на другой странице посредством JS, это разбить строку с GET параметрами:
var data = location.search.substring(1).split('&');
while(d = data.shift()) {
d = d.split('=');
alert('Key: ' + d[0] + ', Value: ' + d[1])
}
Не самое лучшее средство для создания сайтов.
|
дело в том, что вывести форму на той же странице - у меня получается. хотя я не разобрался, как сохранять каждое введенное ФИО в массив и выводить обновленный массив. но проблема в том, что я не понимаю, как достать данные из формы и отобразить их на другой странице.
Видел способ посредством сохранения данных в локальное хранилище, а затем доставать эти данные из него на другой странице. но этот вариант не очень подходит. тем более я там не понял толком, можно ли сразу всю форму запихнуть в локальное хранилище, а не каждый элемент формы запихивать.
|
|
02.04.2015, 11:48
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Код показанный как раз и получает данные отправленные формой (но только как GET). А вот массив, так это фантазии. Ну передали вы форму со страницы А на страницу Б, получили вышеуказанным способом присланные данные, ну поместили их в массив, и что? Этот же массив будет жить только на странице Б, перейдя на другую страницу до этого массива вы уже не достучитесь, он к этому моменту почить в Бозе. Чтобы с ним работать, придется его передавать как GET параметры между страницами. И зачем это нужно? Серверный скрипт должен быть, он должен работать, а не гонять туда сюда.
А в локальном хранилище можно хранить что угодно, включая и весь html-код формы.
|
|
02.04.2015, 12:30
|
Новичок на форуме
|
|
Регистрация: 01.04.2015
Сообщений: 6
|
|
Ну суть в том, что я не знаю даже как передать форму на другую страницу, только видел способ локального хранилища.
Есть ли какой способ передавать элемент из формы и сохранять его каждый раз где-то, чтобы потом выводить список таких элементов?
я понял, что вы имеете в виду. Сохраню данные в массиве, но добавить в него не смогу, только перезаписать. Верно?
|
|
02.04.2015, 13:25
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Я не понимаю чего вы хотите в конечном итоге.
Веб приложение, это приложение из двух частей - серверной и клиентской. Серверная часть обслуживает запросы клиента, принимает данные, обрабатывает и хранит их. Клиентская сторона, это интерфейс этого приложения, и не обязательно пассивный. Можно возложить и на клиента задачи выполняемые сервером, например и клиентская сторона может иметь базу данных, но на сегодняшний момент она поддерживается не всеми браузерами.
Возлагая на клиента серверные задачи, это значит иметь ядро, которое бы обслуживало прием, обработку и хранение данных в локальном хранилище. Все страницы на сервере при этом, это статические страницы, а динамические изменения и данные, которые на них могут быть переданы с других страниц можно получить только запросом к ядру. Последний будет проверять запрос по своей "базе", возвращая результат.
Да, можно такое сделать, вопрос только в том нужно ли это. Если же то о чем вы спрашивается, это некий частный случай, то хотелось бы знать - для чего, какие цели и задачи преследуются, например для того чтобы пользователь не вводил постоянно свой адрес в форме (хотя есть такое свойство у формы как autocomplete, в HTML5 есть возможность выбора и описанных вариантов - тег datalist). Если же нет, то это никчемное занятие - хранить выбор пользователем чего либо или его данные нужно на сервере, а вывести их где необходимо, так для сервера, это его "повседневная" задача.
|
|
02.04.2015, 15:45
|
Новичок на форуме
|
|
Регистрация: 01.04.2015
Сообщений: 6
|
|
Хм, я думал, что вроде ясно все.
Знаете, что я хочу в конечном итоге?
Вы зашли на страницу, видите на ней поле intput type=text, ввели туда данные, нажали кнопку отправить (сработало событие OnClick()) и затем открылось окно и в нем вы увидели то, что вы написали. Ввели другой текст, снова нажали кнопку - в этом окне отобразилось вместо прошлого текста, новый текст, который вы ввели.
Все что я хочу, это код, с помощью которого можно так сделать. У меня получается сделать так, только на той же самой странице, но не на другой.
Почему никчемная задача? Я хочу хранить список имен тех людей, которые участвовали в опросе. Но только список имен. И выводить этот список имен рядом с последней введенной инфой.
|
|
02.04.2015, 15:56
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Ввели, щелкнули, окно.... это действия, это понятно, и нет проблем сделать, чего вы и сделали.
Вопрос в другом - какова цель этого? Поиграться этим же на другой странице? Ну так подключайте свой скрипт выполняющий это на другой странице, будет и там работать.
Но у вас же ключевое слово хранить - где? Речь шла о локальном хранилище, так оно вам по каким-то причинам не подходит. Переносить между страницами как GET-параметры? Можно и показал как, но вряд ли это лучший вариант.
Так где вы намерены хранить эти данные? Вот это является целью.
|
|
02.04.2015, 17:27
|
Новичок на форуме
|
|
Регистрация: 01.04.2015
Сообщений: 6
|
|
Я вас понял.
Тогда последний вопрос, как мне отослать массив , который находится на 1-ой странице, на вторую и там его , к примеру через innerHtml вывести. через метод POST-GET? Только я не понимаю, что написать. Не могли бы вы самый простейший пример написать?
Создать ассоциативный массив на 1-ой странице , заполнить его чем то и отобразить на второй.
|
|
02.04.2015, 18:02
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Нельзя в рамках JS принять на другой странице POST данные, только GET. Пример я же вам и написал, а передать можно либо формой, либо сформировать url запроса, который присвоить объекту location. Например, пусть страница 1.html имеет форму:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<form action="2.html">
<input name="key1" value="11" />
<input name="key2" value="22" />
<input type="submit" value="Send" />
</form>
</body>
</html>
При ее отправлении (а по умолчанию это отправка методом GET), будет запрошена страница 2.html с передачей параметров запроса. Отправьте форму и увидите url в адресной строке браузера.
Страница 2.html содержит JS-сценарий, который получает из url параметры запроса - имена полей формы и их значения:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="name"></div>
<script>
var data = location.search.substring(1).split('&'), s = '';
while(d = data.shift()) {
d = d.split('=');
s += 'Key: ' + d[0] + ', valye: ' + d[1] + '<br>';
}
document.getElementById('name').innerHTML = s;
</script>
</body>
</html>
Если же создается некий объект (в JS нет вообще ассоциативных массивов, есть объекты), то нужно этот объект преобразовать в строку GET-параметров:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<script>
var o = {
key1 : 11,
key2 : 22
}, a = [];
//формируем параметры запроса
for(k in o) a.push(k + '=' + o[k]);
//отправляем запрос
location.href = '2.html?'+a.join('&');
</script>
</body>
</html>
Последний раз редактировалось laimas, 02.04.2015 в 18:04.
|
|
|
|