Create Dynamic web Forms with jQuery | Laurence Svekis | Skillshare

Create Dynamic web Forms with jQuery

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (59m)
    • 1. Promojqueryforms

      1:28
    • 2. jQuery and Forms Course Introduction

      3:28
    • 3. HTML CSS Lesson plan

      5:08
    • 4. jQuery Keyup Content match in form field

      8:49
    • 5. Form Select return value on change

      5:35
    • 6. jQuery Event AJAX response from server

      9:09
    • 7. jQuery and radio buttons and check boxes

      10:43
    • 8. jQuery UI autocomplete setup

      7:14
    • 9. jQuery UI autocomplete from Dynamic JSON file

      7:20

About This Class

Create Dynamic web Forms with jQuery
Guide to accessing form content and utilizing the data within jQuery and JavaScript code
jQuery is a great way to add amazing functionality and dynamic effects onto your web pages. jQuery provides great functionality when it comes to forms, and creating forms is an essential skill within web development.

Together with HTML forms jQuery can do so much.

This course will cover how to match two form fields to check if the content is the same which is a useful code snippet to help provide form content vetting.

Use check-boxes to trigger events such as TOS windows and more. Check-box interaction within a form is a much needed piece of functionality.

Learn to make AJAX calls to the server with drop down values, checkboxes and radio buttons triggering events. Dynamic form interaction allows you to provide each user a more customized form experience.

Add jQuery UI auto complete and populate the auto complete with dynamic JSON data. JQuery UI has many pre-built capabilities that are easy to add to your web projects.

By the end of the course you will have the skills and know how to apply jQuery within your website.

I am here to help you learn how to create your own websites and ready to answer any questions you may have.

JavaScript and jQuery are in demand skills, and learning how to use them will help to separate you from the crowd.

Want to know more, what are you waiting for take the first step. Join now to start learning how you too can utilize jQuery within your website today.

Transcripts

1. Promojqueryforms: Jake is a great way to Adam Mayes and functionality and dynamic effects. Ponting Web pages Bakery provides great functionality when it comes to forms and creating forms is essential skills with Web development together with each team Reforms bakery in do so much one of the useful code snippets within this course, we're gonna cover how to do ah, form field check. Make sure the contents are the same. Also, we're gonna be using check boxes as triggers, and they're gonna be useful for when you're building out your form. To create that interaction, learn to make a jocks calls to the server with drop down values. Check boxes radio buttons In order to trigger events within your Web. Dynamic form instruction allows you to provide each user with a customized form experience , then add secret you I to auto complete in populate auto, complete with dynamic Jason Data. J. Curry has many pre built capabilities that are easy to add to your Web projects and add so much functionality by then, of course, you'll have the skills and know how how to apply J coury within your websites. I'm here to help you learn to create websites and ready to answer any questions you may have. JavaScript and J coury are in demand skills and learning how to use them will help separate you from the crowd. Want to know more? What are you waiting for? Take the first step. Joined now and start learning how you too can utilize a query within your web projects today. 2. jQuery and Forms Course Introduction: welcome to J. Curry and working with form Fields course. And within this course, I will be showing you how to do some really amazing things when it comes to forms and Jake weary and all of that amazing interaction that you can create with Shakeri. My name is Lawrence, and I've been a web developer for over 15 years. And one of the things that I've always enjoyed working with his Jake worry it truly amazes me how many wonderful things that you can do with G Query. So one of the things that will be showing you within this course is how to create a password matching field. So I noticed that until the two fields match, then we get this matched here and then the red goes away. We're also going to be looking at how to work with check boxes. So we see that we've got radio changed too. Yes, radio change to know we've got ah prompt here. So whenever we check this off and there's a lot of different scenarios to use this type off source code and of course, the source code is all included as well. And then I can hide and show certain parts of my HTML code. And the interesting thing about this is that we're actually making a man Ajax call to the server and then this is the response coming back from the server. So this is another thing that we're gonna be showing you within the course is how to send some data over to a server via Ajax. Notice we've got no page refresh their and received that data back and output it within our HTML code and then to finish off, we're gonna be looking at G create you. I It's got this really amazing component where we can do an auto complete and we're going to bring this up a notch where we're also gonna be not only auto completing, but we're gonna be loading a random list of names from a P I random user dot Emmy. And as we see here, the names are always changing. And this was just a way to demonstrate that we can use a Jason formatted source file for R A p I data and we see that this is the data that's being returned back from that website and we've got a whole bunch of really interesting data that gets returned back here. And of course, we can use Thies to properly and pre Phil names and information in our drop down. So you see here as we type in that G query is picking up that we've got this interactions been triggered and we're sending over our request via Ajax to the Jason file, pulling that back in and setting those up as objects, usable objects populating in a rate and then completing our auto coat auto complete section where we've got this dropped down and the user can simply start typing a name and get a bunch of options for possible names. So, of course, we do need toe have names that do match in there, and then they could simply select and populate the field with those dropped down names. So all of this, and a whole lot more all of the source code is included within this course. So you're ready to go and begin start making some really amazing code with your G query and your forms. So let's begin 3. HTML CSS Lesson plan: in the next settle lessons, we're gonna be working with forms HTML forms and interacting with those forms and that content within the forms using J query. It's over here. I've got some basic form fields here, so just some regular fields. Eso What we're going to be doing is we're gonna be using Jake Worry to do a comparison match of the content that's placed within one field to the other. We're also going to be accessing Ajax content. Whenever there's any changes on the radio buttons. We're also going to be looking at check boxes and how they work and fit in with Jay Query and also drop down selections. And then we've got a button here that we can click. This is just a hyperlink. And then I've got another field here that says name. So what I want to do with this one is I want to actually put on auto complete, and for that we're gonna be using J cree you I because they do have an auto complete component so that basically, you can do a drop drop down and it gives you a selection option here off what? The possible options are so we're gonna be pulling in some content using Ajax and Jason Data pulling that into this form field for the auto complete, to be able tohave, some content to populate. So we're gonna be doing a lot of different form field actions in regards to J query and how to work with the foreign fields. So we're also gonna be using chrome as our browser and brackets as our editor. And of course, you can select your own favorite editor. And I'm just gonna quickly run through the html CSS code that I've got set up here and then in the next lesson, or get a jump right into working with done this code and working with Jake Worry. So over here, I've just got some basic CSS. So I made some spacing around the dibs. I've set up a class here called one So essentially so I can have my link look more like a button. I've got an output area, so I'm gonna just be using this if I need to output any content. I've got two different text input fields here, and I'm gonna be doing a comparison between the content of these two fields, so p S W a p s w b. So maybe if these were password fields, we want to make sure that the user is typing in a password. And we do a quick comparison just to make sure that the password is filled out the same as it is in the field above. So both fields essentially having the same. I've got another one here on I D for status. So if we have to return back some status because we're gonna have a lot of communication going back and forth. So we need some space here within our Web page in order output all of this information. So maybe I could even update this and probably better serve it as a div because I did apply that spacing around the dips. So it's going to present a little bit better within the Web page and then below it. Here. I've got a form, so I don't have my opening form. I don't have my closing form, but I've got a lot of form elements here. So I've got my radio buttons and I've got a value of yes value of no and basically were by default. We're starting with no checked have got check boxes here. So something where maybe we send some data when it's checked. And also maybe we can hide or show output a note put def whenever it's checked. So this is a couple different demonstrations of functionality you can work in with check boxes that might come in useful when you're developing out forms and then, of course, drop downs. So whenever anything gets selected here from the drop down, we want to initiate some kind of action because we're actually looking for that user interaction and providing a response back using J query and then next over here, I've just got that click button. So this grossest ability to you add an event listener or have a click action and trigger something to happen within our web page. And then lastly, I've got another text field here, and I've just placed the police holder for name here. And this field we're probably going to be using in order to do the drop down for the J Crew au I s O also within the code here. So I'm linking to the J query Cdn. So this is a Google J. Corey library. So we can access that and have it make use of it within our JavaScript. And then finally, we get to the script tags here, and we've got our document ready function ready to go. So whenever the document loads were ready to load and start working with a query and that's a summary of the HTML code and of course this is just for demonstration purposes. And that's what was set up all this html code in order to create this interaction with Jake worry. So the next lesson. Let's jump into it and start working with RJ Query. 4. jQuery Keyup Content match in form field: in this lesson. We're gonna look at how we can match these two password fields. So ultimately, we want the user to be able to come in, type in a password and then type in the password again. And we want to do a check to make sure they match. And then maybe some kind of output here within the status to either say that it's matching or not matching. So let's go ahead and get to R. J Craig code. So we're just going to do it on page here. And the first thing that, of course we should do is make ah hook up and at an event listener for key up. So I'm gonna just look into that I d that we've set up in, which is Password B. And we don't need a listener for the password A. For the first field just because that we're gonna be doing a comparison. So we're going to be assuming that there's some content in there and that the users already filled out their first version of the password and that we're just making a checks would call it validate. And whenever the key up is triggered than we're gonna run our function and the functions going called validate. They were not passing any arguments. And maybe just to just to demonstrate that things are working, we're gonna output some text into that status so into the status I d and we'll input some text in there. So I gotta close off that quote and maybe I just put working for now. And then we're gonna Of course we're gonna update this. So the idea here is that once I start typing into PS WB field, which is just over here the 2nd 1 than it should the status that should change to working. Let's just make sure that this works. So here's our two fields. So in the 1st 1 we can take whatever you want because it's not hooked up. But as soon as I start typing in here, we do see that the status shows up is working. So that is in fact, working. And we can continue building out our code here. So what I want to do is I want to actually pull those values in as variables now, of course, we don't necessarily even need to do this because we could do our comparison on both of the field values. But in order to make it more readable, we're going to just do it this way where we're pulling in that value off P s a W or P S W A pulling in that value and using the variable p S W one to contain that value. So the next one, we're going to the same thing for the next field. So that was P S W B. So use P S W is a short form for password and a and A B to differentiate the two fields. So now we've got the two values in pulled into RJ Query. And now let's just do our comparison because we're firing off this function every time this key is checked. So what we want to do is continuously fire off, do the conditions, make the checks and see if these updated fields are gonna be matching. So we're gonna equal. We're going to check to see if P S W one is equal to P S W two. We're also going to do it by the type a swell and of course it's not 100% necessary, but it's always good practice to make sure that we're validating the type because we do want them to be a full match. So if it's valid, if it's working, then I gotta change working too much matched or something like that. And then, of course, we need a new alternative here so that if PS one does not equal to PS two, then we want status to output no much. So let's check this out and see how this works out. So let's type in test and then not a match, not match, and then assumes we do match the two fields we see matched. So this could be something where maybe we could highlight it and read or something like that in order to you, uh, tell the user that they have to keep typing. So of course we could go in and we could add styling around it if it's not matched so we can do something like and then, of course, we're gonna have to toggle that and remove that once it does much. So maybe not the status. But maybe we could select that first. Or we could actually put a class on there as well and highlight the class and removed that so many that's gonna be the best wrote to go. So I'm gonna add that class in. Yeah, I was gonna call it Match Field. Essentially, that's what we're going to be using it for whenever we're matching. And let's do it to the 2nd 1 here. So P s w b. And we're gonna use the method toggle plus And maybe we should do something like highlights . So I actually gonna add in another class here, and I'm gonna use I believe we called a match field eso for highlight and take this one, Copy it and apply some kind of styling here so we can do something like a background color and do you read? So take a look and we'll see what happens now. So now until we have our match, we're going to see that it turns out red, but are not, in fact, removing it. So what we're doing is when we toggle it, we're not. So it's not exactly working perfectly with the toggle. So maybe the toggle might not be the best one, and we should just maybe stick to adding and removing the class in order to make sure that we're doing it at the right time. So that's the thing with the toggle, because we're toggle ing it on and off. So sometimes it's not the best approach. So maybe what I'll do is I'll just add class and then over here once were matched. Then we remove class and what this will do is if that classes there, that will remove it. And if it's not, then I'll just add it in. So now we're going to continue to add that class until we match it. And then as soon as we don't have a match, we get that highlighted color. And of course, there's a lot of different things that you can add in a lot of different functionality. But essentially, it's important to remember out of this lesson that once we hit the match, once we've got the key up, here s so this is the first thing that we're looking at and whenever there's any kind of key up action within this field, then we're gonna trigger this function to fire off and within the function. We just do a quick check here and this function can contain whatever you want to contain. and it just run through the functionality using J Query to match with what logic we want to apply to that field. We have some really exciting stuff coming up. And, of course, with Jake Worry. Everything is always really interesting. And it's just amazing how much effects you can create with just a little bit of code in J query. So I'm gonna be showing you even mawr really cool things you can do with your forms when it comes to J Query. And then also, we're gonna be looking at Jaker you I a little bit so that's all coming up in the next settle lessons. 5. Form Select return value on change: in this lesson. We're going to focus on the check boxes and has dropped down. So if we want something to happen, whenever we're doing the drop down and a new selection is made or if the check box is checked off and typically you might want to see if you've got ah website here and you want someone to agree to the terms and conditions, maybe you don't want them to be able to continue with the form until they've agreed to it or if you want them to read through something. Or maybe you just want to hide part of your form once they've completed it with a check box . Maybe it's not relevant to them a lot of different options and within this lesson. So we're gonna look through how we can trigger these as events and then, of course, fire off some kind of actual interactive JavaScript for it or Jake worry for it. So let's open up our editor and start making these connections here. The first thing that we want to do is we want it. Maybe maybe will focus on the selection, the select elements, and we noticed that we've got two options here. So maybe I can add in a few more options just to make it a little bit more interesting. That should still be too. They're so this 13 this 14 and four and three and just realign those beautify those s O that it's more readable, more presentable. Eso First thing I want to do is make my selection of those and notice I don't have an i d here. So of course I could add in an I. D. And I could make the selection there. But I think what I'm gonna do is I'm gonna start with the parent, the my form, and I'm gonna select the select element within the my for So just to make things a little bit different. So my form and select, of course, I need to spell select properly there, and we're gonna listen for a change on it. And this is another event handler, JavaScript, which will trigger somethingto happen once this event once this event is actually selected within our court. So maybe what we want to do for now is maybe what we're gonna do, we can work with this output content here and maybe output something within that content. So whenever it's selected, we'll do on output and we'll output some text and we'll do select it. So also were a console log something here. So I'm gonna console, log out some information about the selection, so we're gonna console log and the entire object. So save that and going to a browser and we'll see what happens now. So whenever we make our selection and we should inspect our element, just open that up in our consul and see what's going on here. It's not actually firing off, So let's take a closer look at our code and figure out better. Why? This is not firing off. And if we notice here that I forgot that hash there, So let's try this again and see what's happening. So when I do make the changes, we see that we've got selected and we've got the information that we selected there. So select. We've got all the different options and so on. So what it's doing is it's returning back that entire selection so it doesn't matter which one we select were returning back that its tire selected piece of content what we need to do is select the selected value. So just to v A. L to return back the value, we'll see what shows up now. So refreshing it. We see that we get the selected value. And of course, we could even have put that within our selection over there just to complete the loop. So it take this value and or maybe we'll just add that one to select it so that we know that what we've selected and of course, this will now change. Every time I make a selection I see selected and the value that's been selected, let's say you work with the drop down, the selection drop down. And just like the previous example, once we've triggered off this event, whatever we do within here, this is up to us. Whatever. Whatever code we want to return, whatever response we want to send back and whatever functionality we want to build in, we just build that in within, within this block, a code here. So the next lesson we're gonna be looking at in a little bit more detail check boxes and how to work with check boxes, and we're also going to be adding in some really cool functionality within J query. So that's all coming up in the next lesson. 6. jQuery Event AJAX response from server: in the previous lessons we've looked at how to add some event listeners to our form within J quit using J query. So this lesson I want to dive deeper into what we can do whenever we have got some interaction on our forms, and I want to make it a little bit more interesting. So I had a question before about Well, I wanna have form interaction, but I want to make an Ajax call within that form in traction. So what I've done is I've set up a PHP file. It's a really basic constrict for it. It just called it Ajax dot PHP And all this is going to do is pick up whatever data is being posted and essentially send that back. So whatever data we've got, we're posting as name. It's going to return that back as the response text or the output text within the Ajax dot PHP And then we use Ajax in RG Query in order to pick that up. And, of course, Ajax is one of the best things. But almost favorite things about J Query is because it just makes it so simple and easy to use. So here we've got our form. So let's odd in the first event listener on the my clicker element. So I'm gonna move some of this code down and this was from the last lesson. And let's take a look at my clicker. So how do we add in an event listener and a new event listener listening for click? And of course, we do need to include that hash there. So on my clicker how we're gonna add in that event listener So we add in, click and then we have a function here. And maybe what we want to do is instead of having the function here, we're gonna create a separate function that's going to do the Ajax call. But we also want to remove. I would that that default here because if you notice that my clicker is a hyperlink, so we need to add in that remove the preventing of the default as well. That's one of the things that we gotta be cautious of here because I don't want that actually going to another page. So let's build that in first and we'll just do the e prevent default and this will remove out that default where hyperlink goes to a new page and then maybe from here we can just simply call over to another function. And then that function will be the one that actually does the Ajax call. Let's set up a brand new function and what we're going to call this function? Maybe we just call it my Ajax and Passover. Some arguments, Passover data so that we have something to work with their and then from here will call over to the my Ajax function. And of course, we're gonna have to do some updates to this S O for right now, we're just gonna call over that function and I'll show you what happens now and then we'll build up for it s Oh, maybe what I want to do is set up some new data there. It's a new data object and have some contents in there because in the PHP, we're expecting to be passed a value a posted value of name. That's what we're gonna do. Set that up here and then maybe what we want to do is Passover data as the name or something like that. So for now, let's just take the name out of this text area, and I'm gonna put a default here of test. So we take the value from my A and of course, we're gonna probably have to do some updates to this, but this was just to demonstrate, get it working, and then we'll make some updates to it. So we're gonna take the value from there, so v a l to pick up the value. So now new data is going to contain and send over the value from that field that we're working with. And now, of course, we set up our Ajax call. It's gonna be really easy to send this. So first thing that we need within Ajax is we need to identify the URL that we're sending it to. So that's Ajax PHP comma separated. So almost closed that off. Their specify the tight, which is going to be post and again, this has to be quartered around comma separated data and we're passing that new data variable and on success. We're going to maybe run a function here, and I can actually change this to, uh maybe just a for now, and we'll see how we're gonna work with that because I wanted to use data in the response back from the server. An ex you are. So we get all of that information back. We can take a closer look at that. So console log and we'll do S h r and pull back that response text. So console logged out, out, and then maybe also place it within the output field so that we can actually see that being pulled back and to do this one in html. So, like, Teoh change things up around a little bit sometimes. So response text. And then maybe we can also have something If we've got some errors coming through and to function, and we're gonna pass back all of those values in that scene variables And this one, maybe we'll just console log that X hrs with console. Log out that whole object so we can take a closer look at it. If we do throw some errors, so let's see what happens. So do you think this that this is gonna work? We're gonna pick up the value from my test A. Whenever we click the my clicker button and try to send that over to the server, pick it up in the server and post it a value sent this and return that back into our Web page. Let's take a look at this. And of course, we've got an air. Their line 66. So I did put that in there by mistake. So didn't we? Don't need to close that off, because that's an object. So see what happens. So we did the full turnaround. We sent over, test sent it to the server. And this is that server response. And then, of course, we can work with that and we can update it as needed. So I've got all of this functionality working and ready to go, eh? So what happens now if we want to actually pass some information? So if want to go back, maybe two that dropped down Passover, That and past that to the server. Eso We could do that. And it's really easy to do that because we've got this function set up so we can if we need it. If need be, we can send over a value within that function and instead of the using, this is the value we can send the argument that gets sent there. So let's just switch things up a little bit here. And also I want to run that function that my Ajax function. So whenever we do a change that we're going to change or send the value over, let's see how this works out. So believe we still have that one hooked up. So we see that sent this. My option two is doing a round trip going back to the server being returned back. And then this one here, doing the same thing round trip to the server, returning back that response information. So just like what we've done here with the click the option that drop down options, we can also work in that Ajax call with other check me buttons and radio buttons. And also, we can do a whole lot more. So all of this is coming up in the next set of lessons s Oh, this is gonna be really interesting things that we're gonna be able to do with Jay Query. And we're also gonna be looking at GE cree you Why as well, So that's all coming up 7. jQuery and radio buttons and check boxes: in this lesson. We're gonna look at check boxes and radio buttons and how you use them alongside Jay Query and how to make them functional. So here we've got some checked boxes and what we want to do. Ultimately, maybe we want to listen to this. So we're gonna look at the check boxes first and then the reader buttons. So maybe when we check me, we want to have a little prompt show up. Ah, and just to confirm that the users making their choice. So maybe that Check me if it was delete or delete something. We wanna have a prompt show up, and this is gonna be really easy to do within J query. So first thing that we want to do is, of course, hook up our event listeners. So I got to do it using the on event listener. So I'm gonna do so. It's the same thing as this is just different ways to write it. And preferably you load your event. Listeners need more than one event, Lister. If you need to remove your event listeners, this is the preferable way to do. It s Oh, I'm just looking at the name the i d. So it's my check one. That's the one that we're gonna add that that listener too. So that's my check one. And the event listener is gonna be touching the event handler to the element and we're gonna be listening for change. And then once that change takes place, they were going to fire off our function here. Somebody at first we can just console, log out the contents. Eso 1st 1 we're just gonna console log got out. And also maybe down here at the bottom will update that output areas that favorite output area where we've got some output of html. Let just so that we know that actually, something has happened, checked, keep it really simple. So and of course, we've got that information that's gonna show up in the console. So once we check it, we see we get checked and we returned back that object information. And of course, we can work with that and utilize that energy query as well. So I want to add in a little pop up box that's gonna just just gonna ask me to confirm if if where, if we want o make this check and it's over here. What I need to do is I need to confirm that it's actually checked off because I don't want to fire off if the if it's not checked off. So I want to make sure that the property is checked or not Checker, but it's actually checked. And if it is checked, then we're gonna fire off this. So once that condition is met, well, maybe set up a variable just to see if the user shirt and fire off confirmed. So do something like that. So this is gonna do the this is setting up our prompt and we'll do it this checked. And if this is checked, then it's gonna equal to sure. So let's take a quick look and see how all of this is gonna fit together. So refresh it. And whenever we check it Now, we get this prompt some we have to hit okay to continue, so we check it. And if we cancel the notice that the check mark was away so it doesn't actually complete the check. So that's how you add maybe, like a double check, or to make sure that you've got that the users you got the user's attention that you want to make sure that they are in fact wanting to check that off. Eso Let's look at this other check box and let's make something happen with that. And so what I want to do. Maybe I want to just hide and show that output or I want to hide and show a section. So it's open up our editor again, and I want to really highlight that output area. So I'm going to give it background color. So maybe something that really stands out, uh, give it, give it a border as well. Or maybe I could even go to picks or something like that and pouting around it. Let's see what happens now. So save that. Refresh it because I really want this to show up and want to be really noticeable here. Eso going back into our code and this is gonna be really simple. So it's just going to be a few lines of code. So the first thing I want to do, of course, is add my event listener so I can add it on change. I can add it on click eso. Either one will fire off and just to show you that it's still gonna fire off. But I ultimately what I want to do is I don't want it just to fire off every time it's clicked. I want it to fire off every time that button is actually changing. So that's why I'm gonna use on change and again to stir things up even more. I'll give you some more options of what we can do with the on check. So we're gonna instead of doing it, this format, we're gonna do it within this this way. So just do the on click function within this. And of course, if you're using older browsers, you might want to try to avoid this type of format. But both of them will work within chrome. So either way, And then, of course, if you're hiding in event listeners dynamically, usually that this is the best way to go. But there are variations that you can do as well. So console log. And so actually, I should change this to change because we've already talked about Click. So So whenever this changes, then we're gonna make sure and do that double check to see if it's checked and if it's checked off than what we're gonna do is make a selection off output. And we're gonna do that built in show method and out in and else here and do the exact opposite here. So if it's unchecked than what we're gonna do is simply hide it and just beautify it, make it a little bit more reason readable. So let's see how this works out. So now we can hide it. We can show that output section simply by check of a button or check of a check box. And for the radios as well. You should use the change instead of the click because we want it on Leigh to fire off whenever there's an actual change of value. There s o just to show you that one really quickly as well. And with the radio buttons, I we haven't given them any i d s s. So we're gonna use it. We're gonna make a selection of that using the parent, And I believe the parents is my form, and we're gonna look for input radio and on change fire off this function. And maybe for now, what we want to do is just update something in that output. So just do radio changed. So the school back cute and refresh it. So now every time thes change would see that radio has changed. So also may be what you want to do is actually get the value of yes and no. So that's really easy to do as well. So we can simply radio changed to and add that value in their on. And then, of course, we can get the value of the active element just by doing using this. So I'm gonna select this and select active value of it. So let's just see if this works and radio changed too. Yes, radio change to know. So now we've got all of her functionality in there, and of course we can do. We can attach those Ajax calls just as easily to any one of these. A swell as we've done before. So if I want to attach that Ajax call, I could obviously put the jacks coal in there as well. But let's just do it this way. Where, and I have a variable for results, so I have to keep typing that out and update that to result as well So, actually, I think we're already out putting their in that call. So we're gonna actually output two outputs there. So maybe we can hijack status instead. So update the status. So we see that now we've done the full trip there. Round trip. We've updated status sent this radio changed too. Yes. And of course, same thing. If you want to add it into those check boxes, select boxes all the same, we can just really easily add that Ajax call it. So in the next lesson, we're gonna look at J coury, you wise. That's the one that we've been all waiting for. And this is gonna be really interesting lesson, and that's coming up next. 8. jQuery UI autocomplete setup: in this lesson. I want to take a look at the J coury. You I and just going through this, I realize I don't really use Jake Ray you I as much as I should, because it's really cool. It gives you the ability of all these right of the box, built in features weaken, do accordion, auto, complete button date picker, Progress bar and just a whole bunch of really cool stuff. So in this lesson, we're gonna be looking at auto complete and essentially, what auto complete does is just as the name implies. Once you start typing, it will look for some results that match what you're typing. This is built in and it allows you to quickly populate a list of values. And this is really neat functionality. And as I said, I just Sometimes I wish I would use Jake rate you I'm or because it's got so many amazing pieces of functionality that are just built right out the box. So in order to access Jake Ray, you, I we're gonna add in first. We're just we're going over to Google here on picking up their shared libraries, and I'm gonna grab this one for J coury you I So it comes with CSS because we do wanna have that styling there. And of course, you can style it yourself a swell. So I'm just gonna add that one in and go back it here and add the G query. You I as well, So I usually like to put the J Corey first and then the J Coury U Y library. And then so this gives me full access to both of them. And now I can start using and utilizing the J coury you I and one of the things that I do need for an auto complete is actually need some data. I could obviously I could create an array here, So they've got a really good example here where they create an array of available tags on, and then they just simply use those tags, plug it into the widget here, and it puts them as tags. So we're gonna take this one step further and make our available tags pulled from random user dot Emmy. And just to show you what this website does, is it essentially gives us eso. It's random user Emmy. But this is the A p I, which gives us a list of just some random users. It's a really neat website, especially when you're developing a practicing code. We see that we can get these random users on the fly. And again, it's really useful when you're making development so that you don't have to go through all the trouble of actually creating users creating Jason files and data. So we're just gonna parse through this and pick out what we need to pick up the user names . So maybe we'll go with the results of 50. So let's get started. And what I want to do is I want to work off of this field here. So this test field, what I want to happen is have a drop down, start filling out that data and then actually have that drop down list suggest additional names. And then, of course, every time I reload that a p I on again different list of names. So this is again for demonstration purposes. They probably won't want tohave a shifting drop down. Maybe you do, but this is what we're gonna work with within this example, because we're gonna have a random ever changing lists every time I refresh it, we got a new list, so I just want to make you aware of that. And that's why we're gonna have a differentiating list as we go through. So what I want to do is open up and add in. Maybe we can actually add in a completely separate field here s so that we're not interfering with what we've done before. So set up DIV class and I'm gonna give it you I which it because I'm using the J query CSS as well. And I'm gonna do it similar to what they've done, where I've got my label for And I got a call that field searcher search me and close off that label and now set up my input and all I need to do is give it an I. D. So we've already identified it that we're gonna call it search or their within the labels were just going to stick with that. And there we go. So that gives us that field toe work with. And now when we start typing into the field, we're gonna try to auto complete that. So we're gonna set up a variable. So this variable is where we're gonna hold our values. So maybe we're just gonna set up an array, and so I'm gonna put within that array a B c so that we just have some starting data just to make sure that everything is working properly. So just do something like that. And now we're gonna make that magic happen. Was J coury you I so attached to search her, and we're gonna put auto complete and our source so this is gonna be the source of the data . So we're using this, uh, this array here and then we've got some options here. So So if we want multiple options, multiple drop downs, multiple items and must match, we can also do a match on the case. We're gonna do a false on that because we don't really have a lot of details there. So let's see what happens now, So I'm gonna refresh it. And so now we get our drop down there. So this is working s o. Now all we need to do and like I said, it's just it's the salamis and you get all of this functionality right out of the box. Essentially what? I've done here is I've set up my available tags array and I've set up auto complete. And then I just hooked that up. Man's. Make sure that my tags match there and that's all we have to do to Teoh. Get that auto complete working. But I do want to take this one step further because I want to add in this array that we can use off of the Ajax call. Because I did want to focus a lot on Ajax within this, of course. So I did want to bring that in, so I'm gonna show you how to do that in the upcoming lesson. 9. jQuery UI autocomplete from Dynamic JSON file: taking what we've learned in the previous lessons, I want apply that to what we're gonna do right now. So in the last lesson we looked at how geek where you why works how easily we can add an auto complete. And now we're just gonna enhance that by making our array here dynamically changed. So by default, we've set up a really basic arrayed, so I don't have a lot of data, but I want to be able to pull in that full list of random user names and utilize those and actually push those into my ar e. So let's check this out and see how this is gonna work. So one of the things that they need toe attach is an event listener to search her. So this is what I'm gonna do. I'm gonna do the searcher, and I'm gonna use that key up because I want Once somebody has actually made some change, they've lifted their finger off the key and the key has popped itself back up. This is when I run and run. This function is this is my optimum time to run that function, and I need to actually pick up the value that's gonna be within within that result. So I'm gonna I can put it in as search text, and I'm just gonna place this here, but we might not. I'm just thinking about this right now that we might not need to utilize this because the actually the auto complete is taking care of a lot of this. But if we're to build out our own auto complete, if we're searching a database and we definitely would need to pick up that search text and utilize it So if you're not using the auto complete, then you probably need to set up that value. And I'm not sure I don't I don't believe we're gonna have to set that up right now, So I'm gonna continue along and reset the value off the array and I set set it to a length of zero. And then this is where we bring in Ajax and Ajax in J. Query is just so simple and easy to use. So first thing that we need to do is set up. Are you Earl? So it's pop it into our browser, and this is the girl that we're gonna be using. So, pop back in and add that into here into this object and our data type. So that's Jason data type. So I need to specify that that we're expecting Jason Data and on success. So our success function here, it's gonna pull back all of that data, and now we just need to utilize it. So let's do a quick console log out of the data just to make sure that we are picking everything up and that we are able to utilize it. So see what happens now going to here. And now when I start typing in here, we're making ah query into that random user Emmy. And we've got this object array of 50 different objects and we've got all of these names here. So we've got first names and last names. So maybe the one that we're gonna look at now is we're gonna look at the first name and try to auto populate it. So if I was typing in T that I should see, Tammy and I should see a full list of possible names that I want to use dropping down there . Let's go back into our code and actually going to get rid of a lot of this other stuff because we actually don't need it anymore. Maybe keep that. Could put just in case there and continue to build this out. So let's take a look at the success here. So now we've got on object Enough's work through each and every single result there. So just do data and results. So we pull back all of the results there that are being returned from our Ajax call and what's gonna do a function here. So we've got our key. We've got our value and we need to push it into our array. So we've just zeroed out our food or rain. Eso need to push some values in there. So v name first and what this is going to do is this gonna loop through all of those objects and populate eight our array with all of the first names. And just to show you what's happened here, we're gonna actually Will Consul logged out. It's so once we finish building up that worry Consul logged it. We could take a look out in the console as well. So it's the refresh that. And now when I start typing, I see that I get this full list of names that I have access to This is essentially our new rate. And I could really easily make some changes here just through the drop down. And as I said before, this is Ah, random Marie. So you might not necessarily having a random Marie that you're working with. So every time I make key up here, we're gonna query and we're going to get a brand new array of names, so I don't think anything. They're starting with the Q assistance, Got A's in it. And of course we cannot. We can really customize this as needed within our code s Oh, this is again pulling in from a random random user array and just giving us a full list of all of these names of all of 50 names. We're dropping them into Honore and then just using that within J coury auto complete you I That's how we're able to create on auto complete. And of course, every time we reload it, we load a new set of user names, and then we could just simply select and make our selection from the drop down, and that automatically populates that field the possibilities for something like this. There's a lot of different things you can do as you work out with this and really auto complete G. Koury. Why are a lot of really great built in functionality and then turning it in and bring it on a rate Ajax called into that eso that really makes our form really dynamic and populating. So I do encourage you to take a look at this. And of course, you may or may not be using utilising the assets within that same format where you're using Ajax calls. You might have something that's hard coded or an array that you pick up from your server. Eso again. Depending on what your scenario is, you could apply different types of logic and get some really interesting results when it comes to your forms and G quarry.