javascript - javascriptを使用してHTMLフォームの値を新しいHTMLページに投稿する方法

Question

「page1.html」に 4 つの要素 (textbox1、textbox2、listbox1、listbox2) を持つ HTML フォームがあります。送信をクリックすると、これらの要素の値がテーブルに新しいページ (page2.html) に投稿されるようにしたい

2 ページの表は次のとおりです。

• 最初の行: textbox1 の値
• 2 行目の列 1: textbox2 の値
• 2 行目の列 2: listbox1 の値
• 3 行目: listbox2 の値

助けてください

Answer 1

プレーン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);
}

Answer 2

type = GETここでとを使用してフォームを使用できますaction="page2.html"

次に、page2.htmlpageload で次の関数を使用して 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>