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

user6105387 · Accepted Answer · 2016-04-26 16:16:56Z

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, 2016 at 16:16

user6105387

Sign up to request clarification or add additional context in comments.

Comments

Martin · Accepted Answer · 2016-04-26 17:43:30Z

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!

Community · Accepted Answer · 2017-05-23 10:28:11Z

0

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>

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Apr 26, 2016 at 16:53

n3wc

1463 bronze badges

1 Comment

Christoph Pahmeyer Over a year ago

Thanks a lot! The code works fine, though I felt Martin pointed out a slightly faster alternative for my particular situation

Collectives™ on Stack Overflow

Forward GET parameter to next URL

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related