trying to insert a record in my DB using AJAX for the very first time. I have the following...

Form

 <form>
     <input type="text" id="salary" name="salary">
     <input type="button" onclick="insertSalary()">
 </form>

AJAX

<script type="text/javascript">

function insertSalary()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById('current-salary').innerHTML=xmlhttp.responseText;
    }
  };
xmlhttp.open("POST","insert_salary.php",true);
xmlhttp.send("salary=" + document.getElementById("salary").value);
}

</script>

PHP

$uid = $_SESSION['oauth_id'];      
$monthly_ine = mysql_real_escape_string($_POST['salary']);

#Insert a new Record
$query = mysql_query("INSERT INTO `ine` (user_id, monthly_ine) VALUES ($uid, '$monthly_ine')") or die(mysql_error());
$result = mysql_fetch_array($query);
return $result;

Nowmy data is being inserted into the table BESIDES the 'salary' which is being inputted as '0'

Once inserted I also have a div 'current-salary' that should then be populated with there inputted value only it isnt, Can anybody help me to understand where im going wrong?

trying to insert a record in my DB using AJAX for the very first time. I have the following...

Form

 <form>
     <input type="text" id="salary" name="salary">
     <input type="button" onclick="insertSalary()">
 </form>

AJAX

<script type="text/javascript">

function insertSalary()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById('current-salary').innerHTML=xmlhttp.responseText;
    }
  };
xmlhttp.open("POST","insert_salary.php",true);
xmlhttp.send("salary=" + document.getElementById("salary").value);
}

</script>

PHP

$uid = $_SESSION['oauth_id'];      
$monthly_ine = mysql_real_escape_string($_POST['salary']);

#Insert a new Record
$query = mysql_query("INSERT INTO `ine` (user_id, monthly_ine) VALUES ($uid, '$monthly_ine')") or die(mysql_error());
$result = mysql_fetch_array($query);
return $result;

Nowmy data is being inserted into the table BESIDES the 'salary' which is being inputted as '0'

Once inserted I also have a div 'current-salary' that should then be populated with there inputted value only it isnt, Can anybody help me to understand where im going wrong?

• php
• javascript
• mysql
• ajax

• Can you debug it in firebug or something and see if salary is being properly passed to your php? – rwilliams Commented Apr 12, 2012 at 19:16

1 Answer 1

If you want to save your self a lot of time, effort, and heartache, use the jquery library for your ajax requests. You can download it at http://jquery./

After adding a reference(Script tag) to the jquery script your javascript for the ajax request would bee:

function insertSalary()
{
    var salary = $("#salary").val();
    $.post('insert_salary.php', {salary: salary}, function(data) 
    {
        $("#current-salary").html(data); 
    });
}

Also keep in mind that using "insert_salary.php" as the url means it is a relative path and must be in the folder of the current running script.

Your php script needs to echo whatever you would like to be injected into your current-salary tag also.