How to print user input from HTML form using javaScript

Question

All,

I feel like this question has been asked in many ways, and answered in just as many so I apologize. I am trying to take user input via HTML forms, and print the output back to the screen though a javaScript function.

<form id="loginInfo" >


 <input id="userName" type="text" name="user" size="40" placeholder='Username' />

 <input id="loginButton" type="image" value="submit" src="\Images\login.png" onclick="loginButtonClick()" alt="submit" height="26" />

<script>

    var username = document.forms.loginInfo.userName.value;

    function loginButtonClick() {
        alert(username);
    }
</script>

I think my issue lies in the fact that my button is an image, and I may be doing something wrong in that arena. Any help would be appreciated.

The problem is that the var username = ... runs as soon as the page loads and never again. If you move that line into the function you will get a better result. — HJ05
– HJ05, Commented Jun 6, 2014 at 20:20

CMPS · Accepted Answer · 2014-06-06 20:19:43Z

1

Just put var username = document.forms.loginInfo.userName.value; inside loginButtonClick() function

So the final script will be:

<script>
    function loginButtonClick() {
        var username = document.forms.loginInfo.userName.value;
        alert(username);
    }
</script>

answered Jun 6, 2014 at 20:19

CMPS

7,7874 gold badges32 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

How to print user input from HTML form using javaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related