如何使用javascript将HTML表单的值发布到新的HTML页面

How to post values of HTML form to new HTML page using javascript

本文关键字：HTML 页面 何使用 表单 javascript      更新时间：2023-09-26

我有一个HTML表单'page1.html'与四个元素(textbox1, textbox2, listbox1, listbox2)。在单击提交时，我希望这些元素的值在表中发布到新页面(page2.html)

第2页的表格如下:

  • 第一行:textbox1
    • 的值
  • 第二行第1列:textbox2
    • 的值
  • 第二行第2列:listbox1
    • 的值
  • 第三行:listbox2
    • 的值

请帮

对于普通的html和javascript，您可以这样做

page1.html 

<input type="text" id="txt1" />
<input type="button" value="Submit" onclick="postData()" />
javascript 

function postData(){
    var val = document.getElementById("txt1").value;
    var tbl = "<table><tr><td>"+val+"</td></tr></table>";
    var w = window.open("page2.html");
    w.document.write(tbl);
}

这里可以使用type = GET和action="page2.html"的表单

然后在page2.html中，在pageload中使用以下函数提取URL参数

function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}

演示:

Page1.html 

<form type="GET" action="page2.html">
<input name="text" id="txt" />
</form>

Page2.html 

<script>
function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}
alert(getURLParameter("text"));
</script>
相关文章：