CODEWITHSUNDEEP
jquery
stingMantis
stingMantis

Reputation: 340

JQuery: unable to retrieve username and password

For some reason i can't seem to get the username and password that is being entered. Here is my code:

//html

<div class="loginForm"> 
<div id="username">
  <input type="email" placeholder="email address"  required />
</div>

 <div id="password">
    <input type="password" placeholder="password" required />
 </div>

 <div id="loginButton"><div id="loginText"><span>Login</span></div></div>

javascript

$("#loginButton").click(function(){
var usr = $("#username").val();
var password = $("#password").val();
alert("user=" + usr + " and password=" + password);
});

pretty straight forward but for some reason it always comes up blank.

i created a jsfiddle here: http://jsfiddle.net/pr1yLdLt/2/

Upvotes: 0

Views: 55

Answers (3)

Jackie Birds
Jackie Birds

Reputation: 61


var usr = $("#username").val();

it's point to a div, a div with id="username", you need to point to <input> so write this:

<div class="loginForm">
    <div>    
        <input id="username" name="username" type="email" placeholder="email address"  required />  
    </div> 
    <div> 
        <input id="password" name="password" type="password" placeholder="password" required />   
    </div> 
    <div id="loginButton"><div id="loginText"><span>Login To Meecal</span></div>
</div>

Upvotes: 1

Ankit Chaudhary
Ankit Chaudhary

Reputation: 4089

You should give the id to input instead of div

<div class="loginForm"> 
    <div >
      <input id="username" type="email" placeholder="email address"  required />
    </div>

     <div >
        <input id="password" type="password" placeholder="password" required />
     </div>

     <div id="loginButton"><div id="loginText"><span>Login To Meecal</span></div></div>

Upvotes: 1

tabz100
tabz100

Reputation: 1473

You need to do:

$("#loginButton").click(function(){
   //val() is for inputs and the like and your selector is not getting the input
   var usr = $("#username").find('input').val();
   var password = $("#password").find('input').val();
   alert("user=" + usr + " and password=" + password);
});

Upvotes: 1

Related Questions