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

у меня есть две HTML-страницы: форма.HTML и дисплей.формат html. В форме.html, есть форма:

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

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

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

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

38
forms html html-form javascript

6 ответов

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

в форме, добавьте :

<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, используя the 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.

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

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

28

вам нужно получить значения из строки запроса (поскольку у вас нет набора методов, вы используете 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;
}
9

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

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

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

для отправки данных в двух сервлетов сделать одну кнопку как подать и другим, как кнопка.На первой кнопке Отправить действие в теге формы как обычно, но на другой кнопке вызвать функцию JavaScript здесь вы должны отправить форму с тем же полем, но для того, чтобы потом разных сервлетов пишешь другой тег форма после первой недалеко.объявите те же текстовые поля, но со скрытым атрибутом.теперь, когда вы вставляете данные в первую форму, вставьте их в другую скрытую форму с некоторым кодом 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>
0
*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.
0

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

в дисплей.HTML вы должны добавить следующий код.

<script>
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var sn = getParameterByName('serialNumber');

document.getElementById("write").innerHTML = sn;

</script>
0