title: JQuery .ajax() post to php database query
body: <p>I see a lot of questions like this, however, I am having trouble even getting into the .ajax() function. I had a previous issue resolved here: <a href="https://stackoverflow.com/questions/18805918/accessing-clicked-cell-instead-of-all-cells-using-jquery-and-ajax/18805970?noredirect=1#comment27735805_18805970">Accessing clicked cell instead of all cells using JQuery and Ajax</a>
   My follow-up was never responded to, though. Instead of posting code again I'll leave it there (unless told otherwise). Can anyway help me figure out 1: get the <code>var field</code> and <code>var text</code> to reflect my changes. and 2: how to access the <code>id</code> of the <code>tr</code> since it's a variable. How do I set that inside .parent()? Thanks.</p>
  
  <p>EDIT:</p>
  
  <p>Here is my script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function()
      {
          $(".edit_td").click(function()
          {
              $(this).children(".text").hide();
              $(this).children(".editbox").show();
  
          }).change(function()
              {
                  alert("working");
                  var id=$(this).parent();
                  var field=$("#input_"+ id).val();
                  var text=$(this).children(".editbox").val();
  
                  var dataString = 'id='+ id +'&amp;field='+ field +'&amp;text='+ text;
                  //$("#first_"+ID).html('&lt;img src="load.gif" /&gt;'); // Loading image
  
                  if(input != text)
                  {
                      $.ajax({
                      type: "POST",
                      url: "table_edit_ajax.php",
                      data: dataString,
                      cache: false,
                      success: function(html)
                      {
                          $("#first_"+ID).html(first);
                          $("#last_"+ID).html(last);
                      }
                      });
                  }
                  else
                  {
                      alert('Enter something.');
                  }
              });
  
          // Edit input box click action
          $(".editbox").mouseup(function() 
          {
              return false
          });
  
          // Outside click action
          $(document).mouseup(function()
          {
              $(".editbox").hide();
              $(".text").show();
          });
  
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>Here is my php to display the table:</p>
  
  <pre><code>public function displayTable($table)
  {
    //connect to DB
    $con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
  
  echo "&lt;table id='table' border='1'&gt;";   //start an HTML table
  
  $dbtable = $table;
  $fields =array();
  $result = mysqli_query($con, "SHOW COLUMNS FROM ".$dbtable);
  
  //fill fields array with fields from table in database
  while ($x = mysqli_fetch_assoc($result))
  {
      $fields[] = $x['Field'];
  }
  
  $fieldsnum = count($fields);    //number of fields in array
  
  //create table header from dbtable fields
  foreach ($fields as $f)
  {
      echo "&lt;th&gt;".$f."&lt;/th&gt;";
  }
  
  //create table rows from dbtable rows
  $result = mysqli_query($con, "SELECT * FROM ".$dbtable);
  
  while ($row = mysqli_fetch_array($result))
  {
      $rowid = $row[$fields[0]];
      echo "&lt;tr class='edit_tr' id='".$rowid."'&gt;";
      foreach ($fields as $f) 
      { 
          echo "&lt;td class='edit_td'&gt;&lt;span id='span_".$rowid."' class='text'&gt;".$row[$f]."&lt;/span&gt;
          &lt;input type='text' value='".$row[$f]."' class='editbox' id='input_".$rowid."'/&gt; &lt;/td&gt;"; 
      }
      $rowid++;
      echo "&lt;/tr&gt;";
  }
  
  echo "&lt;/table&gt;";    //close the HTML table
  
  //close connection
  mysqli_close($con);
  </code></pre>
  
  <p>}</p>
  
  <p>I am not even sure I'm getting into my <code>.change()</code> function, but once I do I'd like to set <code>var id</code> to the row id which corresponds to my database id (which will allow me to run my update query by my primary key). The next thing id like to do is set <code>var field</code> to the column header of the <code>td</code> selected so I know what field from my database to select. The next thing i'd like is my <code>var text</code> to reflect the changed text from the textbox to send to the update query. </p>
  
  <p>Now, I'd like to be able to send that to table_edit_ajax.php as a <code>POST</code> and run my update query. I am just really confused as to how to do all of that. I am very new to ajax and javascript, obviously. </p>
  
  <p>EDIT: file: table_edit_ajax.php</p>
  
  <pre><code>&lt;?php
  //connect to DB
  $con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
  
  echo 'in table_edit';
  
  $id = mysqli_escape_String($con, $_POST['id']);
  $table = "owners";
  $field = $_POST['field'];
  $text = mysqli_escape_String($con, $_POST['text']);
  $query = "UPDATE owners SET ".$field."='".$text."' WHERE id = '".$id."'";
  mysqli_query($con, $query);
  
  //close connection
  mysqli_close($con);
  
  ?&gt;
  </code></pre>