Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Отобразить данные формы на другой странице (https://javascript.ru/forum/events/54810-otobrazit-dannye-formy-na-drugojj-stranice.html)

Bumer 01.04.2015 19:00

Отобразить данные формы на другой странице
 
Вложений: 1
Приветствую всех. Очень слаб в веб-программухе, больше сижу на ООП языках. Очень нужна помощь.

есть форма на первой странице html. нужно ввести данные в форму, а затем с помощью кнопки отправить вывести все данные, которые я ввел на другой странице (введенные данные хранятся в ассоциативном массиве). Каждый раз когда я буду нажимать кнопку отправить данные с формы, прошлая информация должна удаляться и вместо нее должны быть отображены новые данные, которые я ввел в форме.
Первое поле - ФИО, должно сохранятся каждый раз, когда оно изменяется и выводится в виде ненумерованного списка отдельно от другой информации (отдельно от других полей формы). нужно сделать с помощью JS.
вот что есть.

laimas 01.04.2015 19:44

Принять на другой странице посредством JS, это разбить строку с GET параметрами:
var data = location.search.substring(1).split('&');
    while(d = data.shift()) { 
        d = d.split('=');
        alert('Key: ' + d[0] + ', Value: ' + d[1])
    }

Не самое лучшее средство для создания сайтов.

Bumer 02.04.2015 11:08

Цитата:

Сообщение от laimas (Сообщение 364498)
Принять на другой странице посредством JS, это разбить строку с GET параметрами:
var data = location.search.substring(1).split('&');
    while(d = data.shift()) { 
        d = d.split('=');
        alert('Key: ' + d[0] + ', Value: ' + d[1])
    }

Не самое лучшее средство для создания сайтов.

дело в том, что вывести форму на той же странице - у меня получается. хотя я не разобрался, как сохранять каждое введенное ФИО в массив и выводить обновленный массив. но проблема в том, что я не понимаю, как достать данные из формы и отобразить их на другой странице.
Видел способ посредством сохранения данных в локальное хранилище, а затем доставать эти данные из него на другой странице. но этот вариант не очень подходит. тем более я там не понял толком, можно ли сразу всю форму запихнуть в локальное хранилище, а не каждый элемент формы запихивать.

laimas 02.04.2015 11:48

Код показанный как раз и получает данные отправленные формой (но только как GET). А вот массив, так это фантазии. Ну передали вы форму со страницы А на страницу Б, получили вышеуказанным способом присланные данные, ну поместили их в массив, и что? Этот же массив будет жить только на странице Б, перейдя на другую страницу до этого массива вы уже не достучитесь, он к этому моменту почить в Бозе. Чтобы с ним работать, придется его передавать как GET параметры между страницами. И зачем это нужно? Серверный скрипт должен быть, он должен работать, а не гонять туда сюда.

А в локальном хранилище можно хранить что угодно, включая и весь html-код формы.

Bumer 02.04.2015 12:30

Ну суть в том, что я не знаю даже как передать форму на другую страницу, только видел способ локального хранилища.
Есть ли какой способ передавать элемент из формы и сохранять его каждый раз где-то, чтобы потом выводить список таких элементов?
я понял, что вы имеете в виду. Сохраню данные в массиве, но добавить в него не смогу, только перезаписать. Верно?

laimas 02.04.2015 13:25

Я не понимаю чего вы хотите в конечном итоге.

Веб приложение, это приложение из двух частей - серверной и клиентской. Серверная часть обслуживает запросы клиента, принимает данные, обрабатывает и хранит их. Клиентская сторона, это интерфейс этого приложения, и не обязательно пассивный. Можно возложить и на клиента задачи выполняемые сервером, например и клиентская сторона может иметь базу данных, но на сегодняшний момент она поддерживается не всеми браузерами.

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

Да, можно такое сделать, вопрос только в том нужно ли это. Если же то о чем вы спрашивается, это некий частный случай, то хотелось бы знать - для чего, какие цели и задачи преследуются, например для того чтобы пользователь не вводил постоянно свой адрес в форме (хотя есть такое свойство у формы как autocomplete, в HTML5 есть возможность выбора и описанных вариантов - тег datalist). Если же нет, то это никчемное занятие - хранить выбор пользователем чего либо или его данные нужно на сервере, а вывести их где необходимо, так для сервера, это его "повседневная" задача.

Bumer 02.04.2015 15:45

Хм, я думал, что вроде ясно все.
Знаете, что я хочу в конечном итоге?
Вы зашли на страницу, видите на ней поле intput type=text, ввели туда данные, нажали кнопку отправить (сработало событие OnClick()) и затем открылось окно и в нем вы увидели то, что вы написали. Ввели другой текст, снова нажали кнопку - в этом окне отобразилось вместо прошлого текста, новый текст, который вы ввели.
Все что я хочу, это код, с помощью которого можно так сделать. У меня получается сделать так, только на той же самой странице, но не на другой.
Почему никчемная задача? Я хочу хранить список имен тех людей, которые участвовали в опросе. Но только список имен. И выводить этот список имен рядом с последней введенной инфой.

laimas 02.04.2015 15:56

Ввели, щелкнули, окно.... это действия, это понятно, и нет проблем сделать, чего вы и сделали.
Вопрос в другом - какова цель этого? Поиграться этим же на другой странице? Ну так подключайте свой скрипт выполняющий это на другой странице, будет и там работать.
Но у вас же ключевое слово хранить - где? Речь шла о локальном хранилище, так оно вам по каким-то причинам не подходит. Переносить между страницами как GET-параметры? Можно и показал как, но вряд ли это лучший вариант.
Так где вы намерены хранить эти данные? Вот это является целью.

Bumer 02.04.2015 17:27

Я вас понял.
Тогда последний вопрос, как мне отослать массив , который находится на 1-ой странице, на вторую и там его , к примеру через innerHtml вывести. через метод POST-GET? Только я не понимаю, что написать. Не могли бы вы самый простейший пример написать?
Создать ассоциативный массив на 1-ой странице , заполнить его чем то и отобразить на второй.

laimas 02.04.2015 18:02

Нельзя в рамках 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.