0

I am a beginner and I'm trying to write a simple form validation code. My HTML is the following: 

    <h1 align="center">Super Accurate Cool or Not Test</h1>

<div id="box" align="center">
    <P>Find out if you are cool or not today!!!</p>
    <form action="#" name="form1" onsubmit="return coolTest()" method="POST">
        <label>Enter your name:</label>
        <input type="text" id="inputName" name="inputName">
        <br>
        <input type="submit" value="Submit" id="submit">
    </form>
</div>

My JavaScript is this: 

    var name = document.form1.getElementById("inputName").value;

function coolTest() {
    if (name === "Joe") {
        alert("You are so cool!");
    } else if (name === "Bob") {
        alert("You are kinda cool, but not as cool as Joe.");
    } else if (name === "") {
        alert("Please enter your name");
    } else {
        alert("You are not cool... Sorry.");
    }
}

What am I doing wrong here that is creating this to not work? Thank you! Also- here is a jsfiddle I already have: http://jsfiddle.net/tjhillard/ZQTq5/4/embedded/result/

Improve this question
3
  • Funniest code example I ever saw here lol Commented Feb 5, 2014 at 18:58
  • this isn't an answer, but you should use onkeyup="coolTest();" in the text input instead. That way they'll get an alert as soon as they type the e in Joe without having to submit. Commented Feb 5, 2014 at 19:01
  • Not the solution to your question, but joe and Joe give different results. A way to solve this is to convert the input to lowercase and test with lowercase names Commented Feb 5, 2014 at 19:18

5 Answers 5

Reset to default
1

Change you function to the following and put it at the end of your document (before the closing body tag):

function coolTest() {
    var name = document.getElementById("inputName").value;
    if (name == "Joe") {
        alert("You are so cool!");
    } else if (name == "Bob") {
        alert("You are kinda cool, but not as cool as Joe.");
    } else if (name == "") {
        alert("Please enter your name");
    } else {
        alert("You are not cool... Sorry.")
    }
    return false;
}

jsFiddle example

Note that since IDs are unique, you want to use document.getElementById("inputName").value; instead of document.form1.getElementById("inputName").value;

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

good answer. to add to this, document.forms['formName'].elements['submitButtonName'].value would be valid.
1

This line:

var name = document.form1.getElementById("inputName").value;

Should be inside function coolTest(). So, every time coolTest() is called, name will be refreshed with input value

Improve this answer

Comments

0

Input:

<input type="submit" value="Submit" id="submit" onclick="coolTest()">

Form validate:

function coolTest() {
    var name = document.getElementById("inputName").value;
    var isvalid = true;
    if (name === "Joe") {
        alert("You are so cool!");
        isvalid = true; //this a valid I suppose :P
    } else if (name === "Bob") {
        alert("You are kinda cool, but not as cool as Joe.");
        isvalid = false;
    } else if (name === "") {
        alert("Please enter your name");
        isvalid = false;
    } else {
        alert("You are not cool... Sorry.");
        isvalid = false;
    }

    return isvalid;
}
Improve this answer

Comments

0

In jsfiddle while writing Javascript code you have to change default onLoad to No wrap in <body> which automatically adds JS at the end within body tag.

Jsfidlde img

After the above change it will work Fiddle

Improve this answer

Comments

0

getElementById should be query with document not with document.form1

It should be

var name = document.getElementById("inputName").value;

instead of

var name = document.form1.getElementById("inputName").value;

And this line should be into function definition function coolTest() {

Demo

Improve this answer

Comments