Did you like how we did? Rate your experience!

Rated 4.5 out of 5 stars by our customers 561

Video instructions and help with filling out and completing Are 8850 Form Submission

Instructions and Help about Are 8850 Form Submission

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.

If you believe that this page should be taken down, please follow our DMCA take down process here.