web-dev-qa-db-ja.com

フォームデータを別のHTMLページに渡す

Form.htmlとdisplay.htmlの2つの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>

それでは、上記のdisplay.htmlのコードがシリアル番号を表示し、JavaScript関数show（）が最初のHTMLからserialNumberを取得するように、serialNumber変数をform.htmlからdisplay.htmlに渡すにはどうすればよいですか？

javascripthtmlforms
45
tonga

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クエリ文字列 も参照してください。

別の方法は、フォームが送信されるときに値をCookieに保存し、display.htmlページが読み込まれたら、Cookieから値を再度読み取ることです。

JavaScriptを使用して別のページのフォームに入力する方法 も参照してください。

35
Richard JP Le Guen

クエリ文字列から値を取得する必要があります（メソッドが設定されていないため、デフォルトで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;
}
10
Joshua Wooward

「Get」メソッドを使用して、ブラウザを介して特定のフィールドの値を送信します。

<form action="display.html" method="GET">
    <input type="text" name="serialNumber" />
    <input type="submit" value="Submit" />
</form>
2
Satish
<form action="display.html" method="post">
    <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>
1
Gäñèsh Kàlyâñ Kömmîsëttï

状況が説明どおりである場合;単一のフォームから別のサーブレットにアクションを送信する必要があり、2つの送信ボタンがあり、各送信ボタンを異なるページに送信する場合、最も簡単な答えはこちらです。

2つのサーブレットにデータを送信するには、1つのボタンを送信ボタンとして、もう1つのボタンをボタンとして作成します。最初のボタンでは通常どおりフォームタグでアクションを送信しますが、他のボタンではここでJavaScript関数を呼び出し、同じフィールドでフォームを送信する必要がありますが、異なるサーブレットに、最初にclose.declare同じ別のフォームタグの後に別のフォームタグを書き込みますが、最初のフォームにデータを挿入した後、JavaScriptコードを使用して別の非表示フォームに挿入します。送信する2番目のボタンに1つの関数を記述します2番目のフォーム。次に、送信ボタンをクリックすると、最初のフォームでアクションが実行されます。ボタンをクリックすると、関数が呼び出され、アクションとともに2番目のフォームが送信されます。これで、2番目のフォームが2番目のサーブレットに呼び出されます。

ここでは、javascriptの混合コードを使用して、同じhtmlまたはjspページから2つのserveltesを呼び出すことができます

例 2番目の非表示フォーム

<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>
0
CyberAbhay
*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.
0
Vna