3

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?

BenG
  • 14,826
  • 5
  • 45
  • 60
Detonator
  • 73
  • 1
  • 9

1 Answers1

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
BenG
  • 14,826
  • 5
  • 45
  • 60
gvperkins
  • 168
  • 2
  • 9
  • @qvp16 need to create external javascript file =( – Detonator May 05 '16 at 11:12
  • Then just just extract the javascript to a file and link that at the bottom instead – gvperkins May 05 '16 at 11:13
  • btw bro, the code u done.. is it using session or cookies? because the requirement says i cant use javascript libraries – Detonator May 05 '16 at 11:17
  • 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 – gvperkins May 05 '16 at 11:20
  • it will remember until u reload the webpage or close it. Bro, i did like what u said but its not working =( – Detonator May 05 '16 at 11:24
  • or can u provide me ur email? i'll send over the files for you to see – Detonator May 05 '16 at 11:26
  • What not working, are there any errors? post your code. – gvperkins May 05 '16 at 11:56
  • sounds like there is no parameter in the url, did you make the change to the first form and click on the button to get you to the second form? or just opened the second form? – gvperkins May 05 '16 at 12:33
  • when i click on the button, its just goes to the form page and the selection list had not been filled – Detonator May 05 '16 at 12:57
  • i did exactly like the code u given to me, so basically that's what the codes look like.. – Detonator May 05 '16 at 13:18
  • Just noticed in your example, the is missing, could be something to do with it. – gvperkins May 05 '16 at 13:25
  • ya i've added, still same – Detonator May 05 '16 at 13:29
  • When you click on the "book now" button and you are taken to the page with the select list, does the url look like this ? Enquiry.html?product=Cream1 – gvperkins May 05 '16 at 13:34
  • nope it looks like this file:///C:/Users/Detonator/Folder01/Enquiry.html – Detonator May 05 '16 at 13:38
  • Thats your problem then, check your
    code for the button against my example
     – gvperkins May 05 '16 at 13:40
  • Bro, My code is exactly same with yours, i copied everything from your example and paste in on mine – Detonator May 05 '16 at 13:53
  • I dont know then, my code works on my computer, there must be a difference somewhere. Can you post the contents of the files? without that theres little more I can suggest. – gvperkins May 05 '16 at 14:41
  • u want the full code of those 2 pages and javascript? – Detonator May 05 '16 at 14:44
  • yea need to see it all – gvperkins May 05 '16 at 14:44
  • its too long, cant comment it here.. how should i show u the code? – Detonator May 05 '16 at 14:54
  • edit your question, you will be able to post it there or put the contents here https://paste.ee/ and provide links – gvperkins May 05 '16 at 14:54
  • its showing Enquiry.html?product=Cream1 now but not selecting the selection – Detonator May 05 '16 at 15:01
  • The original and the 1 post in forum is different.. i've mark the code with ************ https://paste.ee/p/i8pCQ – Detonator May 05 '16 at 15:12
  • move to the above the end body tag and it will work fine – gvperkins May 05 '16 at 15:21
  • if i want to add more button of other products i just do the hidden thing? – Detonator May 05 '16 at 15:36
  • Yeah and change the value to match the value that is in your drop down list of the other page. – gvperkins May 05 '16 at 15:38
  • just 1 last question, why the src script dont work when i put it under but works if put in under – Detonator May 05 '16 at 15:39
  • As the page loads that js file will get called, and it will instantly run the code, all this happens before the HTML will have rendered on the page so it cant find the elements its looking for. Putting it at the bottom means it will run after all the HTML has rendered. If you wanted to keep it at the top, you could look into running the javascript on "DOM Ready" http://stackoverflow.com/questions/2304941/what-is-the-non-jquery-equivalent-of-document-ready – gvperkins May 05 '16 at 15:42
  • @qvp16 do u know how to convert above code using session storage? – Detonator May 07 '16 at 10:44