CODEWITHSUNDEEP
javascripthtml
user3271960
user3271960

Reputation:

JavaScript/HTML Form Validation

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/

Upvotes: 0

Views: 171

Answers (5)

Suman Bogati
Suman Bogati

Reputation: 6351

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

Upvotes: 0

Zword
Zword

Reputation: 6787

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

Upvotes: 0

Lazaro Fernandes Lima Suleiman
Lazaro Fernandes Lima Suleiman

Reputation: 1932

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

Upvotes: 0

Roberto Maldonado
Roberto Maldonado

Reputation: 1595

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

Upvotes: 1

j08691
j08691

Reputation: 208002

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;

Upvotes: 1

Related Questions