Javascript 将表单数据传递到另一个 HTML 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14693758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
passing form data to another HTML page
提问by tonga
I have two HTML pages: form.html and display.html. In form.html, there is a form:
我有两个 HTML 页面：form.html 和 display.html。在form.html中，有一个表单：
<form action="display.html">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
The form data is sent to display.html. I want to display and use the form data serialNumberin display.html, as shown below:
表单数据被发送到 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>
So how can I pass the serialNumbervariable from form.html to display.html so that the above code in display.html will show the serial number and the JavaScript function show() gets the serialNumberfrom the first HTML?
那么如何将serialNumberform.html 中的变量传递给 display.html，以便 display.html 中的上述代码将显示序列号，而 JavaScript 函数 show()serialNumber从第一个 HTML 中获取序列号？
采纳答案by Richard JP Le Guen
If you have no option to use server-side programming, such as PHP, you could use the query string, or GET parameters.
如果您无法选择使用服务器端编程（例如 PHP），则可以使用查询字符串或 GET 参数。
In the form, add a method="GET"attribute:
在表单中，添加一个method="GET"属性：
<form action="display.html" method="GET">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
When they submit this form, the user will be directed to an address which includes the serialNumbervalue as a parameter. Something like:
当他们提交此表单时，用户将被定向到包含该serialNumber值作为参数的地址。就像是：
http://www.example.com/display.html?serialNumber=XYZ
You should then be able to parse the query string - which will contain the serialNumberparameter value - from JavaScript, using the window.location.searchvalue:
然后，您应该能够serialNumber使用以下window.location.search值从 JavaScript解析查询字符串（将包含参数值）：
// from display.html
document.getElementById("write").innerHTML = window.location.search; // you will have to parse
// the query string to extract the
// parameter you need
See also JavaScript query string.
另请参阅JavaScript 查询字符串。
The alternative is to store the values in cookies when the form is submit and read them out of the cookies again once the display.htmlpage loads.
另一种方法是在提交表单时将值存储在 cookie 中，并在display.html页面加载后再次从 cookie 中读取它们。
See also How to use JavaScript to fill a form on another page.
回答by Joshua Wooward
You need the get the values from the query string (since you dont have a method set, your using GET by default)
您需要从查询字符串中获取值（因为您没有设置方法，默认情况下使用 GET）
use the following tutorial.
使用以下教程。
http://papermashup.com/read-url-get-variables-withjavascript/
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;
}
回答by Satish
Use "Get" Method to send the value of a particular field through the browser:
使用“Get”方法通过浏览器发送特定字段的值：
<form action="display.html" method="GET">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
回答by Ganesh Kalyan Kommisetti
<form action="display.html" method="post">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>In display.html you should add the following code.
在 display.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>
回答by Weslley Rufino de Lima
Another option is to use "localStorage". You can easealy request the value with javascript in another page.
另一种选择是使用“localStorage”。您可以在另一个页面中使用 javascript 轻松请求该值。
On the first page, you use the following snippet of javascript code to set the localStorage:
在第一页上，您使用以下 javascript 代码片段来设置 localStorage：
<script>
localStorage.setItem("serialNumber", "abc123def456");
</script>
On the second page, you can retrieve the value with the following javascript code snippet:
在第二页上，您可以使用以下 javascript 代码段检索值：
<script>
console.log(localStorage.getItem("serialNumber"));
</script>
On Google Chrome You can vizualize the values pressing F12 > Application > Local Storage.
在 Google Chrome 上，您可以按 F12 > 应用程序 > 本地存储对值进行可视化。
Source: https://www.w3schools.com/jsref/prop_win_localstorage.asp
来源：https: //www.w3schools.com/jsref/prop_win_localstorage.asp
回答by CyberAbhay
If your situation is as described; You have to send action to a different servelet from a single form and you have two submit buttons and you want to send each submit button to different pages,then your easiest answer is here.
如果您的情况如所描述的那样；您必须从单个表单将操作发送到不同的servlet，并且您有两个提交按钮，并且您希望将每个提交按钮发送到不同的页面，那么您最简单的答案就在这里。
For sending data to two servelets make one button as a submit and the other as button.On first button send action in your form tag as normal, but on the other button call a JavaScript function here you have to submit a form with same field but to different servelets then write another form tag after first close.declare same textboxes there but with hidden attribute.now when you insert data in first form then insert it in another hidden form with some javascript code.Write one function for the second button which submits the second form. Then when you click submit button it will perform the action in first form, if you click on button it will call function to submit second form with its action. Now your second form will be called to second servlet.
为了将数据发送到两个小服务器，将一个按钮作为提交，另一个作为按钮。在表单标签中的第一个按钮发送操作正常，但在另一个按钮上调用 JavaScript 函数，您必须提交一个具有相同字段的表单，但是到不同的小服务器，然后在第一次关闭后编写另一个表单标签。在那里声明相同的文本框，但带有隐藏属性。现在，当您在第一个表单中插入数据时，然后将其插入另一个带有一些 javascript 代码的隐藏表单中。为提交的第二个按钮编写一个函数第二种形式。然后，当您单击提交按钮时，它将以第一个表单执行操作，如果您单击按钮，它将调用函数以通过其操作提交第二个表单。现在您的第二个表单将被调用到第二个 servlet。
Here you can call two serveltes from the same html or jsp page with some mixed code of javascript
在这里，您可以使用一些混合的 javascript 代码从同一个 html 或 jsp 页面调用两个服务器
An EXAMPLEof second hidden form
第二种隐藏形式的例子
<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> 回答by Vna
*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.
