Question

I am a beginner and I am trying to learn how to add, delete, retrieve and update a database using PHP and Ajax.

At this time I have accomplished how to retrieve and delete so I am trying to update some values. For retrieving data, I just pass the selected ID I want, so I can retrieve the data. Same goes for delete, I just assign which ID I want to delete. Now to update there are more things going on, its where I cant find the solution.

This is my Form:

<form onsubmit="updateuser()">

   ID Number: <input name="ud_id"><br>
   First Name: <input type="text" name="ud_first"><br>
   Last Name: <input type="text" name="ud_last"><br>

<input type="Submit" value="Update">
</form>

and this is my javascript:

    function updateuser() {
    var str = $('.ud_id').attr('value');

   if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
   }
   xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         document.getElementById("txtuser").innerHTML = xmlhttp.responseText;
      }
   }
   xmlhttp.open("GET", "ajaxupdate.php?q=" + str, true);
   xmlhttp.send();
}

I think the problem comes because my form ajaxupdate.php file doesn’t retrieve the First and Last name values from the form. It’s like I am not passing them (?).

Here is my ajaxupdate.php file:

<?php   include("connection.php");

$id=$_GET['ud_id'];
$first=$_GET['ud_first'];
$last=$_GET['ud_last'];


$query="UPDATE contacts SET first='$first', last='$last' WHERE id='$id'";


mysql_query($query);
mysql_close();
?>

What I’m I doing wrong so that I can update the value first and last of database for a specific ID ?

Answer 1

Try this code

<script type="text/javascript">
function updateuser() {
    var ud_id = document.getElementById('ud_id').value;
    var ud_first = document.getElementById('ud_first').value;
    var ud_last = document.getElementById('ud_last').value;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtuser").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "ajaxupdate.php?ud_id=" + ud_id + "&ud_first="+ud_first+"&ud_last="+ud_last, true);
    xmlhttp.send();
}
</script>

HTML

<form name="test">

   ID Number: <input name="ud_id"><br>
   First Name: <input type="text" name="ud_first"><br>
   Last Name: <input type="text" name="ud_last"><br>

<input type="button" onClick="updateuser()" value="Update">
</form>