Getting unexpected result with jquery ajax post method from php script

Question

This is my form from which i am expecting post results in my div id="response"

<!DOCTYPE html>
<html>
<head>
<title>AJAX POST</title>
<script src="jquery.js"></script>
<script>
    $(document).ready(function(){
        $('input[name="submit"]').click(function(){
            var username=$('input[name="username"]').attr("value");
            var password=$('input[name="password"]').attr("value");
            var data1=encodeURIComponent(username);
            var data2=encodeURIComponent(password);
            $.post("response.php",{username:data1,password:data2},function(data){
            $("#form").hide();
            $("#response").text(data);
            });
        });
    });
</script>
</head>
<body>
<div id="form">
<form action="response.php" method="post">
<input type="text" name="username" value=""/><br/>
<input type="password" name="password" value=""/><br/>
<input type="button" name="submit" value="submit"/>
</form>
</div>
<div id="response"></div>
</form>
</body>
</html>

This is my server side script

<?php
echo $_POST["username"]."<br/>";
echo $_POST["password"];
?>

After filling the form and clicking the submit button the response that i get is "<br/>" I don't understand this.Please explain.

.attr("value") gets/sets the default value of the input, not the current value. — user400654
– user400654, Commented Sep 12, 2013 at 15:06

Arun P Johny · Accepted Answer · 2013-09-12 15:03:50Z

4

To get the input value you need to use .val() not .attr('value'). .attr('value') will return the value of the attribute which is ''(empty string) here

var username=$('input[name="username"]').val();
var password=$('input[name="password"]').val();

answered Sep 12, 2013 at 15:03

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

Bhushan Over a year ago

still why is tit that i get "<br/>" in my result instead of line break in response?

Arun P Johny Over a year ago

because you have used .text() instead of .html()

Collectives™ on Stack Overflow

Getting unexpected result with jquery ajax post method from php script

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related