Blog Previewer: Getting Values from Form Fields6:06 with Treasure Porth
Use the val() method to retrieve data from an HTML form field.
In the last video, we learned how to use jQuery to get, insert, or 0:00 change plain text or HTML on a webpage. 0:03 But what if we wanna get and do something with information from a user? 0:07 To build this blog previewer, we'll want a user to be able to fill out this form and 0:10 when they click on this preview button, 0:15 display what was entered over here on the right. 0:17 The HTML and text methods can't be used to get information from form inputs 0:21 such as text inputs and text areas. 0:25 So how would we get and preview information from a user? 0:29 We can do this with jQuery's val method. 0:32 Let's go back to app.js. 0:35 Right now, we've got some baked in values for the preview. 0:37 Let's comment out all this code for now. 0:40 So we want all the magic to happen when this PREVIEW button is clicked. 0:45 So let's start by selecting the PREVIEW button and adding an event listener to it. 0:49 If we look at the index.html file, 0:55 we can see that there's a button element with the ID of previewButton. 0:58 Let's head back to app.js and use jQuery to select that element. 1:05 Then we'll use the click method and 1:15 pass in a function that will be called when the user clicks on the button. 1:16 So remember, what we're saying here is when the element with the ID of 1:29 previewButton is clicked, do something here. 1:33 Now let's see how the val method works. 1:36 Everytime the preview button is pressed, 1:40 let's log out the value of the blog title field, which is this field here. 1:42 If we look at index.html again, 1:49 we can see that the title field has an ID of blogTitleInput, so 1:51 let's start by selecting that inside of our click handler. 1:56 Then we'll call the val method on it and 2:07 that will retrieve whatever the user has typed into the field. 2:09 Then we can save it to the variable title. 2:15 Now let’s log out titles so we can see what it gives us. 2:19 I’ll save, go to my browser, refresh, and open up Chrome Dev Tools. 2:26 Into the TITLE field, I'll type This is my title. 2:35 As you can see, everytime the button is pressed, 2:43 we'll return whatever has been typed into this field. 2:45 Great. 2:57 Now we can do the same thing with the blog content field. 2:57 Use the value method to grab the user's input. 3:01 This field, as we can see, has an ID of blogContentInput. 3:04 So let's select that. 3:09 Call the val method on it and save it to a variable called content. 3:12 And let's delete this for now. 3:16 Now we can move these two lines inside of our click function. 3:29 So what we're saying here is that when this button is clicked, get what the user 3:40 has typed into these two fields, the TITLE field and the CONTENT field, and 3:46 set that content to the blogTitlePreview and blogContentPreview elements, 3:51 which are these elements right here in our HTML, this h2 and this div. 3:56 So let's save, go back to the page, refresh, and I'll close this for now. 4:05 And type something into this fields to see if we get the expected behavior. 4:12 Excellent, it's working, we have a blog previewer. 4:26 Now we can copy and paste the code for the flash message into the click handler so 4:32 that the message only displays when the button is clicked. 4:36 Now as you can see, this doesn't quite work. 4:54 And that's because we need to make sure that the message is 4:56 only hidden on page load and only displays when the button is clicked. 4:59 So let's select the message div and hide it outside of the click handler. 5:05 And we can delete this and save and refresh the preview. 5:24 And awesome. 5:41 Our simple blog previewer and our first jQuery program are complete. 5:43 Congratulations. 5:48 You've just built your first jQuery project. 5:49 In the next part of the course, we'll learn much more about jQuery events. 5:53 We'll also learn about more complex jQuery selectors, 5:57 quite a few more jQuery methods and build a fun spoiler revealing application. 6:00 I'll see you there. 6:05
You need to sign up for Treehouse in order to download course files.Sign up