jQuery Tutorials: Submitting a Form with AJAX

okay so in this video what we're going to be doing is we're going to be submitting a HTML form with Ajax so we're going to be using the jQuery AJAX library to submit this obviously without refreshing the page but what we're also going to be doing is we're going to be careful as to create this so it's entirely flexible so that you can quickly implement it elsewhere you want to build the same functionality for each form you use on a website we also need to bear in mind accessibility what happens if the user has javascript disabled in that case we want to submit the form anyway so we're going to be able to form as we would normally submit it but then we're gonna let Ajax or our Ajax functionality handle the submission for users that can and obviously we're going to keep our form semantics and everything like that so this is how the form looks at the moment let's just go ahead and fill some details in here so let's go ahead and put our my name in my email address and a quick message I'm going to go ahead and hit Send now that has sent this data to a PHP file without us actually seeing anything and you can see here I've logged to the console what we've got back and that's just a print art in PHP so you can see at the moment I've gone array of data which is the name email and message this is actually printing out the post global variable so this here so this is what we're going to be doing in the video so we'll start from scratch build up the form and then build up our JavaScript functionality okay so basically what wouldn't be doing is we're going to be building the form first that will submit to a specific page and that's going to be the page that we're going to process the data in and we're going to be building it as if we didn't have JavaScript enabled and we're going to ensure that it works first of all and then when that's done we can handle the rest with Ajax and then this functionality as I said we can use over as many forms as you like and it's super quick to implement once you've done it so the first thing that we want to do is build the form now let me just explain the elements that we've already got on the page we've obviously got our basic markup on the page we've got a title now we've included jQuery the latest version of jQuery from the Google CDN and we've also including a file called mange which is found here nothing in at the moment but that's where we're going to be writing our JavaScript nothing too complicated as well so let's go ahead and start to build out our form and give it the usual attributes that we would so the action is going to be the page that we're submitting to now in this case I've created a folder called Ajax and I've created contact PHP which you can see I've got open in my editor so that's the father we're going to be Ajax into so I'm just going to choose Ajax contact or PHP and I'm also going to choose a method which is going to be post now the reason we do this is because we're going to use JavaScript to pickup the value of this attribute but also if we submit the form it will go to this page to process the data inside of the form so it falls back to people that either don't have JavaScript enabled or you know there might something might go wrong so let's go ahead and create some input fields are going to have name email message and then the submit button oops so the type here is text and we'll give this a name now the name is important we're not going to give these any classes or IDs unless we of course use labels but in this case this is going to be picked up by JavaScript as well so it's extremely important I'm also going to incorporate a placeholder in here and just say your name so let's duplicate this down and we'll change this to email and change this to email and let's again duplicate this down and we'll create out submit button while we're down here and we don't need a name for the submit button and we also don't need a placeholder you just need a value for this so I'll just say send and obviously in here we want to go ahead and create a text area so we're basically building a form as we area basically building a form as we usually would so there's nothing different about what I'm doing and this is going to be message so let's go ahead and check this out refresh so we've got your name email message and send so we'll go ahead and just wrap some divs around this in fact we'll give this a placeholder too so obviously this is going to depend on your design but I'm just going to wrap empty divs around this you know not recommended but just to space it out for now I'm gonna apply any styles or anything like that and I'm certainly not going to use paragraph tags so once that has done that's just that should be alright then lovely so let's go ahead and just preview this cool so we've got all the markup out of the way now we're going to get into the exciting stuff which is the PHP side of stuff which is going to be very basic because you know this isn't a tutorial about processing a contact form but will then work on the java scripture is just going to get a little bit more interesting so when I submit this to contact dot PHP let's just take a look what happens so I'm going to fill out some details send okay so this has gone to Ajax contact our PHP so inside of contact PHP we want to create a conditional statement and we want to check if the data that we are expecting is set so post name post email groups and post message now obviously I'm using PHP but you could be using any server-side language here does not matter where you're submitting this to as long as you can process this on the backend so here I'm going to print our post we're not actually going to do anything with this data but you can do everything with this data so when I go ahead and hit refresh you'll see that we've got an array of the data that I've submitted so that is the point of this now what we want to do now is actually take over this functionality so click send nothing's available we want to take over this functionality and when we hit stem we want to send this behind-the-scenes and then get that data back so we can either put it onto this form redirect with JavaScript something like that so let's go ahead and write the JavaScript for this now it's not as complicated as you might think it is actually extremely easy and hopefully the way I explain it's going to clarify each step that we take so the first thing to do is to set a selector for our form now we don't want to just target every form we want to talk its forms that we specifically want to enable Ajax for so I'm going to give this a class of Ajax and that will mean that any form of the class of Ajax will be prior test by this functionality I'm going to say formed Ajax I'm going to use the on method and I'm going to say on submit so when this form has been submitted I a submit button has been clicked the last thing I want to do is return false and the reason for this is that otherwise the form will submit in its normal fashion so when I click send now nothing happens okay so the event handler has been triggered so we can do a consult up log here to check but there we go but we're not actually submitting the form in the traditional fashion so now what we want to do is we want to create some variables we want to create reference to the current object which is the form or the element and we want to get the URL the method and we want to set some preliminary variables to hold the data that's going to be in this form now the beauty of this method is that if we want to go back to here and add another field we don't need to write any more code in the JavaScript area this will all handle we're going to loop through all of the elements in here that we want to submit so you don't need to go and change everything so this will remain that light you could implement what I'm about to write and never have to change it so that's the beauty of this so I'm going to create a variable called that and this is going to reference the current project that we're working with I'm also then going to say URL equals that dot attribute action and we also need to get the method some of the same method equals that dot attribute method and we also want a data variable which is going to be a JavaScript object to hold our data now if you're not on if you don't really understand this that reference is up sorry this reference is the current the current object that we're in so that would be this form so now we can use that to say that dot is just a shorthand way instead of using this and this over and over again attribute is basically just one of the form attributes that's action and method so we grab them let's go over to the index dot HTML file so we grab the method and the action and we save them so now what we want to do is we want to loop through all of the elements in the form now which elements are we interested in well we're only interested in elements that have a name because they're the ones that we want to pick up on the other side the name is required for the traditional submission but we want to pick up the value from these based on the name so name name and name this doesn't have a name because it's not of interest to us we could give it a name and it wouldn't matter but anything with a name within the form is of interest to us so we want to loop through in fact we say that dot find and in here we choose another selector and the selector is literally just name this means find anything with a value with an attribute of name regardless of whether it's empty and regardless of whether what content is within it and now we use the each method and we have a callback function so this will run for every single element with name and we'll expect that there would be three in this case so let's consult log and let's put some value index value and in here let's say console.log value so when I click send you see that it basically outputs the the three input fields that we're interested in so the name the email and the message so now that we've got that clear we need to create some more variables and again I'm going to create that variable to reference this now remember this now references each of the inputs that we've just seen output so we're going to have a name for it which is that dot attribute name and that reference is this all this and we're going to have a value which is going to be that dot bow okay so now we've got the values of each of the elements that we're interested in we can append them to this data object here the reason that we're appending to a data object is because we're going to be sending this through the Ajax jQuery method and we need to pass this as a JSON object or just an object so we say data value equal ab sorry data name of course equals value so this basically just says data name so the name of the name of the input field and then we apply the value so under here I'm going to say consult log data consult log data and let's go ahead and refresh so I'm going to type in Alex my email address and hello click send and you see now we've got an object named Alex email Alex a PHP academy' dorg message hello so this is in perfect form to send through to our PHP file using the jQuery AJAX method so we've built this up perfect now we can send it along so now what we're going to do here is we're going to use the Ajax method some curly braces inserts some curly braces inside and here we want to specify the URL the type of request which can either be get or post which we picked up here so the URL here the method here and then we want to send the data through which we already have seen in action so the URL is just going to be the variable u RL the type is going to be method in fact let's change this to type and let's change this to type then so we're sort of keeping consistency and the data you probably guessed already is data so this is sending the URL that we specified here with this data type or the type of request and then the data is going is all of this all the values here that we've already seen output passing through as well we also have a success callback function and in here we get a response and then we can console dot log the response so what happens is is the ajax method sends the data to this URL with this type so this data here and then we get a response back and week and it's basically anything that's output on this page which the moment is print our post so we'll just console dot log the response and with this data you can do absolutely anything you can clear the form you can output error messages and you know get creative with that so now let's go ahead and say Alex Alex appear to be Academy hello click send and the response is the print art of this so this isn't JavaScript this is the print our value of of what we've seen in our in our contact our PHP so we could even say your name is name so let's say Alex I'm not gonna bother filling these out we don't actually have any checks to say these should be it should be submitted but there we go your name is Alex so we can do anything we want inside of our PHP file now we can pass error codes back and things like that and then we can pick that up within this callback here so basically what we've done is we've created a form that can be traditionally submitted but we then overtake it with the JavaScript functionality but then we have that nice fallback you it's not available and then we can process it in the backend with any server-side language of our choice

Channel: Codecourse

Views: 196,512

Keywords: form, javascript, refresh, submit, ajax, jquery, codecourse, no, phpacademy, php

Id: GrycH6F-ksY

Length: 14min 12sec (852 seconds)

Published: Mon Feb 25 2013