Using Form Information As a Variable using Javascript and Forms

Question

Alright, people of Stack Overflow, I have a question for you: I am in a web design class at my high school and learning ahead of the class since I already knew the first half of the class. I was asked by my teacher if I could teach what I have learned about Javascript and I agreed. However, one of the things she wanted me to teach is not working for me when I try it out on my own. I am trying to do a simple check for a variable that when you input a name into a box, if it is my name or the teacher's name it pulls up a popup that says "welcome" or something like that, and if it is anyone else it says "go away" the only issue is that no matter what I try something in the code is not working. This is a test function that I have at the moment; it is intended to print out the

<!doctype html>
<html>

<head>


<script type="text/javascript">
    var name = document.KageForm.User.value;

      function validator(){
        alert(name);

    }
    </script>

    </head>
    <body>

    <form name="KageForm">
        Username:<input type="text" name="User">
    <br/>
        Password: <input type="password" name="pass">
    <br/>
    <input type="button"value="Submit" onclick="validator()" />
    </form>


    <script type="text/javascript">
    </script>
</body>
</html>

Here is the full version of the code that I am trying to get to work:

<!doctype html>
<html>

<head>


<script type="text/javascript">
    var name = document.KageForm.User.value;

      function validator(){
if(name=="Kage Kaldaka"){
            alert("Eeyup")};
        else
            alert("Nnope");
    }
    </script>

    </head>
    <body>

    <form name="KageForm">
        Username:<input type="text" name="User">
    <br/>
        Password: <input type="password" name="pass">
    <br/>
    <input type="button"value="Submit" onclick="validator()" />
    </form>
    </body>
    </html>

Steve · Accepted Answer · 2013-04-08 22:47:05Z

2

You have several issues here:

You have a semicolon after the if statement
You are reading the name value on page load, at a point when the input field hasn't even been added to the page yet and certainly hasn't been filled out by the user yet. You need to read it when the user submits the form, i.e. you need to move the name assignment inside the validator method:

JS:

function validator(){
    var name = document.KageForm.User.value;
    if(name=="Kage Kaldaka"){
        alert("Eeyup");
    } else {
        alert("Nnope");
    }
}

answered Apr 8, 2013 at 22:47

Steve

8,6487 gold badges42 silver badges54 bronze badges

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

2 Comments

Kage Kaldaka Over a year ago

Thank you so much! This is my first time doing something like this, so I did not know about that part with the variable.

Kage Kaldaka Over a year ago

If you would not mind, I had another question that I think is relatively simple: for some reason, whenever I call a function that uses document.write in it from a button or input, it erases all the styling I have on the page. Do you know what would cause this?

Alfred Xing · Accepted Answer · 2013-04-08 22:45:28Z

0

There shouldn't be a semicolon after the if. You also have to put the variable inside the function to make it update:

function validator(){
    var name = document.KageForm.User.value;
    if(name=="Kage Kaldaka"){
        alert("Eeyup")
    } else {
        alert("Nnope");
    }
}

JSFiddle: http://jsfiddle.net/FhCTc/1/

answered Apr 8, 2013 at 22:45

Alfred Xing

4,6703 gold badges27 silver badges34 bronze badges

Comments

David Starkey · Accepted Answer · 2013-04-08 22:48:45Z

0

You are setting your variable outside your function:

<script type="text/javascript">
var name = document.KageForm.User.value;

function validator(){
  if(name=="Kage Kaldaka"){
        alert("Eeyup")};
    else
        alert("Nnope");
}
</script>

This means var name is set when the page loads, but no other times. Move it into validator().

You also ended your if with a semi-colon, which would cause an error on the else portion.

answered Apr 8, 2013 at 22:48

David Starkey

1,8503 gold badges36 silver badges50 bronze badges

Comments

bognix · Accepted Answer · 2013-04-08 22:54:07Z

0

Besides all the previous answers it is in good manner in JavaScript to use === not ==

answered Apr 8, 2013 at 22:54

bognix

2111 silver badge6 bronze badges

2 Comments

Steve Over a year ago

What do you mean with "good manner". It has nothing to do with manners, those two operators mean different things.

bognix Over a year ago

You are right, but it is important to know the difference between them. In this case == and === has the same effect but when you don't need to use ==, I believe === should be used. It is like 'use strict' argue there are lot of arguments for both sides. This are my thoughts, I read banch of articles and I think it is a good habit.

Collectives™ on Stack Overflow

Using Form Information As a Variable using Javascript and Forms

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related