Data Transfer between Web pages Using JavaScript

Question

I'm Supposed to click on a button, Then it will redirect to a form page and fill up a particular details. I must obtain this data and store it locally using either session objects or cookies.

Button code:

<form action="Enquiry.html" method="get">
  <button class="button1" id="CreamLx">Book Now!</button>
</form>

Form Page:

<form method="post" action="" class="form1">
  <p>
    <label for="Products">Products</label>
  </p>
  <select name="Products" id="Products" required="required">
    <option value="">Please Select</option>
    <option value="Cream1">Creamy</option>
</form>

So basically when I click the button it should go to the form page and select the creamy under the for products.How should I do?

Answer 1

Set a hidden input in your first form, containing the id of the option you want to select. This will get passed over via the GET action of the HTML form

<form action="Enquiry.html" method="get">
    <button class="button1" id="CreamLx">Book Now!</button>
    <input type="hidden" value="Cream1" name="product">
</form>

On your second page

<form method="post" action="" class="form1"> 
  <p><label for="Products">Products</label></p> 
  <select name="Products" id="Products" required="required" >
  <option value="">Please Select</option>  
  <option value="Cream1">Creamy</option> 
</form>

Use this javascript BELOW the form (ideally at the end of the document), if it was at the top of the page it would execute before the page has rendered. You could also extract the code to an external file.

//https://css-tricks.com/snippets/javascript/get-url-variables/
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return (false);
}

var product = getQueryVariable("product"); //get data passed over in the url

var option = document.getElementById('Products').value = product; //set the selected option