如何从输入框获取值

Question

I have this piece of code and I am not sure how to get the value from an input box. This is my html code:

        <div id = "login">
            <p>User <input type = "text" id = "username"></p>
            <p>Password <input type = "password" id = "password"></p>
            <button onclick = "login(?,?)">Log In</button>  
        </div>

This is my Javascript code:

function login(name, password){
    alert('Your username is ' + name + ' and your password is ' + password);
};

How do you get the value from an input box? Thanks in advance.

Answer 1

Javascript:

function login(){

    name = document.getElementById('username');
    password = document.getElementById('password');
    alert('Your username is ' + name + ' and your password is ' + password);
};

in HTML :

<button onclick = "login()">Log In</button>  

Answer 2

Edited: thanks to @sajalsuraj

<div id = "login">
    <p>User <input type = "text" id = "username"></p>
    <p>Password <input type = "password" id = "password"></p>
    <button onclick = "login()">Log In</button>  
</div>


function login(){
    var name = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    alert('Your username is ' + name + ' and your password is ' + password);
};

Answer 3

<div id = "login">
            <p>User <input type = "text" id = "username"></p>
            <p>Password <input type = "password" id = "password"></p>
            <button onclick = "login(document.getElementById('username').value, document.getElementById('password').value)">Log In</button>  
        </div>

Answer 4

Modifying @smoqadam answer,

function login(name, password){
   alert('Your username is ' + name + ' and your password is ' + password);
};

 name = document.getElementById('username').value;
 password = document.getElementById('password').value;
 login(name,password);

If using Jquery,

 function login(){
    $name = $('#username').val();
    $pass = $('#password').val();
    alert('UserName: '+$name+' Password: '+$pass);
  }

Answer 5

I would recommend not to bind to events this way. Here's a better example of the bare minimum you are trying to do. I would also suggest using native html form functionality. Consider reading this: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements

 // add event listener to loginButton with handler, that will get username and password from html document.getElementById('loginButton').addEventListener('click', function() { var username = document.getElementById('username').value; var password = document.getElementById('password').value; login(username, password); }); // function to process login. function login (username, password) { alert('username ' + username + '; password ' + password); } 

 <div> <p>User <input type="text" id="username" /></p> <p>Password <input type="password" id="password" /></p> <button id="loginButton">Log In</button> </div> 

Answer 6

HTML :

<div id="login">
  <p>User <input type="text" id="username"></p>
  <p>Password <input type="password" id="password"></p>
  <button onclick="getData()">Log In</button>  
</div>

Javascript code :

function getData() {
name = document.getElementById('username');
password = document.getElementById('password');
getLogin(name,password);
}    

function getLogin(name, password){
    Console.log('Your username is ' + name + ' and your password is ' + password);
};

Answer 7

A better way would be to not include JS code inside html code , instead just reference the login button from your js code and add an event to it. So you get advantage of caching later on, here is an example:

<!-- HTML markup -->

<div id = "login">
    <p>User <input type = "text" id = "username"></p>
    <p>Password <input type = "password" id = "password"></p>
    <button>Log In</button>  
</div>


<!-- method1 using script tag -->

<script>
  var loginButton = document.querySelector('#login button');
  var username,password;

  loginButton.addEventListener('click',function(){
      username = document.getElementById('username').value;
      password = document.getElementById('password').value;

      alert('username: ' + username + '\n password : ' + password);
  });

</script>


<!-- 
     method2 include a login.js script(containing the previous js code)    
     to benefit from caching when refreshing or visiting 
     the page in the next time 
-->

<script src="login.js"></script>

Answer 8

You have to get value of html element like this

 function login(name, password){ var name = document.getElementById('username').value; var password = document.getElementById('password').value; alert('Your username is ' + name + ' and your password is ' + password); }; 

 #login{ width:100%; padding:10px 50px; } label{ width:70px; display:inline-block; } 

 <div id="login"> <p><label>User</label> <input type="text" id="username"></p> <p><label>Password</label> <input type = "password" id = "password"></p> <button onclick="login();">Log In</button> </div>