0

On websites such as eBay, upon returning to a search page, the search options are all filled in. I'd like to do the same with my website, where currently, returning to the search page returns the correct search results but the search form is empty.

The two approaches I've seen to this so far:

  1. Have the form written in HTML, use JS to parse query string and set form values.

How can I pre-populate html form input fields from url parameters?

  1. Generate the form in JS with any values in the query string, this will make a blank form if there's no query string given.

Query String for pre-filling html form field

Both these solutions seem hack-y. I'd imagine that this is a common task, is there a standard or clean method to do this in one or two lines?

There is obviously something that serializes the fields from a form to a query string, there should be a way to use that in reverse to take the query string and fill in the form fields, without having to "roll your own" loop in JS.

Community
  • 1
  • 1
davidtgq
  • 3,780
  • 10
  • 43
  • 80
  • HTTP is a stateless protocol. One way to "remember" things is using sessions/cookies as Derek Pollard suggests. You can do this server side, or client side using HTML5 local storage. Or using GET parameters, like the references you used. You can try to obscure the information in the URL by using some sort of encoding/decoding if you want to keep that information some what hidden. – tpdietz Jan 11 '16 at 20:30
  • If you use server-side language, one way of doing it would be save in session the uri of the current search page (with all get parametres, naturally) for an easy access, later when needed. Prefilling is usually done from those get parameters. – i-- Jan 11 '16 at 20:30
  • Yes, but perhaps I did not write a clear question, I've added something to help explain what exactly I'm looking for. I know it can be done, but the manner in which it's typically done seems very inefficient to me. – davidtgq Jan 11 '16 at 20:33
  • @neoDev I am looking for a solution. – davidtgq Jan 11 '16 at 20:39
  • Using JavaScript. I didn't tag PHP. Please don't delete your previous comments. – davidtgq Jan 11 '16 at 20:46
  • Is too generic to ask sync html, and In my opinion you should do async (AJAX), for your forms I suggest to use jQuery passing json data, and you can store them where you want, for the URL parameters you should be able to do it with "location" and some regex, but all depends what you need to do exactly – neoDev Jan 11 '16 at 21:01

2 Answers2

0

I'd suggest saving the information in a session/cookie and pulling from that to populate the form. That's how it's done on eBay.

Derek Pollard
  • 6,953
  • 6
  • 39
  • 59
  • 1
    But if a user shares the link to a search page, opening that link on a different computer won't show the same thing. – davidtgq Jan 11 '16 at 20:21
  • It will if you are using the `GET` parameters to populate the string form as well. – Derek Pollard Jan 11 '16 at 20:23
  • @DavidTan, it is because that user who followed the link did not come from the search page and has no way of knowing of what that other user searched for. Usually diff users can visit same page after different searches. – i-- Jan 11 '16 at 20:23
0

Just use GET parameters.

http://sample.com/?search=pen&color=blue

Now while building your form elements, just do something like:

$search = isset($_GET['search']) ? $_GET['search'] : '';
$color = isset($_GET['color']) ? $_GET['color'] : '';

echo "<input type='text' value='{$search}' placeholder='Search' />";
echo "<input type='text' value='{$color}' placeholder='Color' />";
dokgu
  • 4,957
  • 3
  • 39
  • 77