JavaScript beginner tutorial 27 - forms

  Рет қаралды 101,729

Quentin Watt Tutorials

Quentin Watt Tutorials

10 жыл бұрын

In this tutorial I show you how to make a program that will write your name into a paragraph on the web page.
Don't forget to subscribe:
/ quentinwatt Social links:
-------------------------------------------------------------
Add me on twitter:
/ quentinwatt
facebook group:
/ quentin.watt
-------------------------------------------------------------

Пікірлер: 98
@Grayson1696
@Grayson1696 10 жыл бұрын
You know, since this is on video, if something is ever covered too quickly the watcher can always pause the video to catch up. Great series so far, Quentin.
@mikecannon9421
@mikecannon9421 10 жыл бұрын
Ok, I deleted and re-entered all the code and got it to work. Thanks for the quick response and all the great tutorials. Keep up the good work.
@yoitired
@yoitired 9 жыл бұрын
Great job man, you have a talent for explaining things really clearly.
@thanhtamo7995
@thanhtamo7995 7 жыл бұрын
Thank you very much for your tutorials Quentin! They are very helpful to me!
@MZ-yx8eg
@MZ-yx8eg 3 жыл бұрын
I like that fact that you didn't rushed and explained for us what is that innerHtml property. I sub
@QuentinWatt
@QuentinWatt 3 жыл бұрын
thanks
@jinkole9334
@jinkole9334 8 жыл бұрын
Hello sir, just wanna stop by and say thanks for making the video, it helped me a lot.
@margodarden2199
@margodarden2199 7 жыл бұрын
thank u making this video. U have helped me tremendously to understand forms and the DOM....Please keep making the great video.
@CyberCrowBR
@CyberCrowBR 8 жыл бұрын
For more semantic context in HTML5, use: What is your name: Great job Quentin ! I´m learning a lot with your videos !
@user-vo5yc9qq2l
@user-vo5yc9qq2l 8 жыл бұрын
Great tutorials Quentin.Thank you very much!
@hioart001
@hioart001 9 жыл бұрын
Cool tutorials...on a roll at the moment...cant wait to start JQuery
@jawadbashorun5749
@jawadbashorun5749 9 жыл бұрын
I have to say that you are AMAZING!!! what a great teacher
@mikejones3865
@mikejones3865 9 жыл бұрын
Very nice. Im slowly trying to put it together, hopefully after JQuery ill be able to do the bare bones of coding.
@parmarpritesh18
@parmarpritesh18 10 жыл бұрын
This is one of the excellent series of the tutorial which i have come across................Thanks a lot...Thank you very much for sharing with us... hope to see many more such tutorial ..
@dudeguy7927
@dudeguy7927 4 жыл бұрын
I would give you the answer but I’m five years late and hope you know now😂
@krutomjer
@krutomjer 10 жыл бұрын
You are at excellent pace
@nakemefofana8144
@nakemefofana8144 Жыл бұрын
Thank you Quentin; you've made the javascript programing basis much clearer for me ! :)
@QuentinWatt
@QuentinWatt Жыл бұрын
Great to hear!
@onafehts
@onafehts 7 жыл бұрын
Tnx man! Great tutorial and excellent explanation!!
@iceeat
@iceeat 8 жыл бұрын
hey Quuentin Iwanted to say that your channel helps me ALOT in my studies so far I wondered if you could explain to me that whenever i choose to name my function just "function write(){ .." after entering the name in the input tthe whole page disapears but whenever I just it as "fucntion write_something(){ ..." it works perfectly
@georgigeorgiev2219
@georgigeorgiev2219 9 жыл бұрын
Thank you very much.. GOD be with you.
@sopheasoeng
@sopheasoeng 7 жыл бұрын
This is perfect. Thank you so much.
@geraalekgera
@geraalekgera 6 жыл бұрын
You have same thinks that i didnt made in my code, but your lesson is cool and i like wach it. Thanks !!!
@eltayebmohamed6539
@eltayebmohamed6539 6 жыл бұрын
Thank you. I learned a lot from you.
@TalmadgeSimpson
@TalmadgeSimpson 6 ай бұрын
Perfect intro to us forms.
@Freefunware
@Freefunware 3 жыл бұрын
This was a good speed to learn at :)
@jkim4386
@jkim4386 4 жыл бұрын
Thank you very much, but so.... what is form? or what is it that does?
@jndev91
@jndev91 7 жыл бұрын
Very nice videos. Please add more videos
@alnur-explorers
@alnur-explorers 8 жыл бұрын
Nice and Easy Teaching Style
@waaniesimon758
@waaniesimon758 10 жыл бұрын
thanks dude. great job
@ahmadmehrez9041
@ahmadmehrez9041 8 жыл бұрын
very usful , and clear , thanks
@CMZ0762-iherb
@CMZ0762-iherb 4 жыл бұрын
Good tutorial.Thanks. 1:25 Inside the body, we write an empty paragraph, id shows the name 1:55 Inside the form, we've got 2 input elements - what is ..? and 2:50 another input element, 2:50 3:29 until now nothing happens. 3:40 Now we start working on Js. We create a function whatever we put in this element on to this paragraph 4:14 Make this paragraph a variable, also make the 1st element into a variable
@nerminbosnjak7237
@nerminbosnjak7237 10 жыл бұрын
Thanks a lot man and When can we expect more video tutorialns from you :D Lets say jQuery
@codewithme7226
@codewithme7226 5 жыл бұрын
Now: how do I start a storage/cookie to make sure when I refreshes the page the name I typed in is still there? Any simple answers would be very much appreciated. Thanks!
@sholabass
@sholabass Жыл бұрын
I have an issue .. am using Google chrome but when I send the function doesn't call the variables... Does it mean it works only for Firefox?
@bertusschuurman346
@bertusschuurman346 10 жыл бұрын
Sometimes I get a little confused when the same word is used. F.i. in this tutorial the word "name". It's in a function, there's an id called name, also a var and it's in some text. Maybe it's an idea to avoid it in tutorials to come. Then again, wonderfull tutorials! Thank you so much!
@Pyroo0
@Pyroo0 10 жыл бұрын
is there a way to update the "Welcome 'name' to update the value the same time as you type in the input?
@favpatrick4451
@favpatrick4451 5 жыл бұрын
nice one..thanks guy
@alfonsoleonheart4138
@alfonsoleonheart4138 5 жыл бұрын
clear tutorials, nice
@gvendycrap6269
@gvendycrap6269 8 жыл бұрын
Why when i create var welcome_parra and var name outside of function it tells me undefined and when i create in function it works?
@khalidQweder
@khalidQweder 10 жыл бұрын
Nice. Thank you.
@irrenaltawaq8642
@irrenaltawaq8642 5 жыл бұрын
good job man
@Kavkazec999Vnature
@Kavkazec999Vnature 7 жыл бұрын
Hey Quentin! I have tried to combine the forms with a switch statement. It didn't work properly because the document would always print out the default option no matter what I write. Then I changed it to an else/if statement, but the result was the same: it always prints out the "else" option. The browser console does not show any mistakes in my code. By the way, here is the code that I'm talking about. Forms function i(){ var ans = document.getElementById("ans"); var changepar = document.getElementById("changer"); if(ans == "A"){ changepar.innerHTML = "A"; }else if(ans == "B"){ changepar.innerHTML = "B"; }else if(ans == "C"){ changepar.innerHTML = "C"; }else if(ans == "D"){ changepar.innerHTML = "D"; }else if(ans == "E"){ changepar.innerHTML = "E"; }else if(ans == "F"){ changepar.innerHTML = "F"; }else{ changepar.innerHTML = "..."; }; } Hello what is your favorite letter? The document would only print "..." no matter what letter I insert. I'm so confused. Please help. Thank you.
@nirushamunikar3675
@nirushamunikar3675 7 жыл бұрын
function i(){ var ans=document.getElementById("ans"); var changepar=document.getElementById("changer"); changepar.innerHTML =ans.value; } this statement display any value or letter entered by the user #Art MK
@ankurvarshney2674
@ankurvarshney2674 5 жыл бұрын
Please use ans.value instead of ans.. Example - if(ans.value == "A"){ changepar.innerHTML = "A";
@jasreetsandhu1741
@jasreetsandhu1741 10 жыл бұрын
Awesome!!
@sanz6357
@sanz6357 3 жыл бұрын
Thanks bro !
@matungbechok8635
@matungbechok8635 9 жыл бұрын
Is there any special limitation to whatever one can put inside the innerHTML? Or Is there any special rules to follow either to start with some texts like " welcome_para" or variable name like name.value or what?
@QuentinWatt
@QuentinWatt 9 жыл бұрын
Matung Bechok There isn't really a limitation. You could add almost anything you like.
@sashastage5567
@sashastage5567 4 жыл бұрын
cool tutorials
@rakeshsahu8010
@rakeshsahu8010 10 жыл бұрын
we can do it bi by adding selection tag?
@mvorosila
@mvorosila 9 жыл бұрын
I was wondering why does the "welcome + name" does not show up when I m using done However it works fine with I would appreciate the explanation
@brendanleighton
@brendanleighton 4 жыл бұрын
That ".value" thing is like some government secret. I looked for a while and that's exactly what I needed to do some math on a user's input.
@QuentinWatt
@QuentinWatt 4 жыл бұрын
Haha. Just the basics of how JavaScript works :) Good luck
@SirRobbStarkGamin
@SirRobbStarkGamin 9 жыл бұрын
Hey i was wondering can you use the InnerHTML but keep the content that was already inside the tag before?
@LassanaLankawa
@LassanaLankawa 8 жыл бұрын
Try this:welcome_parra.innerHTML += " welcome " + name.value;
@subratarabidas4090
@subratarabidas4090 7 жыл бұрын
Thanks Cuteion!
@romeindara3625
@romeindara3625 6 жыл бұрын
I don't get the "name.value" is that identifying the id and value?
@madhusudhan5476
@madhusudhan5476 6 жыл бұрын
Please explain one registration with two fields and those fields data save in database or in word pad or excel or notepad)
@souravpodder2402
@souravpodder2402 8 жыл бұрын
Awesome
@henkvandermeer2189
@henkvandermeer2189 5 жыл бұрын
excellent
@thesiyah6334
@thesiyah6334 4 жыл бұрын
Thank you!
@QuentinWatt
@QuentinWatt 4 жыл бұрын
You're welcome!
@Erik-yt3fy
@Erik-yt3fy 8 жыл бұрын
Can you work with Meteor.js?
@mikecannon9421
@mikecannon9421 10 жыл бұрын
Great tutorials Quentin. This is the first tutorial that I couldn't get the same end result as you. When I run in browser (Chrome), enter name and click "done", nothing happens. I've done all of the HTML, CSS and JavaScript tutorials up to now. Have tried rewriting the code three times with same results. I'm working on a Mac and I'm using Sublime text editor. Anybody have any ideas. Thanks again.
@QuentinWatt
@QuentinWatt 10 жыл бұрын
mmm, cant think of anything. You say the code is the same word for word?
@infectedlolz247
@infectedlolz247 10 жыл бұрын
the same thing is happening to me
@QuentinWatt
@QuentinWatt 10 жыл бұрын
infectedlolz247 check your error console. If there is an error then no JavaScript will run, so nothing will happen.
@fesbfesb5059
@fesbfesb5059 9 жыл бұрын
Did anyone find solution of this problem? I am facing the same problem. Please let me know. Thanks in advance
@ssuuppeerr91
@ssuuppeerr91 9 жыл бұрын
i had this problem as well, but i solved it by adding "" to the getElementById() part of the function. below is the before and after of what worked for me. function write_name(){ var welcome_para = document.getElementById(welcome); var name = document.getElementById(name); welcome_para.innerHTML = "welcome " + name.value; } into function write_name(){ var welcome_para = document.getElementById("welcome"); var name = document.getElementById("name"); welcome_para.innerHTML = "welcome " + name.value; } I realised he did add it in his video so im not sure if that was the problem for u guys but i hope it helps solve the issue.
@rhote786
@rhote786 10 жыл бұрын
thank you :)
@funnyvideos6233
@funnyvideos6233 7 жыл бұрын
sir this code is not working .plz send mr code
@JASDKA1
@JASDKA1 7 жыл бұрын
So we can basically give any element an id...!?
@Brums73
@Brums73 7 жыл бұрын
I worked on this for 30 min and could not get it to work for me. Then I found the problem. Function is spelled with a c not funtion.
@abdialibabaali132
@abdialibabaali132 6 жыл бұрын
explain what the action property
@itoroakpan4068
@itoroakpan4068 Жыл бұрын
Please, can you make it bolder
@nishcheymaithani2879
@nishcheymaithani2879 6 жыл бұрын
for me i had to use , var name=document.getElementById("name").value;
@steinadlerx5917
@steinadlerx5917 10 жыл бұрын
The speed is good and better, don't worry!
@abdialibabaali132
@abdialibabaali132 6 жыл бұрын
explain the form attribute
@fouried96
@fouried96 7 жыл бұрын
Was so shocked when I heard a South African voice! #LocalIsLekker
@Momo-vc5bt
@Momo-vc5bt 5 жыл бұрын
Same here.. lekker hey!
@MominParveez
@MominParveez 8 жыл бұрын
sir, anyone how to write this code below. assume welcome is paragrapgh ID and name is input Button id. function click () { document.getElementById("welcome").innerHTML="welcome"; if(document.getElementById("name").value is empty) { prompt("type a name"); } else{ document.write(document.getElementById("name").value); } }
@sandilechitsa3694
@sandilechitsa3694 2 жыл бұрын
Are you South African?
@QuentinWatt
@QuentinWatt 2 жыл бұрын
Yes
@hxmo656
@hxmo656 6 жыл бұрын
did u fart near the end lmfao
@rakeshsahu8010
@rakeshsahu8010 10 жыл бұрын
it was good but a little bit faster
@elijahbentley3986
@elijahbentley3986 5 жыл бұрын
okay
@arpitvarshney9905
@arpitvarshney9905 6 жыл бұрын
Good great
@TheCrusaderRabbits
@TheCrusaderRabbits 5 жыл бұрын
Too fast.
@balkarkalsi4248
@balkarkalsi4248 Жыл бұрын
Waste of time, just 3 lines of code he took 10 min.
@QuentinWatt
@QuentinWatt Жыл бұрын
Thanks for the feedback.
@adit255
@adit255 8 жыл бұрын
Do not EVER EVER EVER use this script. This script is not sanitized , the input which user enters has to be sanitized first then pass on to Javascript. This script is Vulnerable to XSS (Cross Site Scripting) Attacks. If you want to know how. Enter this Payload "> What this will do is the value = "" >" . This will be name.value. If you look carefully the value gets closed in first two double quotations "" ..So we would be left with > Which will Render XSS ;) . So +Quentin Watt Please take a note on this !!
@vampyr_1117
@vampyr_1117 6 жыл бұрын
Aaditya Purani He is teaching about JS not Security
@abdysingh
@abdysingh 6 жыл бұрын
Dude stop showing off. When you started writing JS you probably did the same thing. Everything has it's time and your comment is beyond its time.
@thefreeze6023
@thefreeze6023 6 жыл бұрын
+Abhyuday Singh, he's trying to help ya know?
JavaScript beginner tutorial 28 - form values explained
4:42
Quentin Watt Tutorials
Рет қаралды 47 М.
Learn HTML Forms In 25 Minutes
24:56
Web Dev Simplified
Рет қаралды 946 М.
Super sport🤯
00:15
Lexa_Merin
Рет қаралды 17 МЛН
Sigma Girl Education #sigma #viral #comedy
00:16
CRAZY GREAPA
Рет қаралды 35 МЛН
Improve your form validation hints without JS!
12:46
Kevin Powell
Рет қаралды 64 М.
JavaScript Basics in 10 Minutes
11:49
Topknot Clare
Рет қаралды 199 М.
JavaScript beginner tutorial 30 - form validation text boxes and passwords
11:59
Quentin Watt Tutorials
Рет қаралды 162 М.
User Input and Response on a webpage using JavaScript (for beginners)
16:55
Collecting Form Data using JavaScript
15:40
procademy
Рет қаралды 56 М.
HTMX is amazing!
10:16
Maximilian Schwarzmüller
Рет қаралды 13 М.
JavaScript Callbacks, Promises, and Async / Await Explained
38:54
LearnWebCode
Рет қаралды 40 М.
Form validation using Javascript on the client side for beginners
9:35
JavaScript Academy
Рет қаралды 356 М.
Learn JavaScript Event Listeners In 18 Minutes
18:03
Web Dev Simplified
Рет қаралды 562 М.
Super sport🤯
00:15
Lexa_Merin
Рет қаралды 17 МЛН