怎样从一个form传递数据到另一个form
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎样从一个form传递数据到另一个form相关的知识，希望对你有一定的参考价值。
参考技术A 如果是全局使用的可以单独声明静态变量。 如果是局部使用的话： 传入，通过构造函数； 传出，通过窗体事件。 举个例子，Form1在某方法中新建Form2实例、向其传入参数，并等待其关闭后得到传出的数据。将表单数据传递到另一个 HTML 页面
【中文标题】将表单数据传递到另一个 HTML 页面【英文标题】：passing form data to another HTML page 【发布时间】：2013-01-19 13:36:14 【问题描述】：我有两个 HTML 页面：form.html 和 display.html。在form.html中，有一个form：
<form action="display.html">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
表单数据被发送到 display.html。我想在display.html中显示和使用表单数据serialNumber，如下图：
<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？
【问题讨论】：
您需要使用服务器端语言。例如，PHP @Eric：我无法运行 PHP，因为我正在编写移动 Web 应用程序。所以我只能使用 HTML 和 JavaScript。 @tonga 为什么不能使用服务器端技术？ “因为您正在编写移动网络应用程序”并不是一个真正的答案。任何可以在移动浏览器上查看的应用程序仍然只是一个 Web 应用程序，由服务器托管。您是否有不允许使用动态页面语言的托管限制？ @Peter：我的移动应用是本地应用。所以它不会连接到任何网络服务器。这就是为什么我不能使用服务器端技术。 好的，知道这很有帮助。您可以考虑在问题中说明这一点。 【参考方案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
然后您应该能够使用 window.location.search 值从 JavaScript 解析查询字符串 - 它将包含 serialNumber 参数值：
// 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 query string。
另一种方法是在提交表单时将值存储在 cookie 中，并在 display.html 页面加载后再次从 cookie 中读取它们。
另见How to use JavaScript to fill a form on another page。
【讨论】：
@tonga 请参阅How can I get query string values 了解处理查询字符串的示例和方法。 @Boaz：谢谢。我去看看试试看。 @tonga 几分钟前编辑。尝试重新加载。 @tonga - 我不确定他们会不会，但你应该试试看它是否有效。如果它不使用 cookie，请查看我链接到的第二个问题。 Cookie 应该可以工作，但它们可能会更混乱，因为它们的寿命比查询字符串参数长。 @Richard：我刚刚重试，终于在我的手机上运行了。我认为有些事情搞砸了，所以我最初没有看到解析的查询字符串。非常感谢。【参考方案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】：使用“Get”方法通过浏览器发送特定字段的值：
<form action="display.html" method="GET">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
【讨论】：
【参考方案4】：如果您的情况与描述的一样； 您必须从单个表单向不同的 serverlet 发送操作，并且您有两个提交按钮，并且您希望将每个提交按钮发送到不同的页面，那么您最简单的答案就在这里。
为了向两个servelet发送数据，将一个按钮作为提交，另一个作为按钮。在第一个按钮上，您的表单标签中的发送操作正常，但在另一个按钮上调用JavaScript函数，您必须提交一个表单相同的字段，但到不同的servelets，然后在第一次关闭后编写另一个表单标签。在那里声明相同的文本框但具有隐藏属性。现在当您以第一个表单插入数据时，然后使用一些javascript代码将其插入另一个隐藏表单。为第二个编写一个函数提交第二个表单的按钮。然后，当您单击提交按钮时，它将在第一个表单中执行操作，如果您单击按钮，它将调用函数以提交第二个表单及其操作。现在您的第二个表单将被调用到第二个 servlet。
在这里你可以使用一些混合的javascript代码从同一个html或jsp页面调用两个servteles
第二种隐藏形式的示例
<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.
【讨论】：
此答案适用于支持 java 的服务器。但问题只是html。【参考方案6】：<form action="display.html" method="get">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>在 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>
【讨论】：
【参考方案7】：另一个选择是使用“localStorage”。您可以在另一个页面中使用 javascript 轻松请求该值。
在第一页，你使用下面的 javascript 代码 sn-p 来设置 localStorage：
<script>
localStorage.setItem("serialNumber", "abc123def456");
</script>
在第二页，你可以用下面的javascript代码sn-p来检索值：
<script>
console.log(localStorage.getItem("serialNumber"));
</script>
在 Google Chrome 上，您可以按 F12 > Application > Local Storage 将值可视化。
来源： https://www.w3schools.com/jsref/prop_win_localstorage.asp
【讨论】：
【参考方案8】：使用纯 JavaScript。使用本地存储非常容易。 第一页表单：
function getData()
//gettting the values
var email = document.getElementById("email").value;
var password= document.getElementById("password").value;
var telephone= document.getElementById("telephone").value;
var mobile= document.getElementById("mobile").value;
//saving the values in local storage
localStorage.setItem("txtValue", email);
localStorage.setItem("txtValue1", password);
localStorage.setItem("txtValue2", mobile);
localStorage.setItem("txtValue3", telephone);
input
font-size: 25px;
label
color: rgb(16, 8, 46);
font-weight: bolder;
#data
<fieldset style="width: fit-content; margin: 0 auto; font-size: 30px;">
<form action="action.html">
<legend>Sign Up Form</legend>
<label>Email:<br />
<input type="text" name="email" id="email"/></label><br />
<label>Password<br />
<input type="text" name="password" id="password"/></label><br>
<label>Mobile:<br />
<input type="text" name="mobile" id="mobile"/></label><br />
<label>Telephone:<br />
<input type="text" name="telephone" id="telephone"/></label><br>
<input type="submit" value="Submit" onclick="getData()">
</form>
</fieldset>这是第二页：
//displaying the value from local storage to another page by their respective Ids
document.getElementById("data").innerHTML=localStorage.getItem("txtValue");
document.getElementById("data1").innerHTML=localStorage.getItem("txtValue1");
document.getElementById("data2").innerHTML=localStorage.getItem("txtValue2");
document.getElementById("data3").innerHTML=localStorage.getItem("txtValue3"); <div style=" font-size: 30px; color: rgb(32, 7, 63); text-align: center;">
<div style="font-size: 40px; color: red; margin: 0 auto;">
Here's Your data
</div>
The Email is equal to: <span id="data"> Email</span><br>
The Password is equal to <span id="data1"> Password</span><br>
The Mobile is equal to <span id="data2"> Mobile</span><br>
The Telephone is equal to <span id="data3"> Telephone</span><br>
</div>重要提示：
请不要忘记为第二个 html 文件命名为“action.html”以使代码正常工作。我不能在 sn-p 中使用多个页面，这就是为什么它不能在这里工作的原因 在你的编辑器的浏览器中尝试它肯定会工作。【讨论】：
以上是关于怎样从一个form传递数据到另一个form的主要内容，如果未能解决你的问题，请参考以下文章