Отобразить данные формы на другой странице
Вложений: 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, время: 03:12. |