Getting text from HTML form and pass to JavaScript function [duplicate]

Question

I am learning HTML/JavaScript and am writing a simple site to test what I've learned so far. I am trying to get the firstname and lastname entered by the user from an input form and then pass these names to a JavaScript function but for some reason, all I see in my popup window is:

Hello [object HTMLInputElement]

This is my html code:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Daynesh's Test Site</title>
    <script>
        function addUser(first, last)
        {
        alert("Hello " + first);
        }
    </script>
    </head> 
    <body>
    <h1>Registered Users</h1>
    <p>Enter user name:</p>
    <form>First name: <input type="text" name="firstname">
      Last name: <input type="text" name="lastname">
        <input type="submit" value="Submit" onclick="addUser(firstname,'right')">
    </form>
    <hr>
    <h3>Output</h3>
    </body>
    </html>

Can someone please explain what I'm doing wrong? I'm sure its something very simple that I'm not understanding here.

Thanks in advance!

Bahaa Odeh · Accepted Answer · 2013-05-25 00:59:21Z

5

in your code

onclick="addUser(firstname,'right')"

firstname is nothing you don't define it before so you should define it in javascript or get value from input directly this your code after fix

  <!DOCTYPE html>
<html>
<head>
    <title>Daynesh's Test Site</title>
<script>
    function addUser(first, last)
    {
    alert("Hello " + first);
    }
</script>
</head> 
<body>
<h1>Registered Users</h1>
<p>Enter user name:</p>
<form>First name: <input type="text" name="firstname" id="firstname">
  Last name: <input type="text" name="lastname">
    <input type="submit" value="Submit" onclick="addUser(document.getElementById('firstname').value,'right')">
</form>
<hr>
<h3>Output</h3>
</body>
</html>

i hope my answer help you

answered May 25, 2013 at 0:59

Bahaa Odeh

6031 gold badge8 silver badges16 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:33:51Z

2

document.getElementByName('firstname').value

See a more detailed answer at: JavaScript: how to get value of text input field?

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered May 25, 2013 at 0:55

Dan Anderson

4553 silver badges12 bronze badges

Collectives™ on Stack Overflow

Getting text from HTML form and pass to JavaScript function [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related