2013-08-18 2 views
1

Я пытаюсь сделать основной АЯКС логин, но для жизни меня я не могу понять, почему uname и pword переменные продолжают печатать [object HTMLInputElement], когда я ToString()Jquery не печатает вар в виде строки

You can see a working example here

Просто введите что-нибудь и нажмите кнопку «Войти». Это ударит по БД, а затем распечатать имя пользователя, пароль, то ответ сервера

<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> 

Это HTML код

<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> 
+0

Во-первых, это не похоже, что вы используете jQuery. Во-вторых, поскольку вы используете прямой javascript, [см. Этот ответ]] (http://stackoverflow.com/questions/11563638/javascript-get-input-text-value) – miah

ответ

2

Вы выбираете HTML-элементы вместо значения, присутствующего в ней. Должно быть это

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

Удивительная благодарность за быстрый ответ –

1

Вы должны использовать .value вместо .toString(). .toString() пытается преобразовать объект в строковое представление.

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

Альтернативой этому является FormData.

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

необходимо выбрать значение вместо элемента html.

Для этого вам нужно использовать .value.

<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>