Jquery not printing var as string

Question

I am trying to do a basic ajax login but for the life of me I cant figure out why the uname and pword variables keep printing [object HTMLInputElement] when I do toString()

You can see a working example here

Just type something in and click login. It will hit the db, then print out username, password, then server response

   <script>

        function login() {

            var xmlhttp;
            var uname = "";
            var pword = "";
            var date;

            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }

            else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            uname = document.getElementById("username").toString();
            pword = document.getElementById("password").toString();
            date = new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString();
            xmlhttp.open("GET", "login.php?uname=" + uname.toString() + "&pword=" + pword.toString() + "&date=" + date, true);
            xmlhttp.send();

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("response").innerHTML = uname.toString() + "<br/>" + pword.toString() + "<br/>" + date + "<br/>" + xmlhttp.responseText;
                }
            }

        }
    </script>

This is the HTML Code

   <body>
      <center>
            <div style="align-content:center">
                <form>                
                    <br />
                    <br />
                    <br />
                    <br />
                    <h1 style="font-family:'Microsoft Yi Baiti'; font-size:40px">Ajax test Site</h1>
                    <br />       
                    <label>Username</label>
                    <br />
                    <input type="text" id="username" name="username" style="width:190px"/>
                    <br />
                    <label>Password</label>
                    <br />
                    <input type="password" id="password" name="password"style="width:190px"/>
                    <br />
                    <label id="tryAgainText" style="color:red; visibility:hidden">Username or Password incorrect</label>
                    <br />
                    <input onclick="login()" type="button" name="submit"  value="Login" style="width:216px; margin-left: 0px;"/>
                </form>
                <p id="response">This is the response field</p>
             </div>
       </center>
    </body>

First, it doesn't look like you are using jQuery. Second, since you are using straight javascript, [see this answer)](http://stackoverflow.com/questions/11563638/javascript-get-input-text-value) — miah, Aug 18 '13 at 13:39

score 2 · Answer 1 · answered Aug 18 '13 at 13:39

You are selecting the html elements in place of the value present in it. It should be this

uname = document.getElementById("username").value.toString();
pword = document.getElementById("password").value.toString();

score 2 · Answer 2 · answered Aug 18 '13 at 13:42

you need to select the value in place of the html element.

You need to use .value for it.

<script>

        function login() {

            var xmlhttp;
            var uname = "";
            var pword = "";
            var date;

            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }

            else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            uname = document.getElementById("username").value.toString();
            pword = document.getElementById("password").value.toString();
            date = new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString();
            xmlhttp.open("GET", "login.php?uname=" + uname.toString() + "&pword=" + pword.toString() + "&date=" + date, true);
            xmlhttp.send();

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("response").innerHTML = uname.toString() + "<br/>" + pword.toString() + "<br/>" + date + "<br/>" + xmlhttp.responseText;
                }
            }

        }
    </script>

Achrome · Answer 3 · 2013-08-18T13:54:02.933

1

You have to use .value instead of .toString(). .toString() only tries to convert an Object into a string representation.

var uname = document.getElementById("username").value;
var pwd = document.getElementById("password").value;

An alternative to that is using FormData.

var formData = new FormData(document.forms[0]);
xmlHttp.send(formData);

edited Aug 18 '13 at 13:54

answered Aug 18 '13 at 13:41

Achrome

7,773
14
36
45

Jquery not printing var as string

3 Answers3