How to get URL params and make them hidden values

Question

I'm a noob when it comes to this. I'm simply trying to allow a customer to first fill out a form, save their information for the next page, save their information again for the 3rd page, and when the customer is done filling out the 3rd page to POST it to our CRM.

I've read through many different strategies on getting the URL parameters, but I don't understand how to make them hidden input values.

Ex: http://crackerjackpromo.wjserver800.com/ START QUOTE ...

Thanks and happy 4th!

Answer 1

Something like this?

<form method="POST" action="/submit-form">
  <!-- your form fields... -->

  <input name="hidden_param" id="some_input" type="hidden" />
  <input type="submit" value="Submit" />
</form>

<script>
var someValue = 'some value' // you got it from the params
document.getElementById('some_input').value = someValue;
</script>

hidden_param will be part of the POST data, which you can read on the server..

Answer 2

You could also store those values in local storage. By doing that, even if the user refreshes the page while being in step 2, 3 or any other step, the values will still be there and it'll be a much cleaner approach than saving all those values in the URL or in hidden fields (and it'll still be invisible for the user... as long as he doesn't inspect the dev tools, but it's pretty much the same case with hidden fields).

The best part is that it's really easy to use it. You can store a new values like this:

localStorage.setItem("name", "John");

And you can retrieve the values like this:

localStorage.getItem("name");

Just remember that the local storage information is being stored in the web browser, so if your user wants to resume the process in a different web browser, that information will not be there anymore, and he'll need to start all over agian.