Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating the form

From: HTML5 Projects: Customized Photo Cards

Video: Creating the form

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.

Creating the form

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.

So let's enter in our script tag, and I'll set the type="text/JavaScript", make a little space, and put in my opening jQuery function. You don't really have to use jQuery to do this, but it does make life much, much easier. So, the first thing after I've set up my (document).ready function is to put in a click function that will look for the Submit button, which has an ID of Submit.

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.

And of course it's going to be the variable we just created, also called theChoice. Finally, once that's all done, we are going to move to the next page. So, for that, we'll use a basic JavaScript function called window.location. And I'll set that to my next page, which is beam-up.php. All right. That's all I need for this particular function. So cool! We've stored the user's choice and we've opened up the next page in the app. Let's go to that page. I am going to go to my Chapter 2 > 02_01 folder, and open up beam-up.php.

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.

Show transcript

This video is part of

Image for HTML5 Projects: Customized Photo Cards
HTML5 Projects: Customized Photo Cards

12 video lessons · 4898 viewers

Joseph Lowery
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5 Projects: Customized Photo Cards.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.