Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Design and personalized recommendations.Start Your Free Trial Now
- View Offline
- Creating a form
- Uploading images
- Preparing the stage
- Manipulating photos interactively
- Saving photo cards
Skill Level Intermediate
When I wrote a chapter on forms in the very first Dreamweaver Bible, I titled it Interactive Forms, because at the time, when dinosaurs ruled the earth, forms were pretty much the only way users could interact with a webpage. Now, there are many more options. But forms are still critical. In this lesson, I'm going to use the HTML5 technology of local storage to save the selection that a user makes in a form and then retrieve it on another page. So, our form is right here in the center of the page, and there are three radio buttons that we are going to be working with.
Let's head on over to my Code Editor. And here, you see the form starting on line 27. And as I said, there are three radio buttons inside, each have the same name, bgImage, as you can see here on lines 30, 37, and 44, and different values of course. So, let's go up to the top of the page, and right after the jQuery script tag, I'm going to add in some custom code that will control what happens when the user clicks the Submit button.
And I follow the selector with a .click, and in parentheses, function, another set of parentheses, and put e for errors inside of that, and then we'll put our curly braces there, and I am just going to go ahead and close out that parentheses, and end it with a semicolon. So that's all done. Now, let's get to the meat of what we are doing here. First thing I am going to do is prevent the default for the passed in error, or ehandler. This tells the browser to ignore the click, so it doesn't go up to the top of the page.
Now, let's set up a variable to hold the choice of the user, and I am going to call it theChoice. We'll set that to the value of whatever the radio button is that's checked. So, for that, dollar sign and then parentheses, and in the parentheses, I'll do a single quote. And we're looking at the input tag that is of type radio, and has the attribute checked inside of it. And once we find that selector, we want to know its value.
In jQuery, you use the val function. Next, we'll take that value that's stored in the choice, and save it via local storage. So I'll enter in my keyword localStorage.setItem. Make sure you uppercase the I in Item, and then enter the first of our two arguments in parentheses. TheChoice is what we're going to be calling this item that we're storing, just to be consistent there, separate the argument with a comma, and then enter in what's going to go into that stored item.
Now we are going to add in the code that will get the item from localStorage. So again, we'll place it right after the script tag that gets jQuery and enter in our (document).ready function. And now, because we want this to work on load, we are going to go ahead and declare the variable on this page. And we'll set that to $theChoice.
And what we're going to put into that is what we get from localStorage. So after localStorage, it's .getItem. And the only argument you need to put in is the name of the stored item, which is of course theChoice. We're going to let the user know that we recognize their selection. So, I am going to set this variable to a little bit of HTML. This will be just a paragraph tag, and inside it, a little text.
And let's concatenate the variable, and then close out that tag. Now that we've created the string and assigned it to the variable, let's use a little jQuery function to swap out the HTML for where we want it to go. I'll show you that right now. Let me go down just a little bit. Here you see below 'Step 2: Beam up your photo' on line 34, the div with an ID of showChoice.
So, that's what we're going to do, we are going to show them their choice. And back up in my jQyery function on line 12, we'll identify showChoice, make it .html, and then put in the variable $theChoice. Now, my coder's sense is tingling. I realized as I was typing this in, something was a little off when I typed in the other (document).ready function. So, I just want to go back and double-check something.
I'll go to index.php, and yes, there is an extra parenthesis here. So, for all you sharp-eyed people watching this who thought, he's going to miss that mistake, he's going to try it and it's going to fail. Ha ha! I guess not. So, let's save all of our files, and head back to the browser, where I'll click Refresh so we can have all that code in. So let's scroll down. And I think this time I am going to go with Weightlessness as my image.
I'll click Select Background and Proceed. The file is stored in localStorage and then retrieved, and here you see the result for your background, you chose weightless.jpg. And we're on the second page, where the user is ready to proceed.