Отобразить данные формы на другой странице
Вложений: 1
Приветствую всех. Очень слаб в веб-программухе, больше сижу на ООП языках. Очень нужна помощь.
есть форма на первой странице html. нужно ввести данные в форму, а затем с помощью кнопки отправить вывести все данные, которые я ввел на другой странице (введенные данные хранятся в ассоциативном массиве). Каждый раз когда я буду нажимать кнопку отправить данные с формы, прошлая информация должна удаляться и вместо нее должны быть отображены новые данные, которые я ввел в форме. Первое поле - ФИО, должно сохранятся каждый раз, когда оно изменяется и выводится в виде ненумерованного списка отдельно от другой информации (отдельно от других полей формы). нужно сделать с помощью JS. вот что есть. |
Принять на другой странице посредством JS, это разбить строку с GET параметрами:
var data = location.search.substring(1).split('&');
while(d = data.shift()) {
d = d.split('=');
alert('Key: ' + d[0] + ', Value: ' + d[1])
}
Не самое лучшее средство для создания сайтов. |
Цитата:
Видел способ посредством сохранения данных в локальное хранилище, а затем доставать эти данные из него на другой странице. но этот вариант не очень подходит. тем более я там не понял толком, можно ли сразу всю форму запихнуть в локальное хранилище, а не каждый элемент формы запихивать. |
Код показанный как раз и получает данные отправленные формой (но только как GET). А вот массив, так это фантазии. Ну передали вы форму со страницы А на страницу Б, получили вышеуказанным способом присланные данные, ну поместили их в массив, и что? Этот же массив будет жить только на странице Б, перейдя на другую страницу до этого массива вы уже не достучитесь, он к этому моменту почить в Бозе. Чтобы с ним работать, придется его передавать как GET параметры между страницами. И зачем это нужно? Серверный скрипт должен быть, он должен работать, а не гонять туда сюда.
А в локальном хранилище можно хранить что угодно, включая и весь html-код формы. |
Ну суть в том, что я не знаю даже как передать форму на другую страницу, только видел способ локального хранилища.
Есть ли какой способ передавать элемент из формы и сохранять его каждый раз где-то, чтобы потом выводить список таких элементов? я понял, что вы имеете в виду. Сохраню данные в массиве, но добавить в него не смогу, только перезаписать. Верно? |
Я не понимаю чего вы хотите в конечном итоге.
Веб приложение, это приложение из двух частей - серверной и клиентской. Серверная часть обслуживает запросы клиента, принимает данные, обрабатывает и хранит их. Клиентская сторона, это интерфейс этого приложения, и не обязательно пассивный. Можно возложить и на клиента задачи выполняемые сервером, например и клиентская сторона может иметь базу данных, но на сегодняшний момент она поддерживается не всеми браузерами. Возлагая на клиента серверные задачи, это значит иметь ядро, которое бы обслуживало прием, обработку и хранение данных в локальном хранилище. Все страницы на сервере при этом, это статические страницы, а динамические изменения и данные, которые на них могут быть переданы с других страниц можно получить только запросом к ядру. Последний будет проверять запрос по своей "базе", возвращая результат. Да, можно такое сделать, вопрос только в том нужно ли это. Если же то о чем вы спрашивается, это некий частный случай, то хотелось бы знать - для чего, какие цели и задачи преследуются, например для того чтобы пользователь не вводил постоянно свой адрес в форме (хотя есть такое свойство у формы как autocomplete, в HTML5 есть возможность выбора и описанных вариантов - тег datalist). Если же нет, то это никчемное занятие - хранить выбор пользователем чего либо или его данные нужно на сервере, а вывести их где необходимо, так для сервера, это его "повседневная" задача. |
Хм, я думал, что вроде ясно все.
Знаете, что я хочу в конечном итоге? Вы зашли на страницу, видите на ней поле intput type=text, ввели туда данные, нажали кнопку отправить (сработало событие OnClick()) и затем открылось окно и в нем вы увидели то, что вы написали. Ввели другой текст, снова нажали кнопку - в этом окне отобразилось вместо прошлого текста, новый текст, который вы ввели. Все что я хочу, это код, с помощью которого можно так сделать. У меня получается сделать так, только на той же самой странице, но не на другой. Почему никчемная задача? Я хочу хранить список имен тех людей, которые участвовали в опросе. Но только список имен. И выводить этот список имен рядом с последней введенной инфой. |
Ввели, щелкнули, окно.... это действия, это понятно, и нет проблем сделать, чего вы и сделали.
Вопрос в другом - какова цель этого? Поиграться этим же на другой странице? Ну так подключайте свой скрипт выполняющий это на другой странице, будет и там работать. Но у вас же ключевое слово хранить - где? Речь шла о локальном хранилище, так оно вам по каким-то причинам не подходит. Переносить между страницами как GET-параметры? Можно и показал как, но вряд ли это лучший вариант. Так где вы намерены хранить эти данные? Вот это является целью. |
Я вас понял.
Тогда последний вопрос, как мне отослать массив , который находится на 1-ой странице, на вторую и там его , к примеру через innerHtml вывести. через метод POST-GET? Только я не понимаю, что написать. Не могли бы вы самый простейший пример написать? Создать ассоциативный массив на 1-ой странице , заполнить его чем то и отобразить на второй. |
Нельзя в рамках 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>
|
Огромное спасибо, это помогло.
|
| Часовой пояс GMT +3, время: 21:49. |