I need to be able to (per user response, yea or nay) insert form data into localStorage, so forms will be pre-populated if/when the user returns at a later date.
Instead of taking up a whole lot of individual keys in localStorage (one for first name, one for last name, one for company name, etc.), I was thinking about putting all form values into an object and using JSON stringify to store the data into one localStorage object.
I tried using jQuery.serialize and .serializeArray, but serialize just puts everything into URL parameters, and serializeArray uses index notation, not keys.
So, what is the best way to put form data into an object that uses key/value where the key is the form element NAME (not ID) and the value is that elements value?
Well, Gibson do their own budget line under the Epiphone brand, which have quite a good reputation. The problem with Les Paul style guitars for beginners though is that they’re pretty heavy and they have thick necks… depending on how close you want to get to that sound, a strat-style guitar with humbucking pickups will be more comfortable to play but should still get you into that thicker sounding classic rock territory - perhaps something like a Washburn (I’m a little out of touch with the prices, as it’s been many years since I bought any guitars).
Much appreciated. The weight shouldn’t be an issue; and I’ve got some pretty large paws, so a thicker neck shouldn’t be an issue, either. I’ve heard of Epiphone, and even knew that they were Gibson’s less expensive line, but wasn’t sure how close to a real LP they would sound. I’m thinking of going more for a blues-ish slant (Jimmy Page or early Eric Clapton.) I’ll also look at the Washburn.
Nice, you might want to check into the Tokai Love Rock… it’s a Japanese-made LP clone… not sure what they go for these days but should be cheaper than a Gibson. I bought one 2nd hand (paid about £250 if I remember rightly) and it’s awesome… beautiful build quality and awesome tone… you can definitely get those bluesy Led Zep tones and stuff.
Hmmm, not so cheap after all! Looks like I got a really good deal in that case Still, if you see a 2nd hand one at a good price, definitely give it a look! Sadly mine is packed away in a flight case in my father’s house back in the UK, along with the rest of my collection
Excellent suggestion, @Matthew_Korsmo. They are getting rave reviews, and you’re absolutely spot on about the price.
I was looking at a semi-hollow Epi, and some of their LP mimics. But the Agiles do seem like something not to miss.
Back to topic. @fretburner’s suggestion nailed it. Now, I’m going through and populating text inputs from data stored in localStorage in JSON format, and I’ve got that part working. I am, unfortunately, having some issues trying to get SELECT and SELECT-multiple fields to work with this data. I imagine that radio/checkboxes would be an issue, too. Any suggestions?
I probably should include some code to illustrate.
Okay… I did get the form data to serialize and created a JSON.stringify() string from it, and stored it to a single localStorage variable. (Let’s call that variable “SO”.) So, the value of localStorage.getItem(“SO”) is this JSON representation of all the values in the form elements when the submit button was clicked. Let’s say one of the values in this JSON string is from a select called “saveSOdata”.
Now, if I wanted to populate a text input with the value of “saveSOdata”, I’d get the JSON string from localStorage, parse it, and assign it to a JS variable “SO”. Then, I would loop through all the form elements (var frmElms), use a switch/case to detect the input type, check to make sure that the same name exists in the JSON data, and set the text input value. Assuming that a text input field is named “saveSOdata”.
if(!!localStorage.getItem("SO")){ var SO = JSON.parse(localStorage.getItem("SO")); }
for(ee = 0; ee < frmElms.length; ee++){
switch(frmElms[ee].type){
case "text":
if(!!SO[frmElms[ee].name]){
frmElms[ee].value = SO[frmElms[ee].name];
}
break;
...
}
}
How would one go about selecting a SELECT option based upon the value in the JSON data?
Figured it out. When I first started learning JavaScript, you couldn’t just do document.forms['formname'].selectName.value = 'whatever'. You had to do more like document.forms['formname'].selectName.options[document.forms['formname'].selectName.selectedIndex].value, or some such. (It’s been a while.)
@fretburner, your suggestion is most excellent, unless <select multiple="multiple"> is being used. It’s only providing the last selected value from a multiple select to the JSON data for localStorage. Is there a way to detect what type of element is providing the data inside the .each()?
V/r,
UPDATE: Okay, it’s a bit hackish, but it seems to work.
In the .each() of the serializeArray() function, instead of explicitly setting data[field.name] = field.value; I use var lastName = ""; within the function and then use a conditional to check and see if the field.name === lastName. If it does, then data[field.name] += "," + field.value; if it doesn’t, data[field.name] = field.value; Then I set lastName to equal the current field.name.
This will at least put the values into a comma-delimited list that I can do whatever with.
THEN, when reloading the form page, I have a for loop that contains a switch/case of the form input type. If it’s a multiple select, then I loop through all the options checking the indexOf that value against the list - if the index is greater than -1, set that option selected = "selected".
Hey WolfShade, sorry for taking a while to get back to you. In case you’re interested, I found two libraries that handle saving/restoring form data to localStorage… even if you’d rather write something yourself, it can be worthwhile seeing how others have approached it.
Much appreciated, @fretburner. I’ll check those out in a bit. At least to compare with what I’ve done. JSON definitely make this easier than it could be without.
Still, if you see a 2nd hand one at a good price, definitely give it a look! Sadly mine is packed away in a flight case in my father’s house back in the UK, along with the rest of my collection 
