Forward GET-Parameter auf nächste URL

Question

Ich baue ein Formular mit HTML aus mehreren Seiten, eine pro Frage (aus Gründen des Layouts). Ich benutze die ‚GET‘ -Methode, die Parameter der Formulareingabe zur nächsten Seite zu übergeben, wie folgen aus:

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

Dies funktioniert gut und führt mich zu der URL

/example1.html?Machine=Input 

Auf der nächsten Seite, Ich benutze den gleichen Code wie oben erwähnt (nur unterschiedlicher Name und ID für die Eingabe), aber wenn ich diese Seite absende, werden die Parameter von der ersten Seite nicht umgeleitet (natürlich). So sieht die URL ungefähr so ​​aus:

Ich hätte auch die Parameter der ersten Seite, obwohl. Sieht so aus

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

Gibt es eine einfache Möglichkeit, dies mit wenig Javascript oder sogar ohne es zu tun? Danke für Ihre Hilfe

Answer 1

Klicken Sie auf Führen Sie das Code-Snippet aus, um ein funktionierendes Beispiel zu sehen.

Anstatt die Ergebnisse zu übergeben und mit dem nächsten Schritt fortzufahren, können Sie Teile (Schritte) des Formulars einfach mit JavaScript ausblenden und anzeigen.

Ein Framework wie AngularJS würde dies mit deklarativen Anweisungen extrem einfach machen. Aber ein einfaches altes JavaScript wird ausreichen.

Der andere Vorteil dieses Ansatzes ist, dass Sie dann Ihr Formular an den Webserver POST können.

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

Sie versuchen, versteckt das Hinzufügen könnte input Elemente in Ihrem Formular dynamisch mit Javascript, erstellt mit name und value Paare aus den GET-Parameter in document.location.search.

Answer 3

Mit diesem Bit zu bekommen die Parameter How can I get query string values in JavaScript?

dann dieses Bit in den versteckten Formularfelder zum Formular hinzuzufügen passieren entlang auf dem

nächsten einreichen

Create a hidden field in JavaScript

so etwas wie diese

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>