0

I want to create a web page with selections then when a user inputs their selections I would like an output of a code (or even better a unique url) which can be copy-pasted to forums, e-mailed etc... Allowing their friends to click the link and retrieve the input selections associated with that link.

A code would be fine where a link + a code that is copy/pasted into a text box then generated the shared entries.

So for instance I have several drop down boxes:

A drop down with 50 states, a drop down with gender, a drop down with ages 1-100, a drop down with number of kids.

An end-user comes and selects whatever choices they want and the page produces the link or code allowing future end-users to either click the link (preferable) or paste the code into a text box which then selects all the appropriate selections wishing to be shared. This allows the second user to view exactly what the first user wanted to share with a simple short link/code.

I am stuck and I know I don't have to create a unique webpage for each possibility but I'm not sure how to approach.

How do I save the first users selections, then generate a unique code/link, and finally display the first users selections for a subsequent user?

Faugaun
  • 33
  • 7
  • Thanks to the solutions so far I am reading and exploring them further and hope to get a working solution. – Faugaun Apr 25 '15 at 18:21
  • Both solutions were helpful in the end I checked the one that allowed me to immediately gain the functionality (albeit with a long URL), and down the road when I can learn more I plan to shift to the database structure. Many thanks to both hollie3406 and Charlie Wynn. – Faugaun May 21 '15 at 00:35

2 Answers2

0

What you probably want are url parameters..

Here's a function that uses regex to grab a param from the url

function gup( name ){
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");  
  var regexS = "[\\?&]"+name+"=([^&#]*)";  
  var regex = new RegExp( regexS );  
  var results = regex.exec( window.location.href ); 
   if( results == null )    return "";  
  else    return results[1];
}

I wouldn't sweat what's going on in there.. but to use it you'ld have a url (mysite.com/coolPage) if they go there with a parameter (mysite.com/coolPage?whosCool=ImCool)

you can, in your javascript call gup("whosCool") and it'll return "ImCool"

in your example, you'ld have mySite.com?state=oklahoma&gender=male

in your javascript you can, on load:

document.getElementById('state').value = gup('state');​​​​​​​​​​
document.getElementById('gender').value = gup('gender');​​​​​​​​​​

to build the url, when they make all of their selections you'll build the url with the parameters.

var url = "mycoolSite.com/mypage?";
url += "state=" + document.getElementById('state').value;
url += "gender=" + document.getElementById('gender').value;

document.getElementById('outputURL').innerHTML = "<a href='"+url+"'>Your url</a>";

That's the pieces, you'll have to build it all together though

Charlie Wynn
  • 921
  • 1
  • 8
  • 22
  • Thanks this looks really promising. I am looking into it for my situation. – Faugaun Apr 25 '15 at 18:23
  • 1
    I went with this solution for the time being but I plan to eventually transition over to a database style like hollie3406 suggests. I wanted to get something functional for now till I can sit down and learn database structures and PHP (probably still a few months away). – Faugaun May 21 '15 at 00:31
0

I can think of two ways to do this:

  1. Unique database id which stores all the information for that user and is generated when they generate the link.

  2. A much longer url with all the options stored as parameters on the end.

Database solution

When the user clicks to generate the link I'd take all the information gathered from the page, and push it through in a form for processing. I'd then store all the information in a database with a unique id and pass that id back to the user, storing it as a parameter in the url that is in the generated link.

When the user clicks the link the first thing you could do on page load is to query the id parameter and display all the database fields that have been previously stored.

Depending on whether you have any PHP knowledge, you might find these links useful:

https://gist.github.com/webaware/4048580

http://www.dynamicdrive.com/forums/showthread.php?45895-How-to-populate-php-html-form-with-MySQL-data

URL parameters solution

I'd again gather all the information from the page and push it through in a form before building a link with the parameters listed out. So www.tester.com?gender=female etc.

When the user clicks the link the first thing you could do on page load is to pull the parameters from the link and display them against the appropriate inputs.

This might get you off the ground with the basics for doing this with javascript.

Pre-fill form field via URL in html

Get the info from the form: How to save data from a form with HTML5 Local Storage?

This one will be particularly helpful to you: How can I pre-populate html form input fields from url parameters?

This second option is definitely messier and I'd probably go with the first option myself.

Hopefully they both make sense - any questions then just ask!

Community
  • 1
  • 1
hlh3406
  • 1,382
  • 5
  • 29
  • 46
  • Thanks, I do not have any php experience but do not mind learning something new if it helps with future projects. I am examining these options. It seems that the advantage of the database approach is that it results in much shorter URL? I think if I went a database route it could potentially see a million entries in a few years, would that cause a major slowdown? The URL parameters route, I am looking at about 40 parameters on a single page so even shortening the ids xx=yyy&xx=yyy&... results in lengthy URLs. I'm using tables if that makes any difference? – Faugaun Apr 25 '15 at 18:42
  • Hi, yes I wouldn't recommend going down the URL parameters route, that would cause a really lengthy url! Going down the database route doesn't necessarily mean slow down on a large number of entries. It's all dependent on more factors that just number of rows. If you check this post out it might help you: http://stackoverflow.com/questions/3779088/database-that-can-handle-500-millions-rows – hlh3406 Apr 27 '15 at 07:38
  • hollie3406 I am planning to use the database solution down the road, but due to my lack of familiarity with databases and PHP I have gone with the other solution in the short term to get a functional system. I wish I could give you both check marks because you both deserve one. – Faugaun May 21 '15 at 00:33