jquery not getting result from inputs

Question

Why I am not getting values from inputs? I checked it with alert box and there's no values. I do not see any wrong codes or maybe i might have forgotten something to write on my code

<div class="login" align="left">
                        <input type="input" class="user" placeholder="Username"/>
                        <input type="password" class="pass" placeholder="Password"/>
                        <button name="login" class="btnLogin" id="btnLogin">LOGIN</button>
                        <div class="register"><a href="register.php" class="reg">Register Now!</a></div>
                    </div>



    <script>
$(document).ready(function(){


    $(document).on('click','#btnLogin',function(){

        var username = $('.user').text();
        var password = $('.pass').text();
        alert(username); //------------>this alert box is null
        $.ajax ({
            url:"login_func.php",  
            method:"POST",  
            data:{username:username, password:password},  
            dataType:"text", 
            success:function(data){
                alert(data); 
            }
        });
    });

});
        </script>
    </body>

instead of text ...use val()

Geeky
– Geeky

2016-12-03 06:11:39 +00:00
Commented Dec 3, 2016 at 6:11 — Geeky
– Geeky, Commented Dec 3, 2016 at 6:11

Rajshekar Reddy · Accepted Answer · 2016-12-03 06:12:13Z

1

Use val() and not text()

$('.user').val();

For all kind of input elements , select and textarea you use val() to get its value. And rest elements you use text() to get the inner text of those elements

answered Dec 3, 2016 at 6:12

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

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

Comments

Kumar_Vikas · Accepted Answer · 2016-12-03 06:12:27Z

1

Value from input fields are normally accessed through .val.

$(document).ready(function(){
    $(document).on('click','#btnLogin',function(){

        var username = $('.user').val();
        var password = $('.pass').val();
        alert(username); //------------>this alert box is null
        $.ajax ({
            url:"login_func.php",  
            method:"POST",  
            data:{username:username, password:password},  
            dataType:"text", 
            success:function(data){
                alert(data); 
            }
        });
    });

});

answered Dec 3, 2016 at 6:12

Kumar_Vikas

8457 silver badges16 bronze badges

Comments

Shubham Khatri · Accepted Answer · 2016-12-03 06:12:34Z

You need to use .val() instead of .text() since you are trying to get a valuye of the input field. .text() should be used for a text element like <div>, <p> etc.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body><div class="login" align="left">
                        <input type="input" class="user" placeholder="Username"/>
                        <input type="password" class="pass" placeholder="Password"/>
                        <button name="login" class="btnLogin" id="btnLogin">LOGIN</button>
                        <div class="register"><a href="register.php" class="reg">Register Now!</a></div>
                    </div>



    <script>
$(document).ready(function(){


    $(document).on('click','#btnLogin',function(){

        var username = $('.user').val();
        var password = $('.pass').val();
        alert(username); //------------>this alert box is null
        $.ajax ({
            url:"login_func.php",  
            method:"POST",  
            data:{username:username, password:password},  
            dataType:"text", 
            success:function(data){
                alert(data); 
            }
        });
    });

});
        </script>
    </body>

Geeky · Accepted Answer · 2016-12-03 06:13:26Z

Input does not have to be retrieved by text but by val().

check this snippet.

$(document).ready(function() {


  $(document).on('click', '#btnLogin', function() {

    var username = $('.user').val();
    var password = $('.pass').val();
   
    alert(username); //------------>this alert box is null
    $.ajax({
      url: "login_func.php",
      method: "POST",
      data: {
        username: username,
        password: password
      },
      dataType: "text",
      success: function(data) {
        alert(data);
      }
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="login" align="left">
  <input type="input" class="user" placeholder="Username" />
  <input type="password" class="pass" placeholder="Password" />
  <button name="login" class="btnLogin" id="btnLogin">LOGIN</button>
  <div class="register"><a href="register.php" class="reg">Register Now!</a>
  </div>
</div>



<script>
</script>
</body>

Hope it helps

Chetan Mehta · Accepted Answer · 2016-12-03 06:30:42Z

1

use .val() instead of .text() to retrieve values. and change the input type of user from input to text.i.e. <input type="text" class="user" placeholder="Username"/>

answered Dec 3, 2016 at 6:30

Chetan Mehta

3493 silver badges12 bronze badges

Comments

Satendra · Accepted Answer · 2016-12-03 06:16:59Z

Change your input type to text for username and use val() instead text()

$(document).ready(function(){


    $(document).on('click','#btnLogin',function(){

        var username = $('.user').val(); //here you need to use val()
        var password = $('.pass').val(); //here you need to use val()
        alert(username+ ", "+ password); //------------>this alert box is null
        $.ajax ({
            url:"login_func.php",  
            method:"POST",  
            data:{username:username, password:password},  
            dataType:"text", 
            success:function(data){
                alert(data); 
            }
        });
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="login" align="left">
    <input type="text" class="user" placeholder="Username"/> <!--here you need to add type text-->
    <input type="password" class="pass" placeholder="Password"/>
    <button name="login" class="btnLogin" id="btnLogin">LOGIN</button>
    <div class="register"><a href="register.php" class="reg">Register Now!</a></div>
</div>

Collectives™ on Stack Overflow

jquery not getting result from inputs

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related