次のURLへのGETパラメータの転送

Question

複数のページから構成されたフォームを構築しています（レイアウト上の理由により）。私はこのように、次のページにフォーム入力のパラメータを渡すには「GET」メソッドを使用します。これは、正常に動作し、次のページでURL

/example1.html?Machine=Input 

に私をリード

<form action="example.html" method="GET"> 
    <input type="number" step="0.1" name="Machine" id="Machine" placeholder="Machine"> 
    <input type="image" value="Submit" src="images/button.svg" alt="Forward"/> 
</form> 

、私は上記のコードと同じコードを使用します（入力の名前とIDは異なる）が、そのページを送信すると、最初のページのパラメータは（もちろん）リダイレクトされません。 URLは次のようになります。

/example2.html?Amount=Input 

最初のページのパラメータも必要です。基本的にこのように見える

/example2.html?Machine=Input&Amount=Input 

これを行うには簡単な方法がありますか？あなたの助け

Answer 1

以下のコードを実行してください。を参照してください。

結果を渡して次の手順に進むのではなく、JavaScriptを使用してフォームの部分（ステップ）を非表示にすることができます。

AngularJSのようなフレームワークは、宣言型ディレクティブを使用してこれを行うのが非常に簡単です。しかし、普通の古いJavaScriptでも十分です。

この方法のもう1つの利点は、フォームをWebサーバーにPOSTできることです。

function goTo(step) { 
 
    
 
    var steps = document.querySelectorAll('[step]'), 
 
     formStep, 
 
     formStepNo, 
 
     i; 
 
    
 
    for (i = 0; i < steps.length; i++) { 
 
    
 
    formStep = steps[i]; 
 
    
 
    formStepNo = formStep.getAttribute('step'); 
 
    
 
    if (step == formStepNo) { 
 
     formStep.style.display = 'block'; 
 
    } else { 
 
     formStep.style.display = 'none'; 
 
    } 
 
    } 
 
} 
 

 
var step = 1; 
 
goTo(step); 
 

 
function nextStep() { 
 
    step++; 
 
    goTo(step); 
 
} 
 

 
function backStep() { 
 
    step--; 
 
    goTo(step); 
 
}

<form action="example.html" method="POST"> 
 
    <div step="1"> 
 
     <p>Step 1</p> 
 
     <input type="number" name="Machine" id="Machine" placeholder="Machine" /> 
 
     <button onclick="nextStep()" type="button">Forward</button> 
 
    </div> 
 
    <div step="2"> 
 
     <p>Step 2</p> 
 
     <input type="string" name="foo" placeholder="foo"/> 
 
     <button type="button" onclick="backStep()">Back</button> 
 
     <button type="button" onclick="nextStep()">Forward</button> 
 
    </div> 
 
    <div step="3"> 
 
     <p>Step 3</p> 
 
     <input type="string" name="bar" placeholder="bar"/> 
 
     <button type="button" onclick="backStep()">Back</button> 
 
     <button type="submit">Submit</button> 
 
    </div> 
 
</form>

Answer 2

してくれてありがとうあなたがdocument.location.searchでGETパラメータからnameとvalueペアで作成され、JavaScriptで動的にフォームに隠されたinput要素を追加してみてください。

Answer 3

使用このビットをパラメータ How can I get query string values in JavaScript?

を取得するには、このビットは次のように

Create a hidden field in JavaScript

を提出し、何かのように一緒に渡すためにフォームに隠しフォームフィールドに追加しますこの

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 Amount= getParameterByName('Amount'); 
 
var input = document.createElement("input"); 
 
input.setAttribute("type", "hidden"); 
 
input.setAttribute("name", "Amount"); 
 
input.setAttribute("value", Amount); 
 
document.getElementById("example2").appendChild(input);

<form action="example1.html" method="GET" id="example1"> 
 
    <input type="number" step="0.1" name="Amount" id="Amount" placeholder="Amount"> 
 
    <input type="image" value="Submit" src="images/button.svg" alt="Forward"/> 
 
</form> 
 

 
<form action="example2.html" method="GET" id="example2"> 
 
    <input type="number" step="0.1" name="Machine" id="Machine" placeholder="Machine"> 
 
    <input type="image" value="Submit" src="images/button.svg" alt="Forward"/> 
 
</form>