Sending POST with javascript

Question

What is wrong with this code? Trying to send data over POST w/ javascript to a PHP page but it isn't sending anything, nothing comes across in the headers $_POST contains nothing.

HTML:

<form method="POST" id="userSub" class="userSub">
<table>
    <tr><td colspan="2">Sign In Here&nbsp;</td></tr>
    <tr><td>Username:</td><td><input name="username" type="text" id="username"  /></td></tr>
    <tr><td>Password:</td><td><input name="pwd" type="text" id="pwd" /></td></tr>
    <tr><td><input name="submit" type="submit" value="submit" id="submit" onclick="loginSub()" /></td></tr>
    <tr><td colspan="2">Need a Username? <a href="signup.html">Sign Up</a></td></tr>
</table>
</form>

Javascript:

function loginSub(){
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("rssnav2").innerHTML=xmlhttp.responseText;
    }
  }

xmlhttp.open("POST","PHP/login.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();

}

PHP doesn't do anything special right now, just seeing if I can pass the post information to it:

<?php
echo "test";
$username=$_POST['username'];
echo $username;
?>

It is IS echoing that 'test' line to the correct so it is communicating w/ the PHP page. Also, I know that I still have the pwd input in "text" type and I know its probably a good idea to hash a password before sending it to the server.

Thanks for your help, everyone!

getElementById("rssnav2") ?? i dont see any html with such id.. — Rahul, Aug 17 '13 at 23:42

score 1 · Answer 1 · answered Aug 17 '13 at 23:43

1

You are not sending parameters in your XMLHttpRequest. Something like:

var params = "username=user&password=something";
xmlhttp.open("POST", "PHP/login.php", true);

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");

xmlhttp.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        document.getElementById("rssnav2").innerHTML = xmlhttp.responseText;
    }
}
xmlhttp.send(params);

answered Aug 17 '13 at 23:43

pajaja

2,164
4
25
33

1

Be careful with setting `Content-Length` to the `String`'s `length`. JavaScript `String`s are UTF-16 encoded, but will be sent UTF-8 encoded. The lengths will match if the string consists entirely of ASCII characters. But, beyond that, you'll need to get the UTF-8 byte-length for the header. http://stackoverflow.com/a/5515960 – Jonathan Lonowski Aug 18 '13 at 00:06

Jonathan Lonowski · Accepted Answer · 2013-08-18T00:12:40.013

The xmlhttp doesn't actually have any knowledge of the <form>, so it won't send any data automatically.

You'll instead have to gather the <form>'s data yourself, format it as URL-encoded, and .send() it along with the request.

function loginSub(){
    var user = document.getElementById('username');
    var pass = document.getElementById('pwd');

    var postData = [
        encodeURIComponent(user.name) + '=' + encodeURIComponent(user.value),
        encodeURIComponent(pass.name) + '=' + encodeURIComponent(pass.value)
    ].join('&');

    // ...

    xmlhttp.send(postData);
}

For more details, you may want to read through MDN's Using XMLHttpRequest, especially the sections on Using nothing but pure AJAX.

It includes a generalized solution for gathering <form> data in A little vanilla framework, which you could use with:

<form method="POST" action="PHP/login.php" onsubmit="AJAXSubmit(this); return false;">

Side note:

Your <form> is likely still submitting as well and may interrupt the Ajax request. You can prevent this by cancelling its onsubmit event:

<form method="POST" id="userSub" class="userSub" onsubmit="return false">

Also, there are more ways to submit a <form> than clicking the type="submit". For example, most browsers allow submitting by simply tapping Enter while typing in a type="text" or type="password". And, doing so won't typically imitate a click of the type="submit".

So, you'll want to at least consider moving the call out of the onclick and into the onsubmit:

<form method="POST" id="userSub" class="userSub" onsubmit="loginSub(); return false;">

Awesome answer, worked well! Thanks for including those resources! — James Y, Aug 18 '13 at 00:04

score 0 · Answer 3 · answered Aug 17 '13 at 23:46

0

Try changing

xmlhttp.send();

to

xmlhttp.send('username='+document.getElementById('username').value);

Of course you will need to put in validation logic.

answered Aug 17 '13 at 23:46

vince

21
1

score 0 · Answer 4 · answered Aug 17 '13 at 23:49

function loginSub()
{
var xmlhttp = false;
if(window.XMLHttpRequest)
{
    if(typeof XMLHttpRequest != 'undefined')
    {
        try
        {
            return xmlhttp= new XMLHttpRequest();
        }

        catch(e)
        {
            return xmlhttp= false;
        }
    }

    else if( window.ActiveXObject)
    {
        try
        {
            return xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch(e)
        {
            try
            {
                return xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch(e)
            {
                return xmlhttp = false;
            }
        }
    }
}
var xmlhttp=false;
xmlhttp=createobject();
if(xmlhttp)
{   
    xmlhttp.onreadystatechange = function()
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById('rssnav2').innerHTML = xmlhttp.responseText;
        }
    }
    parameter=username+'='+document.getElementById('usernname').value;
    xmlhttp.open('POST','PHP/login.php',true);
    xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xmlhttp.send(parameter);
}

}

this will solve your problem

Sending POST with javascript

4 Answers4