Getting a null value to database when AJAX is used

Question

I got this registration code which was working fine but I decided to add AJAX to make it more dynamic but when I run it, my PHP code was saving null value to database.

This is what I know so far: whenever a user writes information in signup page it goes to AJAX and the ajax pass it along to php and then php saves the info into database and it echo a message and then it goes to ajax and then it displays the message. All of this works the only problem is that my php code is saving null value no matter what i write in signup page.

and i think this is the code thats not working properly but i just dont know the other way

  var username = encodeURIComponent(document.getElementById('username').value);
  var password = encodeURIComponent(document.getElementById('password').value);
  var url = "signip_parse.php?username="+username+"&password="+password;

the following is rest of my code. this is the page were user puts information and its saved as signup.php

<head>
<script src = "ajax.js"></script>
<div id="content">
</head>
<body>
<form action="signip_parse.php" method="post" id="registration_form">
<p>Name <input type="text" name="username" id = "username"/></p>
<p>Password <input type="password" name="password" id = "password"/></p>
<p><input type = "button" value="sign up" id="submit" onclick = "hello()"/>
<input type="button" value="Back" onclick="return back()"/></p>
</form>
<div id="ack"><p>1</p></div>
</div>
</body>

and this is the ajax code that I got it from w3school ajax example and i saved it as ajax.js

function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xmlhttp;
}

  var HTTP = loadXMLDoc();

function hello(){

  var username = encodeURIComponent(document.getElementById('username').value);
  var password = encodeURIComponent(document.getElementById('password').value);
  var url = "signip_parse.php?username="+username+"&password="+password;
HTTP.onreadystatechange=function()
  {
  if (HTTP.readyState==4 && HTTP.status==200)
    {
    document.getElementById("ack").innerHTML=HTTP.responseText;
    }
  }
HTTP.open("POST", url ,true);
HTTP.send();
}

and last this is the signip_parse.php where i managed to spell signup wrong

<?php
include_once("connect.php");
$user = mysql_real_escape_string( $_POST["username"]);
$password = mysql_real_escape_string( md5 ($_POST["password"]));

$sql = "INSERT INTO users (username, password) VALUES ('$user','$password')";

if(mysql_query($sql)){
    echo "You have been successfully registered";
}
else{
    echo "Something went wrong try again";
}
?>

Any help would be great. thanks guys and yes i know md5 is broken but this is just a demo and intend to used something else.

You are sending your data in your url, which is available using `$_GET`, so there is nothing in your `$_POST` — Sean, Dec 10 '14 at 00:32
If you want to send it using `POST`, then you need to pass the string in `.send()` -> `HTTP.open("POST", "signip_parse.php" ,true); HTTP.send("username="+username+"&password="+password);` — Sean, Dec 10 '14 at 00:42

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

Since you're sending a request as post, its important to add this on your XMLHttpRequest object:

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

And just combine them inside, no need to separate some parts. It would look something like this:

<script type="text/javascript">
function hello() {

    var xmlhttp = new XMLHttpRequest();

    var username = encodeURIComponent(document.getElementById('username').value);
    var password = encodeURIComponent(document.getElementById('password').value);


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

    xmlhttp.open("POST", 'signip_parse.php', true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("username="+username+"&password="+password);
}
</script>

Here's what it would look like

Obligatory Note:

Please, don't use mysql_* functions in new code. They are no longer maintained and are officially deprecated. See the red box? Learn about prepared statements instead, and use PDO or MySQLi - this article will help you decide which. If you choose PDO, here is a good tutorial.

_{Ref: https://stackoverflow.com/a/12860140/3859027}

You should consider also (if you're using PHP 5.5 or greater) to use PHP's native password hashing and replace that md5() instead. If you're below v5.5 then you could use the its compatibility pack

Thanks for the advice and i know i should be using mysqli or pdo but i have to use mysql for this and im running old version of xampp that supports mysql. — WESTKINz, Dec 10 '14 at 02:08
@user3250974 and not just by using mysqli or PDO, you need to utilize prepared statements as well. anyways im glad this helped — Kevin, Dec 10 '14 at 02:26

Getting a null value to database when AJAX is used

1 Answers1