Pass info from page to page

[Ian Mac]

Hi all,

I am after a simple method to pass information from a single href link into another page containing form inputs.

In effect, click <here>, where the href calls the new html page but then populates one or more of the form inputs based on what was in the calling href, i.e. if I append pagename.html?Book End

I have tried all sorts and scoured more of the archives than my head can seem to manage.

I am missing something very plain and simple, so I hope that someone can help my aching head.

Thanks all.

Mac

[AdamGundry]

If you use a script like the one here (http://www.agbs.co.uk/scripts/get_extract.html), you can then use Javascript on the form page to populate the input fields based on the JS variables.

Adam

[Ian Mac]

Hi Adam,

God my head must be hurting something rotten today because I can not even get my head around coverting it or using it for a HREF link and then capturing the results within the resultants html page form input.

How much do you want for the job, lol. God my head hurts, I need a holiday.

Mac

[freefall]

I think I've got what you're looking for. First, go to www.hambdenalliance.org/vbs/signup.html You'll see that whatever number the user enters in the input field there populates that many name and age inputs on the following page.
I did this by passing the variable in the URL, as you have noted. The trick is to get it out of the URL in the next page and do something with it.

You've already got something sticking the variable in the URL, so now you need to get it out. Put this on the second page. The first three lines are necessary to translate the URL into a string so you can gnab the variable out of it, otherwise it treats it as an element and gets all confused.

var loc = window.location;
document.forms[0].url.value = loc;
var text = document.forms[0].url.value;

function delineate(str)
{
var left_of = str.indexOf("?") + 1;
var right_of = str.length;

return (str.substring(left_of, right_of));
}

var yourNewVar = delineate(text);

Now all you need is a hidden input field in the page body, like so:
<form><input type=hidden name=url></form>

With this method you can pass as many variables as you want, just figure out how to distinguish them and make a special part of the function for each, I've gotten into things like viewer.html?youth=1&3 w/ all 3 being separate variables
You could separate them with the word spaghetti, as long as you have a function searching for it ;)

Then what you do with your variable is up to you, hope this is what you needed!
~ Ian

[pyro]

Woudn't it be easier to get the query string like this?

text = window.location.search.substr(1);

:p

[freefall]

Well Mac, we just went from 47 lines to 14 to 1, take your pick =D But really, that takes all the adventure out of it! :D

(what are you talking about, 11? :))

[pyro]

11? Mine looks like 1. Maybe 2 or 3 if you need to then populate a formfield...

[Khalid Ali]

Just for the heck of it...:D

Take a look at this link...
http://68.145.35.86/skills/javascripts/DemoForwardFormDataViaURL.html

Allotsa learningmaterial..on this topic.

[Ian Mac]

I went for the solution from Freefall as it seems the most complicated and my head just loves complicated things today haha...

I have go it to work to a certain extent, including prevewing the information within the hidden input as a text input, which contains the full url and the text etc...

Basically my calling URL has just ?product name after the page filename.

Can anyone tell me how to extract the result from the delinimated result and place it into a form input called product maybe...

Also, be interested in how to use this for say to populate 2 separate form inputs, say ?product name&product cost to then go into the product form input and price form input.

This is getting interesting...

Thanks for all the advise and suggestions so far.....

Mac

[Khalid Ali]

Did you try the link I posted above?

[Ian Mac]

Yup, had a look, and when looking at the source code it seemed even more complicated that the one I was trying, with loads of extra features that I dont really need to be honest.

Do you have a cut down version without all the extra :)

Mac

[freefall]

Hey, sorry this took so long, I wasnt thinking clearly when i did the capitalization and I couldnt make it stop capitalizing the 3rd character, so I just made a little detour around that problem.

http://www.loped.net/flamingwaters/test.html?****er%20spaniel%20puppies&250.50

i just used 2 different functions to get the 2 different variables, and added a $ to the cost, now it handles spaces in the product name, and capitalizes after every space.

I'm sure there's a much shorter way of doing this, but it makes sense to me =) I dont know all those methods and stuff well enough to make up a shorter way

~ Ian

[Ian Mac]

Ian, you are the dogs gonads, that was just the ticket.

Excellent bit of code. I will have to see if I can extend it to enable the collection of more than 2 separate sets of info and populate more than 2 inputs.....

Thank you once again for your help and assistance...

Mac

[freefall]

http://www.loped.net/flamingwaters/test.html?loaf%20of%20bread=23.45&JoeBob?large=blonde&male

Well, if you use up 6 variables I'll be worried. You can find other characters that might work on your own, the best would be combinations, such as ??, just do something like this:

function getProduct(str)
// Gets the product name (after the ?)
{
return (str.substring(str.indexOf("??") + 2, str.indexOf("=")));
}

note that you've got to add 2 because the string "??" adds an extra character, the indexOf is from the first character. So technically, you could have an unlimited number or variables, as long as you're willing to make fundtions for them!

The key to this is the lastIndexOf, that looks from the back to the front, so with the normal ?= and &, you can have 6 variables.

Good luck with your project, I'm glad to have helped!
Ian

btw, i never thought i would hear the phrase "the dog's gonads" used as a compliment, and yet i feel deeply honored =)

[jeffmott]

There are common problems to the options listed above. First, the semi-colon is a valid delimiter between name/value pairs. Also, any given name may have multiple values listed (specifically in the case of checkboxes). And there are some other specific problems as well.
Khalid: you unescape the string before processing it. If you include an ampersand in the value for a field (e.g., "hello&world"), the script will break.
Adam: I'm honestly not sure what to think of this. Your result is a ";" delimited string of the values. The values are not unescaped. So really all you end up with is the same query string but with less information for the user (the name for each value is stripped). Also, if a semi-colon appears in one of the values, you give the user no way of differientiating it from the delimiters.
Freefall: no comments for you, I had trouble just following your code. :)

So anyway, this hopefully all boils down to a final solution. If you do discover any bugs, please let me know so it can be fixed.

http://www.webdevfaqs.com/javascript.php#querystring

[Khalid Ali]

Originally posted by jeffmott

Khalid: you unescape the string before processing it. If you include an ampersand in the value for a field (e.g., "hello&world"), the script will break.
Of course it will, but keep in mind pretty much everything is hackable in programming given the determination of a shrewed developer.
ANd as for the resource above,it was not stated anywhere that it was unbreakable,its just a simple proof of concept....

The funny part in all this is that I am responding to your thread after 6 months..lol..damn...

[Jeff Mott]

Of course it will, but keep in mind pretty much everything is hackable in programming given the determination of a shrewed developerThat doesn't mean we shouldn't fix bugs when we find them.

[olerag]

Jeff - I borrowed your code and it works great.

For implementation, I worked it two separate ways:
- Iterate thru the form objects and matched the names
with the contents of the global to derive values, and,
- Iterate thru the global and directly assigned the values
to the corresponding form objects.

1. I think the second way is the most efficient; do you agree?

2. Also, I found no need in using the "param()" function; the
"params()" function resolved both single and multiple value
pairs. Did you include "param()" simply for development
usage or am I not taking something into account?

3. Your "urldec()" ?function? is not coded in a conventional
fashion. Is there any problems with this example? It does
require two minor alterations in the global population code
as the value is now passed into the function.

function urldec(val) {
return(unescape(val.replace(/\+/g, " ")));
}


I hope this sounds like I'm simply asking questions
(intended) and not like criticism as your code works great
and includes the handling of special characters including
?,&,=,space, etc.

New note: Jeff Mott has improved the original code and can
be found at webdevfaqs-querystring (http://www.webdevfaqs.com/javascript.php#querystring).

[Jeff Mott]

I think the second way is the most efficient; do you agree?Technically yes. But in practice you will see no difference in performance. Sometimes it may also be preferred to use the named functions for readability.Also, I found no need in using the "param()" functionIf the user means to retrieve only a single value then using the param function is just less work for them to achieve that by returning a single string value instead of an array.Your "urldec()" ?function? is not coded in a conventional
fashion.It was written to be a method for the String class.

[fredmv]

Originally posted by Jeff Mott
It was written to be a method for the String class. Which is generally better to use. When you prototype methods onto already exsiting (or custom) classes, all objects of that type then inherit that method. For example, you could do something like:String.prototype.removeLastChar = function() { return this.slice(0, -1); }Then you could call it as easily as:"foo".removeLastChar(); // returns "fo"