60

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に送信されます。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

もう1つのオプションは、「localStorage」を使用することです。別のページのjavascriptで簡単に値をリクエストできます。

最初のページでは、次のjavascriptコードのスニペットを使用してlocalStorageを設定します。

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

2ページ目では、次の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>

これは2ページ目です：

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

重要な注意点：

コードを正しく機能させるために、2番目のhtmlファイルに「action.html」という名前を付けることを忘れないでください。スニペットで複数のページを使用することはできません。そのため、ここで機能しないのは、確実に機能するエディターのブラウザーで試してみてください。
于 2020-07-18T09:40:56.783 に答える
0

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

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

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

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>

于 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 に答える