Simple HTML form with javascript function

Question

I have an HTML form that I would like to make interact with some JavaScript:

...
<form name="signup">
    <label id="email" for="email" placeholder="Enter your email...">Email: </label>
    <input type="email" name="email" id="email" />
    <br />
    <input type="submit" name="submit" id="submit" value="Signup" onclick="signup()"/>
</form>
...

I have some JavaScript that I want to take the entered email address and store it in an array (it is currently inline with my HTML hence the script tags):

<script type="text/javascript" charset="utf-8">
        var emailArray = [];
        function signup(){
            var email = document.signup.email.value;
            emailArray.push(email);
            alert('You have now stored your email address');
            window.open('http://google.com');
                    console.log(emailArray[0]);
        }
</script>

I was hoping that this simple script would store the email in emailArray but the console remains empty throughout the execution.

What is wrong with this code?

Is the DOM present when you access it and did you try document.getElementById('email').value;? — Lars Beck
– Lars Beck, Commented Jan 21, 2014 at 9:37

Quentin · Accepted Answer · 2014-01-21 09:52:08Z

2

You have two problems.

Your form is named signup and your global function is named signup. The function is overwritten by a reference to the HTML Form Element Node.
Your submit button will submit the form, causing the browser to leave the page as soon as the JS has finished (discarding all the stored data and probably erasing the console log)

Rename the function and add return false; to the end of your event handler function (the code in the onclick attribute.

answered Jan 21, 2014 at 9:52

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

3 Comments

Frogmouth Over a year ago

oooh... 'Your form is named signup and your global function is named signup. The function is overwritten by a reference to the HTML Form Element Node.' ... well well well... i not considered this. nice!

Kane Over a year ago

Why do I need return false;? also your answer fixed my problem.

Quentin Over a year ago

@Kane — To prevent "2" from happening.

Rishi Php · Accepted Answer · 2014-01-21 09:52:07Z

1

Please rename your function name (signup) or Form Name (signup),

because when you are try to access document.signup......

It'll make a type error like, object is not a function

Try below Code,

<script type="text/javascript">
        var emailArray = [];

    function signup() {
        var theForm = document.forms['signupForm'];
        if (!theForm) {
            theForm = document.signupForm;
        }
            var email = theForm.email.value;
            emailArray.push(email);         

            console.log(emailArray[0]);
        }
</script>


<form name="signupForm">
    <label id="email" for="email" placeholder="Enter your email...">Email: </label>
    <input type="email" name="email" id="email" />
    <br />
    <input type="button" name="submit" id="submit" value="Signup" onclick="signup(); return false;"/>
</form>

answered Jan 21, 2014 at 9:52

Rishi Php

1,41811 silver badges20 bronze badges

1 Comment

Kane Over a year ago

Ah! This error stating object is not a function does appear for a split second after clicking.

Community · Accepted Answer · 2017-05-23 10:25:55Z

0

The problem that is given is that the form name is "signup" and the function is "signup()", then the function is never executed (this is better explained in this answer). If you change your form name or your function name everything should work as expected.

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Jan 21, 2014 at 9:51

Edgar Griñant

6071 gold badge13 silver badges27 bronze badges

Comments

Puneet Purohit · Accepted Answer · 2014-01-21 10:01:50Z

0

try this code :

<form name="test">
    <label id="email" for="email" placeholder="Enter your email...">Email: </label>
    <input type="text" name="email" id="email" onBlur=/>
    <br />
    <input type="button" name="submit" id="submit" value="Signup" onclick="signup()"/>
</form>
<script type="text/javascript" charset="utf-8">
       var emailArray = [];
        function signup(){
            var email = document.getElementById('email').value;
            emailArray.push(email);
            alert('You have now stored your email address');
            window.open('http://google.com');
                    console.log(emailArray[0]);
            return false;
        }
</script>

answered Jan 21, 2014 at 10:01

Puneet Purohit

1,2916 gold badges25 silver badges43 bronze badges

Comments

monners · Accepted Answer · 2014-01-21 10:04:40Z

0

As suggested in the comments, just change your email variable to:

var email = document.getElementById('email').value;

then just push it to your emailArray

EDIT

You'll need to rename the ID of your label. The reason it's currently not working is because the value being returned is that of the first element with the id of email (which is your label, and undefined).

Here's a Fiddle

edited Jan 21, 2014 at 10:04

answered Jan 21, 2014 at 9:41

monners

5,3422 gold badges31 silver badges47 bronze badges

1 Comment

Kane Over a year ago

I tried this but still no output to the console? not even any errors.

vooD · Accepted Answer · 2014-01-21 10:27:58Z

-1

I would propose two improvements to your code:

Put your javascript right after the <form> element in order to be sure that dom element exist in the document
Attach click handler using addEventListener method. Read more here.
Email:
var emailArray = []; function signup(){ var email = document.getElementById('email').value; emailArray.push(email); alert('You have now stored your email address'); window.open('http://google.com'); console.log(emailArray[0]); return false; } document.getElementById("submit").addEventHandler('click', signup, false);

edited Jan 21, 2014 at 10:27

answered Jan 21, 2014 at 9:43

vooD

2,9212 gold badges26 silver badges34 bronze badges

Collectives™ on Stack Overflow

Simple HTML form with javascript function

6 Answers 6

3 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related