重要提示：

Question

我有两个HTML页面：form.html和display.html。在form.html中，有一个表单：

<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（）获取{{1}从第一个HTML？

Answer 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

然后，您应该能够使用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 query string。

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

另见How to use JavaScript to fill a form on another page。

Answer 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;
}

Answer 3

使用＆＃34;获取＆＃34;通过浏览器发送特定字段值的方法：

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

Answer 4

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

在display.html中，您应该添加以下代码。

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

Answer 5

另一个选择是使用“ 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

Answer 6

如果你的情况如上所述; 您必须从单个表单向不同的服务器发送操作，并且您有两个提交按钮，并且您希望将每个提交按钮发送到不同的页面，那么您最简单的答案就在这里。

要将数据发送到两个服务器，请将一个按钮作为提交，另一个按钮作为按钮。在第一个按钮上正常发送表单标记中的操作，但在另一个按钮上调用JavaScript函数，您必须提交一个表单，相同的字段，但不同的servlet然后在第一次close.declare相同的文本框之后写入另一个表单标签但是有隐藏的attribute.now当你在第一个表单中插入数据然后将其插入另一个带有一些javascript代码的隐藏表单。为第二个写入一个函数提交第二个表单的按钮。然后，当您单击提交按钮时，它将以第一种形式执行操作，如果您单击按钮，它将调用函数以提交第二个表单及其操作。现在你的第二个表单将被调用到第二个servlet。

在这里你可以使用javascript的混合代码从同一个html或jsp页面调用两个serveltes

第二个隐藏表单的示例

＆＃13;

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

＆＃13;

Answer 7

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

Answer 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”，以使代码正常工作。我不能在一个代码段中使用多个页面，这就是为什么它在这里不起作用的原因，请尝试在您的编辑器中的浏览器中确定它会起作用。

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

8 个答案:

重要提示：