将表单数据传递到另一个 HTML 页面

Posted 2023-03-10

技术标签:

【中文标题】将表单数据传递到另一个 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 中使用多个页面，这就是为什么它不能在这里工作的原因在你的编辑器的浏览器中尝试它肯定会工作。

【讨论】：

以上是关于将表单数据传递到另一个 HTML 页面的主要内容，如果未能解决你的问题，请参考以下文章

将来自服务器的数据从一个页面传递到另一个页面，而不使用表单

如何将列表视图点击事件中的数据传递到另一个页面中的 Telerik 数据表单

如何使用 HTML 表单将 JavaScript 值传递到另一个 PHP 页面？

Laravel 将数据从一个视图传递到另一个视图

如何在页面之间传递input =“file”数据

将参数传递到另一个网页