Передача данных формы на другую страницу HTML

У меня есть две HTML-страницы: form.html и display.html. В form.html существует форма:

<form action="display.html">
    <input type="text" name="serialNumber" />
    <input type="submit" value="Submit" />
</form>

Данные формы отправляются на display.html. Я хочу отображать и использовать данные формы serialNumber в display.html, как показано ниже:

<body>
    <div id="write">
        <p>The serial number is: </p>
    </div>
    <script>
    function show() {
        document.getElementById("write").innerHTML = serialNumber;
    }
    </script>
</body>

Итак, как я могу передать переменную serialNumber из form.html в display.html, чтобы приведенный выше код в display.html отображал серийный номер, а функция JavaScript show() получает serialNumber с первого HTML?

Ответ 1

Если у вас нет возможности использовать серверное программирование, например PHP, вы можете использовать строку запроса или параметры GET.

В форме добавьте атрибут method="GET":

<form action="display.html" method="GET">
    <input type="text" name="serialNumber" />
    <input type="submit" value="Submit" />
</form>

При отправке этой формы пользователь будет перенаправлен на адрес, который включает значение serialNumber в качестве параметра. Что-то вроде:

http://www.example.com/display.html?serialNumber=XYZ

Затем вы можете проанализировать строку запроса, которая будет содержать значение параметра serialNumber - из JavaScript, используя значение window.location.search:

// from display.html
document.getElementById("write").innerHTML = window.location.search; // you will have to parse
                                                                     // the query string to extract the
                                                                     // parameter you need

См. также строка запроса JavaScript.

Альтернативой является сохранение значений в файлах cookie при отправке формы и их повторном просмотре после загрузки страницы display.html.

См. также Как использовать JavaScript для заполнения формы на другой странице.

Ответ 2

Вам нужно получить значения из строки запроса (поскольку у вас нет набора методов, по умолчанию используется GET)

используйте следующий учебник.

http://papermashup.com/read-url-get-variables-withjavascript/

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

Ответ 3

Используйте метод "Получить" для отправки значения определенного поля через браузер:

<form action="display.html" method="GET">
    <input type="text" name="serialNumber" />
    <input type="submit" value="Submit" />
</form>

Ответ 4

Если ваша ситуация как описано; Вам нужно отправить действие в другой подарочный сертификат из одной формы, и у вас есть две кнопки отправки, и вы хотите отправить каждую кнопку отправки на разные страницы, тогда ваш самый простой ответ здесь.

Для отправки данных в два адресата сделайте одну кнопку в качестве отправки, а другую как кнопку. На первой кнопке отправьте действие в свой тег формы как обычно, а на другой кнопке вызовите функцию JavaScript здесь, вы должны отправить форму с одно и то же поле, но в разные адресаты, затем пишите еще один тег формы после первого закрытия .declare те же текстовые поля там, но со скрытым атрибутом. Теперь, когда вы вставляете данные в первую форму, а затем вставляете их в другую скрытую форму с некоторым кодом javascript. Запишите одну функцию для второй который представляет вторую форму. Затем, когда вы нажмете кнопку "Отправить", она выполнит действие в первой форме, если вы нажмете на кнопку, она вызовет функцию для отправки второй формы с ее действием. Теперь ваша вторая форма будет вызвана на второй сервлет.

Здесь вы можете вызвать два сервлета с одной и той же страницы html или jsp с некоторым смешанным кодом javascript

An ПРИМЕР второй скрытой формы

<form class="form-horizontal" method="post" action="IPDBILLING" id="MyForm" role="form">
    <input type="hidden" class="form-control" name="admno" id="ipdId" value="">
</form>
<script type="text/javascript">
    function Print() {
        document.getElementById("MyForm").submit();
    }
</script>

Ответ 5

*first html page*

<form action="display.jsp" >
    <input type="text" name="serialNumber" />
    <input type="submit" value="Submit" />
</form>


*Second html page*
<body>
<p>The serial number is:<%=request.getParameter("serialNumber") %></p>
</body>


you will get the value of the textbox on another page.