Video instructions and help with filling out and completing Which 8850 Form Submitting

Instructions and Help about Which 8850 Form Submitting

Hey YouTube how's it going it's Quinton here and welcome to tutorial number 27 and in this tutorial I want to speak to you guys about forms in JavaScript okay so if you guys don't know what forms are I do explained in my previous series I've got a couple videos on forms and all the elements that we can put inside of a form okay so if you guys don't know what that is then go back and watch that series and you'll be good to go but if you do know what forms are then this is what we're going to be making in this tutorial okay so we've got this program here and it asks for your name and when you type it in so if I type in my name Quinton and I click done then it writes welcome Quinton on to the screen okay and let's say I typed in my brother's name Jared then it would write welcome Jared so whatever you type in here is what gets printed out here okay so let's take a look at how to do that now the first thing we need to do is obviously put in all of those elements that you see here so I'm going to move over this quite quickly but we're going to start off with a paragraph and I'm actually going to leave it empty but I'm going to give it an ID of welcome so this is the paragraph that eventually shows your name okay whoops yeah okay so this is this is the paragraph over here but as you can see when we start the program it's not that it's empty so that's what we're going to do now that that's just our empty paragraph after that I have a form a form form form form okay and the form and inside here I've got two input elements and I also have just like some plain text which is what is you or name okay and yeah whatever something like that okay after that we have our input element so input type is equal to text and then I also give an ID and I set that equal to name okay so this is the ID we'll be using when we refer to this element and I also want to add in a break tag and after that I'm going to put it in another input element input type of button and the value was equal to done okay so I hope I didn't move too fast for you guys but if we save this now and run it in Firefox you can see that we've basically got the exact same program here so well it looks the same right now this is the one that works and this is the one that we just made now which if you type stuff in here now and you click done nothing happens okay so this is the one that's not working but we've got all of the stuff done so long now we need to do is work on the JavaScript okay so what I'm going to do is I'm going to create a function and I'm going to call that function right name okay and that's exactly what this function is going to do it's going to write whatever we put in this element onto this paragraph okay so what I need to now what I need to do now is make this paragraph a variable so that we can work with it and then I also want to make this input element into a variable so we can work with that as well okay so I'm going to make a variable and I'm recorded welcome para and I'm going to set that equal to this paragraph so the way I do that is I use my documents Wow document dot get element by ID method and we obviously need to grab it by this ID here so let's go ahead and just copy that and paste it there and that's basically how those two are linked now we need to go ahead and get this next input element here so I'm just going to call it a name and we'll just copy that because I'm lazy and we need to grab that name over there so we'll copy that and paste it there okay so now we're getting we over here this line okay we're getting this element by its ID and then on this line over here we're grabbing this element by this ID okay so now we've actually got these two elements stored inside a variable and we can work with those variables okay so what I want to do now is I'm going to set the inner HTML of this paragraph to the value of whatever is written in here okay so you guys know that a paragraph tag because it's got an opening tag and a closing tag then we can work with something called inner HTML now inner HTML is basically whatever is written inside of the paragraph so this stuff here over there that is the inner HTML of the paragraph okay so to work with the inner HTML of that paragraph we're going to say welcome para okay because that is how wiii i identify this paragraph now and then we're going to say dot in a HTML and we can set that equal to something so we're going to set it equal to the word welcome okay plus we'll concatenate whatever is written inside here so whatever the value of this input element is okay now we know that we can refer to this input element as this variable here name so let's go ahead and type in that variable name but we have to access the property value so name dot value and the value is whatever is written in here so you guys know that already okay

Get Form