D4mations.com

JavaScript beginner tutorial 27 – forms



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

d4mer

, , , , , , , , , , , , ,

40 responses to “JavaScript beginner tutorial 27 – forms”

  11. 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.

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

    }

    }

  21. 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. 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

  28. 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?

  30. 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?

  36. 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. 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!.

Leave a Reply