Forward GET parameter to next URL

Question

I am building a form with HTML consisting of multiple pages, one per question (due to layout reasons). I use the 'GET' method to pass the parameters of the form input to next page, like this:

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

This works fine and leads me to the URL

/example1.html?Machine=Input

On the next page, I use the same code as mentioned above (only different name and id for the input), but when I submit that page the parameters from the first page won't be redirected (of course). So the URL looks somewhat like this:

/example2.html?Amount=Input

I would need to have the parameters of the first page, too though. Basically looking like this

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

Is there a simple way for doing this with little Javascript or even without it? Thanks for your help

score 2 · Answer 1 · answered Apr 26 '16 at 16:16

2

You could try adding hidden input elements to your form dynamically with javascript, created with name and value pairs from the GET parameters in document.location.search.

answered Apr 26 '16 at 16:16

score 0 · Answer 2 · edited May 23 '17 at 10:28

Use this bit to get the parameters How can I get query string values in JavaScript?

then this bit to add in the hidden form fields to the the form to pass along on the next submit

Create a hidden field in JavaScript

so something like this

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>

Thanks a lot! The code works fine, though I felt Martin pointed out a slightly faster alternative for my particular situation — Christoph Pahmeyer, Apr 26 '16 at 20:08

Martin · Accepted Answer · 2016-04-26T17:43:30.473

Click Run code snippet below to see a working example.

Instead of passing your results and going to the next step, you can just hide and reveal portions (steps) of the form using JavaScript.

A framework like AngularJS would make this extremely simple to do using declarative directive. But a plain old JavaScript will suffice.

The other advantage to this approach is that you can then POST your form to the web server.

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>

Wow! Works like a charm and is a lot faster than reloading every page. Thanks a lot! — Christoph Pahmeyer, Apr 26 '16 at 20:06

Forward GET parameter to next URL

3 Answers3