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 How 8850 Form Submitting

Instructions and Help about How 8850 Form Submitting

Hey guys hey young my name is Don and today I want to show you how to use Ajax to process your HTML forms so this will allow your users to actually submit a form without refreshing the page or redirecting to a different page so it's all done in the background using Ajax so we're going to create this this very basic login form in this video which has two fields username and password and a false to actually type a username inside here such as decode and then press submits or login we get password cannot be empty it fails to type in here a an incorrect password such as fake then press login we get incorrect user name slash password combination so it's quite a standard form but it's done using Ajax so these messages come from the server okay so essentially we make a request using Ajax to the server we provide the server with the username and password and then the server will give us back a list of messages and it'll also say whether or not the login was successful if the login was successful then that'll be decode here as a password but login right now it was a successful login so we get redirected to the dashboard HTML page so that is how this thing works so let's create this system right now so inside the blank document I'll just refresh this from from earlier so inside here we can begin by actually constructing from the HTML for this for this form so back inside here inside the source code let's create a container to hold the actual form elements okay so inside here let's make a new div and give it a class of form okay so this form class is just that class I used to to actually add some CSS styles to make it look nice so this class is not required by you okay so inside here let's now create four HTML elements so these will be like answer do these four elements will be the container for the errormsgs one for the username and for the password and one for the login button okay so let's start with the username and password fields so back inside here let's add a label a label for the username with some text of the username and also a corresponding input field okay input type of texts an ID of the user name to match that one right there we can also turn off spellcheck so pelipper spellcheck Eagles false okay we can do the same thing for the password copy this paste attorney yeah change these values to password and password inside here as well we can also remove this spellcheck attribute okay so we can save this and refresh and we have our two input fields ready to go okay let's now make this submit button so back inside here let's make a new button of type submit' than ID an ID of BTN - submit with some texts of login we can now save this and refresh and the form is looking quite good so now we can actually add the errormsgs list okay so this is actually an unordered list so back inside here let's make a new unordered list element with an ID of form - and messages okay inside this list let's add one sample list item we can say generic error number one we can save this and then refresh the page and we get that by this and now let's add some CSS styles to make this look a bit more you know scary red text red background etc so back inside here let's add some styles for before messages ID okay let's just put some really standard background color a background color RGB 255 - three two - three - that'll be a lighter red let's see the a border of 1px solid and then red a color of red a display Oh block so block is the default display we're gonna change this to none later on to actually hide this element okay but for now it'll be block if you have the font size of being 12 PX a font weight of being bold a margin bottom of 10px some padding of 10px on the top and bottom and 25 px for left and right and a max width of 250 px okay so we can now save this and refresh the browser and we get our nice scary-looking error messages okay so this will be filled by the actual JavaScript code so we can remove the generic error inside here and have an empty four messages list and we can also get rid of the display property and make that no so when the page loads up there's obviously going to be no errors just yet so false to save this and refresh we get a nice clean login form okay so that is all for the HTML and the CSS so now for the server side and also the JavaScript okay so I've actually already wrote a PHP script for the server side it's called check login dot PHP so this script right here essentially it gets the username and password from the request and then it checks you know if they're empty or if they're successful and then so on so it has two variables the first one being okay so I'm gonna assume we're gonna assume by default that the login was successful so okay equal to true we also have a messages array this will contain all of the messages you know empty password empty username successful login maybe and also the incorrect one so that'll contain all the messages for this supplied username and password alright so this first condition checks if the username was provided if it wasn't provided then okay equal to false so the login was unsuccessful immediately okay and.

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