• Tuesday , 19 September 2017

JavaScript beginner tutorial 27 – forms

Code Canyon



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:
http://www.youtube.com/user/QuentinWatt Social links:
————————————————————-
Add me on twitter:

facebook group:
https://www.facebook.com/quentin.watt
————————————————————-

Original source

3d Ocean

Related Posts

40 Comments

  1. Eltayeb Mohamed
    July 16, 2017 at 06:15

    Thank you. I learned a lot from you.

  2. S. F. G.
    July 16, 2017 at 06:15

    Tnx man! Great tutorial and excellent explanation!!

  3. Sophea Soeng
    July 16, 2017 at 06:15

    This is perfect. Thank you so much.

  4. JASDKA1
    July 16, 2017 at 06:15

    So we can basically give any element an id…!?

  5. Daniel Fourie
    July 16, 2017 at 06:15

    Was so shocked when I heard a South African voice! #LocalIsLekker

  6. Daniel Brumley
    July 16, 2017 at 06:15

    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.

  7. subratarabidas
    July 16, 2017 at 06:15

    Thanks Cuteion!

  8. thành tâm đỗ
    July 16, 2017 at 06:15

    Thank you very much for your tutorials Quentin!
    They are very helpful to me!

  9. Margo Darden
    July 16, 2017 at 06:15

    thank u making this video. U have helped me tremendously to understand forms and the DOM….Please keep making the great video.

  10. Nandhini Devi
    July 16, 2017 at 06:15

    Very nice videos. Please add more videos

  11. Art MK
    July 16, 2017 at 06:15

    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.

    <!DOCTYPE html>
    <html lang = "en">
    <head>
    <meta charset = "utf-8" />
    <title>Forms</title>
    <script type = "text/javascript">

    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 = "…";
    };
    }

    </script>
    </head>
    <body>
    <p id = "changer"></p>
    <form>
    Hello what is your favorite letter? <input type = "text" id = "ans" /><br/>
    <input type = "button" value = "INSERT" onclick = "i();">
    <form>
    </body>
    </html>

    The document would only print "…" no matter what letter I insert. I'm so confused. Please help. Thank you.

  12. Funny Videos
    July 16, 2017 at 06:15

    sir this code is not working .plz send mr code

  13. Geron Nanini
    July 16, 2017 at 06:15

    Thank you so much!

  14. Momin Parveez
    July 16, 2017 at 06:15

    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);

    }

    }

  15. sourav podder
    July 16, 2017 at 06:15

    Awesome

  16. ERIK BOY
    July 16, 2017 at 06:15

    Can you work with Meteor.js?

  17. jiggarkhan22
    July 16, 2017 at 06:15

    Nice and Easy Teaching Style

  18. 郑房新
    July 16, 2017 at 06:15

    Great tutorials Quentin.Thank you very much!

  19. Marcus Molinero
    July 16, 2017 at 06:15

    For more semantic context in HTML5, use:

    <label for="name">What is your name:</label>

    Great job Quentin ! I´m learning a lot with your videos !

  20. GvendyCrap
    July 16, 2017 at 06:15

    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?

  21. Aaditya Purani
    July 16, 2017 at 06:15

    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
    "><img src=x onerror=prompt(404)>

    What this will do is the value = "" ><img src=x onerror=prompt(404)>" . This will be name.value. If you look carefully the value gets closed in first two double quotations "" ..So we would be left with ><img src=x onerror=prompt(404)> Which will Render XSS 😉 . So +Quentin Watt Please take a note on this !!

  22. iceeat
    July 16, 2017 at 06:15

    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

  23. Ahmad Mehrez
    July 16, 2017 at 06:15

    very usful , and clear , thanks

  24. Jin Kole
    July 16, 2017 at 06:15

    Hello sir, just wanna stop by and say thanks for making the video, it helped me a lot.

  25. Matthew Davis
    July 16, 2017 at 06:15

    Please don't let anything happen to your channel.
    Your videos are priceless!!!

  26. Georgi Georgiev
    July 16, 2017 at 06:15

    Thank you very much..
    GOD be with you.

  27. Duke Nukem
    July 16, 2017 at 06:15

    Great job man, you have a talent for explaining things really clearly.

  28. Videos Multiverse
    July 16, 2017 at 06:15

    Hi Quentin, I am following your Tutorials and they are really very helpful.
    In this tutorial, I got a strange issue. When I click on the button, the Text shows in Paragraph and with in a blink of eye the page refreshes.
    Can you guide me what will be the problem?

  29. Notorious Canadian
    July 16, 2017 at 06:15

    Hey i was wondering can you use the InnerHTML but keep the content that was already inside the tag before? 

  30. Matung Bechok
    July 16, 2017 at 06:15

    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?

  31. Jawad BAshorun
    July 16, 2017 at 06:15

    I have to say that you are AMAZING!!!
    what a great teacher

  32. jackendy cherenfant
    July 16, 2017 at 06:15

    Finally it works after several months, I have to say I formatted my PC a week ago.

  33. Tama Al Posimani
    July 16, 2017 at 06:15

    Cool tutorials…on a roll at the moment…cant wait to start JQuery

  34. Mike Jones
    July 16, 2017 at 06:15

    Very nice. Im slowly trying to put it together, hopefully after JQuery ill be able to do the bare bones of coding.

  35. Sameh Salah
    July 16, 2017 at 06:15

    hi it s very nice tutorial 
    but why did u stop at number 34 please continue u r excellent  

  36. Marius Brivinskas
    July 16, 2017 at 06:15

    I was wondering why does the "welcome + name" does not show up when I m using
    <button onclick="write_name();">done</button>

    However it works fine with
    <input type="button" value="done" onclick="write_name();"/>
     
    I would appreciate the explanation

  37. jackendy cherenfant
    July 16, 2017 at 06:15

    It works fine in online editors on Google: do you think it's a PC registry issue or JS disabled?I write the code exactly the same but my PC does not execute it. but when I copy and past  the same code in an online editor it works fine, what's the problem with my computer then? Than you!.

  38. jackendy cherenfant
    July 16, 2017 at 06:15

    surprisingly I did everything excatly but does not work, when i click on 'done ' nothing happens, i checked all my codes. thank you, can you help?

  39. khalid Qweder
    July 16, 2017 at 06:15

    Nice.
    Thank you.

  40. Jasreet Sandhu
    July 16, 2017 at 06:15

    Awesome!!

Leave A Comment

You must be logged in to post a comment.