By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,940 Members | 1,300 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,940 IT Pros & Developers. It's quick & easy.

Help with passing form values

P: 27
Im trying to send 3 bits of information to another page but I dont know how to do it.

First page:
http://edgwarelocalcars.co.uk/quote3999.html

In the first page, the user types in postcodes in two different form text boxes and upon submission the price is displayed below along with the route being plotted on a google map to the left as well as hiding the "calcualate price button" and showing the "confirm & book" button. Once the button is clicked it takes me to booking2.html with some paramaters at the end. An example is shown below

http://edgwarelocalcars.co.uk/Bookin...ults2=results2

One problem is that results2=results2, (im assuming) there should be a price shown there as in the page quote3999.html, <p id="results2"> shows the price and I was advised to create a hidden input with the same id so that it would pass the name/value along with the addresses.
Expand|Select|Wrap|Line Numbers
  1.                     <p id="results"></p>
  2.  <p id="results2"></p>  <p id="results3"></p>
  3.  
  4.  <input name="price" id="results2" type="hidden" />
  5.  
Heres the script someone made for me which brings (some of) the results to booking2.html. Please note that quote is the name of the form that contains everything.

Expand|Select|Wrap|Line Numbers
  1.     function showLocation() {
  2.     if(document.getElementById('quote').innerHTML!='') { // need to wait for the result from gmaps
  3.     document.forms[0].onsubmit = null;
  4.     document.forms[0].action = 'http://edgwarelocalcars.co.uk/Booking2.html';
  5.     document.getElementById('GMsubmit').style.display = 'none';
  6.     document.getElementById('CBsubmit').style.display = '';
  7.  
[Second Page - http://edgwarelocalcars.co.uk/Booking2.html]

This is the page I wish to display the results. To be more precise, above the table containing the cars. I want the price to be displayed along with the addresses, and also have the price underneath the first car, then for the second I need the price to be displayed with 2 added to it, third car should be the same but 10 added but this bits I will work on later, I just want to concentrate on the values being passed.
At the moment I dont know how to get the address1 and address2 along with the price displayed.
Jan 21 '10 #1

✓ answered by gits

the getParams function could be simplified a bit:
Expand|Select|Wrap|Line Numbers
  1. function getParams() {
  2.     var search        = top.location.search.replace(/^[?]/, '');
  3.     var paramsStrings = search.split('&');
  4.     var params        = {};
  5.  
  6.     for (var i = 0, l = paramsStrings.length; i < l; ++i) {
  7.         var p = paramsStrings[i].split('=');
  8.  
  9.         alert(p[0] + ' = ' + p[1]);
  10.  
  11.         params[p[0]] = p[1];
  12.     }
  13. }
  14.  
instead of the alert do what you want with the params there. The code currently stores the params in a variable ... it might be that you don't need this or use it anywhere as you wish ...

basicly it uses the querystring and extracts the params from it by splitting the string first at the '&' and second at the '='.

kind regards

Share this Question
Share on Google+
19 Replies


P: 16
I see in Booking2.html you have a function called getParams. I don't see it ever being called though. And I don't see it populating anything. It just parses the URL and does nothing else.

Is your question how to use this function?
Jan 21 '10 #2

P: 27
Yes I need help with the function. Ive tried google and tried some codes but I can never figure out what to do. If you can help me I would be very grateful
Jan 21 '10 #3

P: 16
Here is some code for you to play with. It would replace the code in booking2. I'll look at the quote3999 a little later. Got get some work done.

location.href would return your full query string.

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function getParams(location) {
  3.     //var location = location.href;
  4.     var location = "http://edgwarelocalcars.co.uk/Booking2.html?address1=ha8+7ej%C2%A0UK&address2=nw 2+2nj%C2%A0UK&results2=results2&price=2.00"; 
  5.     var idx = location.indexOf('?');
  6.     var str = location.substr(idx + 1, location.length - idx);
  7.     str = str.toString();
  8.     var name = "";
  9.     var value = "";
  10.     var tempArr = new Array();     
  11.     var params = str.split("&");
  12.     for (i = 0; i < params.length; i++) {
  13.         tempArr = params[i].split("=");
  14.         name = tempArr[0];
  15.         value = tempArr[1];
  16.         if (name == "price") {
  17.             document.getElementById("chk1").innerHTML = value;
  18.         }
  19.     }
  20. }
  21. </script>
  22. <body onLoad="getParams()">
  23.     <input type="checkbox" name="ckbox" />
  24.     <p id="chk1"></p>
  25. </body>
  26.  
Jan 21 '10 #4

P: 27
Thanks! But now I have no idea what do to with this.
Ive Put this on a new page to see how it works and it shows that it displays 2.00 when Using the
Expand|Select|Wrap|Line Numbers
  1. var location = "http://edgwarelocalcars.co.uk/Booking2.html?address1=ha8+7ej%C2%A0UK&address2=nw 2+2nj%C2%A0UK&results2=results2&price=2.00"; 
.
I deleted that and used the locaton.href, then added the
Expand|Select|Wrap|Line Numbers
  1. l?address1=ha8+7ej%C2%A0UK&address2=nw 2+2nj%C2%A0UK&results2=results2&price=2.00
to the end of the page when previewing it but it didnt show the price! Ive even changed "price" to address1 etc but still cant get my head round it!

Ive uploaded the updated version of the page http://edgwarelocalcars.co.uk/Booking2.html
If you dont mind explaing what bit does what in the code you gave me that would greatly help me.

Thanks
Jan 22 '10 #5

gits
Expert Mod 5K+
P: 5,390
the getParams function could be simplified a bit:
Expand|Select|Wrap|Line Numbers
  1. function getParams() {
  2.     var search        = top.location.search.replace(/^[?]/, '');
  3.     var paramsStrings = search.split('&');
  4.     var params        = {};
  5.  
  6.     for (var i = 0, l = paramsStrings.length; i < l; ++i) {
  7.         var p = paramsStrings[i].split('=');
  8.  
  9.         alert(p[0] + ' = ' + p[1]);
  10.  
  11.         params[p[0]] = p[1];
  12.     }
  13. }
  14.  
instead of the alert do what you want with the params there. The code currently stores the params in a variable ... it might be that you don't need this or use it anywhere as you wish ...

basicly it uses the querystring and extracts the params from it by splitting the string first at the '&' and second at the '='.

kind regards
Jan 22 '10 #6

P: 27
Thanks, yes i think i can make sense of what the code does now, but i still have trouble actually getting it to display the values on the page.
Jan 22 '10 #7

gits
Expert Mod 5K+
P: 5,390
where should what appear?
Jan 22 '10 #8

P: 27
anywhere on the page. I just need to know how to actually get all the values from the previous page written there.
Jan 22 '10 #9

gits
Expert Mod 5K+
P: 5,390
in a previous post was already a hint ... just put a container to the page like:
Expand|Select|Wrap|Line Numbers
  1. <div id="anyIdYouWantHere"></div>
now in my above code change the alert-line to:
Expand|Select|Wrap|Line Numbers
  1. if ( p[0] == 'price' ) {
  2.     document.getElementById("anyIdYouWantHere").innerHTML = p[1];
  3. }
  4.  
as example for displaying the price in the div.
Jan 22 '10 #10

P: 27
yes excellent works perfectly BUT now what would I change "+" into a space, as the postcode gets posted like NW2+2NH. Also to add more parameters how would I do this

Expand|Select|Wrap|Line Numbers
  1. if ( p[0] == 'price1' ) {
  2.     document.getElementById("anyIdYouWantHere1").innerHTML = p[1];
  3. }
  4. if ( p[0] == 'price2' ) {
  5.     document.getElementById("anyIdYouWantHere2").innerHTML = p[1];
  6. }
  7.  
would I do another if below it like this?
Jan 22 '10 #11

gits
Expert Mod 5K+
P: 5,390
you could use the replace-function:
Expand|Select|Wrap|Line Numbers
  1. 'NW2+2NH'.replace('+', '&nbsp');
this replaces the + with a html-nonBreakingSpace ... for example

and for the second part ... you could use more if -statements or use the switch-statement:
Expand|Select|Wrap|Line Numbers
  1. switch ( p[0] ) {
  2. case 'price':
  3.     // do something for this case
  4.     break;
  5. case 'price1':
  6.     // do something for this case
  7.     break;
  8. }
which looks a bit cleaner
Jan 22 '10 #12

P: 27
Thanks so much for your help it works perfectly just ONE las thing. the replace function, where do I put it exactly so that it does it for all values that would go in divbox 1 2 and 3?
Jan 22 '10 #13

gits
Expert Mod 5K+
P: 5,390
just add it where you need it ... to replace before setting it to the document use it like this:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("id").innerHTML = p[1].replace('+', '&nbsp');
Jan 22 '10 #14

P: 27
Thanks for that, but instead of displaying a space it showed nw2&nbsp2NH but i just changed it to replace '+' with " " and it works fine. Thanks again!
Jan 22 '10 #15

gits
Expert Mod 5K+
P: 5,390
oh ... my bad :) it should have been: &nbsp; ... just forgot the semi-colon. anyway ... good to hear it works now ...
Jan 22 '10 #16

P: 27
Just realised on the previous page "quote3999.html" it auto adds " UK" at the end of each postcode types, and now it shows as nw2 2nh%C2%A0UK could I just do
document.getElementById("id").innerHTML = p[1].replace('%20uk', '&nbsp;');

edit
it now shows the plus again but no more %20uk
Jan 22 '10 #17

gits
Expert Mod 5K+
P: 5,390
you might simply chain it:
Expand|Select|Wrap|Line Numbers
  1. p[1].replace('+', '&nbsp;').replace('%20UK', '');
Jan 22 '10 #18

P: 27
Perfect thanks again
Jan 22 '10 #19

gits
Expert Mod 5K+
P: 5,390
you could even use a regExp like this:
Expand|Select|Wrap|Line Numbers
  1. p[1].replace(/(.+)([+])(.+)(%20UK)/, '$1 $3');
Jan 22 '10 #20

Post your reply

Sign in to post your reply or Sign up for a free account.