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?

you want when u click on the button <option value="Cream1">Creamy</option> this option get automatic selected ? I m right — Akhilesh Singh
– Akhilesh Singh, Commented May 5, 2016 at 8:52
@AkhileshSingh i need to do that with javascript/dom (external file) — Detonator
– Detonator, Commented May 5, 2016 at 9:00
@AkhileshSingh Bai, Cannot use JavaScript libraries like jQuery. =( — Detonator
– Detonator, Commented May 5, 2016 at 9:15

BenG · Accepted Answer · 2016-05-05 14:45:34Z

2

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

edited May 5, 2016 at 14:45

BenG

15.2k5 gold badges48 silver badges62 bronze badges

answered May 5, 2016 at 11:07

gvperkins

1782 silver badges9 bronze badges

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

29 Comments

Detonator Over a year ago

@qvp16 need to create external javascript file =(

gvperkins Over a year ago

Then just just extract the javascript to a file and link that at the bottom instead <script src="javascript.js"></script>

Detonator Over a year ago

btw bro, the code u done.. is it using session or cookies? because the requirement says i cant use javascript libraries

gvperkins Over a year ago

Neither, just standard HTML functionality, kind of a session I guess as the data will be lost if you reload or close the window. What is the requirement regarding sessions/cookies? does it need to remember the option if you close the browser or leave the page and return

Detonator Over a year ago

it will remember until u reload the webpage or close it. Bro, i did like what u said but its not working =(

|

Collectives™ on Stack Overflow

Data Transfer between Web pages Using JavaScript

1 Answer 1

29 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

29 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related