CODEWITHSUNDEEP
javascriptjqueryhtmlformslocal-storage
Keenan Payne
Keenan Payne

Reputation: 816

Store table data using localstorage and passing it to a form

Right now I am trying to use HTML5's localStorage API to grab a value from a table, and pass that value into a form.

For example, when a user clicks on "Sign Up Today" on this form: http://yft.ac/upcoming-workshops/, I want the information from the given row (Date, Time, Location), as well as the heading above it (ex: YFT Admissions Insights) to be stored, and then displayed in the field "Workshop Interested In" on this page: http://yft.ac/contact-us/.

I'm really not the best with JavaScript but here is what I have so far:

Contact Us:

$('input#workshop').text( localStorage.getItem('workshop') );

Upcoming Workshops Page:

$('body').on('click', 'a.button', function(){
    var index = $(this).parents('table').index('table');
    var cur_workshop = $(this).parents('.innercontent').find('h3').eq(index).text();
    localStorage.setItem('workshop', cur_workshop);
});

I just tried to piece this together so the above code isn't working, but I hope that it is a good jump start for somebody that might be more well-versed in JavaScript.

Upvotes: 0

Views: 2176

Answers (2)

Chris Love
Chris Love

Reputation: 3893

Some quick thoughts. I believe your localStorage code should work.... But I think what might be happening is the browser is loading the contact page before you store the values in localStorage. What you may want to do is remove the hyperlink and bind the click handler to a div, span or just a button element instead. In the click event handler use window.location = "xyz"; after you set the value to localStorage.

Again that may not be the real answer.. but try on a non hyperlink element and see. You can also do e.preventDefault; then store the value then do the window.location thing. That is sort of a progressive enhancement way to do it.

As for the localStorage I would encourage you to try to store the values in a JSON object instead of several items.

localStorage.setItem("workshop", JSON.stringify({'date' : '9/2/2012', 'time': '8:30AM', 'Princeton, NJ'}));

var workshop = JSON.parse(localStorage.getItem("workshop"));

hope this helps!

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You have few problems in the page.

  1. Modernizer library is not included - you are using Modernizr.localstorage in your code
  2. The localStorage.setItem('workshop', cur_workshop); code is added before jQuery library is added to the page - since this code used jQuery move it after inclusion of jQuery
  3. Look like somewhere you/wordpress is calling jQuery.noConflict() - so $ does not refer jQuery anymore so use jQuery instead of $ in your code

Upvotes: 1

Related Questions