0

I have a 2 steps form for sign up users.

Now I want when the users one time complete the first steps for next time the first step isn't show .

TNQ

unbl0ck3r
  • 371
  • 4
  • 16
  • 3
    Check out localStorage https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage – Christopher Marshall Jun 25 '15 at 17:56
  • See also: http://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookie –  Jun 25 '15 at 18:07
  • FWIW: There is a nice JS plugin called [Basil.js](https://github.com/Wisembly/basil.js/tree/master) that allows you to store persistant data. It will take care of storing it in cookies, sessionStorage or localStorage based on the user's browser capabilities. And it's easy to use. – blex Jun 25 '15 at 18:07

1 Answers1

-1

You can use a hidden input field (tutorial on input fields) or a hidden label or data attributes (tutorial on data attributes).

Sample code:

var id = 1; // the ID I want to keep among steps
$("#myHiddenField").val(id);
...
// at step 2, for example
var idStep1 = $("#myHiddenField").val();

These value will be stored in the HTML so if the page is refreshed you'll lose the data. If you want to keep it even after a refresh and you don't want to use cookies, you can save the values in the URL (you can read more about this in tutorial on url hash).

Example of hash on URL:

  1. Step 1: www.mysite.com
  2. Click next on step 1.

  3. a) Step 1 is not visible anymore.

    b) Step 2 is visible.

    c) URL is updated, appending extra information like an ID (www.mysite.com#step2?id=1)

Community
  • 1
  • 1
Francisco Goldenstein
  • 13,299
  • 7
  • 58
  • 74
  • 3
    @unbl0ck3r Just in case you don't know this, this method will store the data in the HTML, but if the page is reloaded / changed, that info will be lost (it's equivalent -and less convenient- to using a simple variable). If you want persistant information, use localStorage. – blex Jun 25 '15 at 17:59
  • localStorage depends on HMLT5 and you don't know the target users. You can combine HTML hidden input fields or data attributes with URL parameters. – Francisco Goldenstein Jun 25 '15 at 18:00
  • @FranciscoGoldenstein can you give me a sample code? – unbl0ck3r Jun 25 '15 at 18:07
  • 1
    This answer is just wrong, you're not actually storing anything. You're just manipulating DOM within the current document. The correct answer is [The Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) –  Jun 25 '15 at 18:09
  • You are storing the values in the URL and the DOM. Using AJAX you can save data in the DB after step 1 is completed but he's only asking about client side persistance. A solution is good depending on constraints and you don't know all the constraints nor do I. This is valid solution that could be applied in this scenario, I'm not saying it's the perfect solution for all the cases. – Francisco Goldenstein Jun 25 '15 at 18:11