Video instructions and help with filling out and completing 8850 Form Website

Instructions and Help about 8850 Form Website

Hi and welcome back in this exercise we will demonstrate how to build a modern all-purpose website contact form that uses some new html5 features Ajax and PHP everything happens without reloading the page or navigating to another document to parse the data you can put this form to work on any website that processes PHP and you can modify it for other purposes very easily now if you need to get to the completed code I'm going to put a link to the completed code down in the description text of the video we're going to start with the bare bones of an html5 web document and the bare bones of a PHP script the first thing I'll do is go into the body element and pop the form in and explain it to you very quickly the form has an ID attribute of my form in the on submit event we're going to run a JavaScript function called submit form and then we just put return false after that to stop all the normal behavior that usually happens when a person submits a form because we want this submit form function to handle everything now I just put paragraph elements in place to give all of these input fields some space now the first input field has an ID of n which is short for name then for the placeholder text that's going to be inside of the field we just put the string name that way the user knows that they have to put their name in that field and then we add the required attribute to make sure that they give us a name before they can submit the form the next input has an ID of e which is short for email and it's placeholder text will be email address and we're using the html5 feature of type email that way we get a little bit of validation for the email string that they put in place and I'll demonstrate that in a moment and we also add the required attribute for that field as well then the next field is a text area element and it has an ID of M which is short for message so you have name email and message it's placeholder text will be write your message here and I put the Rose attribute in place just give it a little bit of height but you can do that through CSS I'm not going to add any CSS to this application so that you guys can style it any way you want through CSS and all you have to do is target these IDs or you can target inputs and text areas so the text area also has the required attribute so they are required to type in a message before they can submit the form then the very last input is the submit button it has an ID of my BTN short for my button the type is submit the value which is the text that's going to be showing on the button is submit form then right next to that submit button we have a span element it's going to be empty initially but we're going to populate that with messages for the user while the form data is processing and that's it the form is very very simple okay now let's go into the client-side scripting which is JavaScript so the first thing we'll do in JavaScript is put a function named underscore and this isn't very necessary all it does is it saves up some typing and some space in the application because everywhere you see an underscore being called in the application you can translate that to document get element by ID so it just helps us avoid having to write document dot get element by ID within our script we can just call an underscore like I said it's not very necessary but it saves space time and typing now all we need is this submit form function put in place and then we'll work on the PHP parsing script okay I'm going to quickly explain every single line within this submit form function that way you're not confused about anything and you can modify it expand upon it and use it for other purposes also the first thing we do in submit form function is we target the my submit button and we effect it's disabled property making it true so disabled true that means the user can't press it over and over again and send data many many many times they might accidentally double-click the button which you want to prevent so right they click the button the first time we're going to disable it when this function begins to run then the next line we target this status element right here next to the submit button and we put in its inner HTML property the string please wait dot dot that gives them some kind of indication that that is being processed on the server on the very next line we create a variable named form data which represents the new form data object now the form data object allows us to append new key value pairs into all the data that's going to be transmitted to PHP so we're using the append method on the form data object the first thing we're going to send is a key value pair for the name the user's name so we put the string N and n is going to be picked up as a posted variable in the PHP script and I'll show you that in just a second now the other half of the key value pair is going to be the value so we have the key which is N and the value which is going to be whatever the user typed into that name field in the form so we target that form field and we pass its