60

我有两个 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 中获取？

4

8 回答 8

44

如果您无法选择使用服务器端编程，例如 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 查询字符串。

display.html另一种方法是在提交表单时将值存储在 cookie 中，并在页面加载后再次从 cookie 中读取它们。

另请参阅如何使用 JavaScript 在另一个页面上填写表单。

于 2013-02-04T19:17:07.143 回答
10

您需要从查询字符串中获取值（因为您没有设置方法，默认情况下使用 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;
}
于 2013-02-04T19:20:57.813 回答
5 

<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>
于 2018-09-01T12:46:13.980 回答
3

另一种选择是使用“localStorage”。您可以轻松地在另一个页面中使用 javascript 请求该值。

在第一页上，您使用以下 javascript 代码片段来设置 localStorage：

<script>    
   localStorage.setItem("serialNumber", "abc123def456");
</script>

在第二页上，您可以使用以下 javascript 代码片段检索该值：

<script>    
   console.log(localStorage.getItem("serialNumber"));
</script>

在 Google Chrome 上您可以按 F12 > 应用程序 > 本地存储对值进行可视化。

来源： https ://www.w3schools.com/jsref/prop_win_localstorage.asp

于 2020-02-06T22:21:53.170 回答
2

使用“Get”方法通过浏览器发送特定字段的值：

<form action="display.html" method="GET">
    <input type="text" name="serialNumber" />
    <input type="submit" value="Submit" />
</form>
于 2015-07-28T05:03:58.970 回答
2

使用纯 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”以使代码正常工作。我不能在一个片段中使用多个页面，这就是为什么它不能在这里工作在你的编辑器的浏览器中尝试它肯定会工作的原因。
于 2020-07-18T09:40:56.783 回答
0

如果您的情况与描述的一样；您必须从单个表单向不同的 serverlet 发送操作，并且您有两个提交按钮，并且您希望将每个提交按钮发送到不同的页面，那么您最简单的答案就在这里。

要将数据发送到两个servelet，将一个按钮作为提交，另一个作为按钮。在第一个按钮上，您的表单标记中的发送操作正常，但在另一个按钮上调用JavaScript函数，您必须提交具有相同字段的表单，但到不同的servlet，然后在第一次关闭后编写另一个表单标签。在那里声明相同的文本框但具有隐藏属性。现在当您以第一个表单插入数据时，然后使用一些javascript代码将其插入另一个隐藏表单中。为提交的第二个按钮编写一个函数第二种形式。然后，当您单击提交按钮时，它将在第一个表单中执行操作，如果您单击按钮，它将调用函数以提交第二个表单及其操作。现在您的第二个表单将被调用到第二个 servlet。

在这里，您可以使用一些混合的 javascript 代码从同一个 html 或 jsp 页面调用两个服务器

第二种隐藏形式的示例

<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>

于 2016-05-12T06:32:28.743 回答
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.
于 2017-09-20T07:23:50.907 回答