Using the below code i am getting the data from database(mysql) and displaying it in the textbox that is in the form of table(textbox inside the table data). Now I can edit the data(td) on browser(table) but the problem is updating it to database upon changing( onChange option ) data in that table and I want to display the updated data where i have edited. This i am trying to do in AJAX, PHP and MYSQL.Please do help me i am stuck here.Am i doing it in the right way?, I am a newbie. I dont want to use buttons to update.

edit.php

<html>
  <head>
    <script>


      function ajaxFunction(){
        var ajaxRequest;

        try{

          ajaxRequest = new XMLHttpRequest();
        }
        catch (e){
          alert("Something is wrong");
          return false;

        }

        ajaxRequest.onreadystatechange = function()
          {

            if(ajaxRequest.readyState == 4){

              var ajaxDisplay = document.getElementById('name');
              ajaxDisplay.innerHTML = ajaxRequest.responseText;


              var ajaxDisplay1 = document.getElementById('age');
              ajaxDisplay1.innerHTML = ajaxRequest.responseText;

            }
          }

          var id = document.getElementById('id').value;
        var name = document.getElementById('name').value;
        ;
        var age = document.getElementById('age').value;
        var queryString = "?id=" + id ;
        queryString +=  "&name=" + name + "&age=" + age;
        ajaxRequest.open("GET", "update.php" + queryString, true);
        ajaxRequest.send(null);


      }

      </script>

  </head>
  <body>

  <table>

      <tr>
        <th>
          ID
        </th>
      </th>
  <th>
    NAME
  </th>
  <th>
    AGE
  </th>
  <th>
  </th>
  </tr>

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

$query = "select * from person";

$sql = mysqli_query($conn,$query);

while($row = mysqli_fetch_array($sql))
{
?>

  <tr>

    <td>
      <input  name ="id" id="id"  type = "text" autocomplete="off" value=
      <?php echo $row['id'] ?>
      >
    </td>


    <td>
      <input  name="name" id="name"  type = "text" onChange = "ajaxFunction();" autocomplete="off" value=
      <?php echo $row['name'] ?>
      >
           </td>


           <td>
             <input  name ="age"  id="age" type = "text" onChange = "ajaxFunction();" autocomplete="off" value=
             <?php echo $row['age'] ?>
             >
           </td>
           <?php       
}       
?>

  </tr>
</table>
</body>

</html>




update.php

<?php
include('database.php');

$name = $age = $id ="";

if(isset($_GET['name']))
{$name=$_GET['name'];}

if(isset($_GET['age']))
{$age=$_GET['age'];}

if(isset($_GET['id']))
{$id=$_GET['id'];}


$query3 = "update person set name ='$name', age='$age' where id='$id'";

$sql1 = mysqli_query($conn,$query3);

if($sql1)

header('location:edit.php');

?>

Do help me ! Thank in advance.

These line of

if($sql1)
header('location:edit.php');

is the redirect function. Where this means that the ajaxRequest.responseText returns the html of your edit.php
My suggestion is that changing the codes into echo "success"; since the value is the inserted value, so we don't need to update the values into the field anymore and instead, we just need to add in another div with id='msg' and put the response into this div to show error or successful message echoed from update.php

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.