title: Update mysql table with php using ajax
body: <p>Here I create a table <a href="http://jsbin.com/OJAnaji/13/edit" rel="nofollow">http://jsbin.com/OJAnaji/13/edit</a> and DEMO: <a href="http://jsbin.com/OJAnaji/13" rel="nofollow">http://jsbin.com/OJAnaji/13</a></p>
  
  <p>So when users click on some row on table automaticly populate input fields with values from table into modal window. Modal window user open when click on button "Edit row". Now I need to know how I can update mysql table with columns: Name,Gender,Age,Donuts eaten. </p>
  
  <p>I create js ajax:</p>
  
  <pre><code>$("#edit").click(function() {
      //in here we can do the ajax after validating the field isn't empty.
      if($("#name").val()!="") {
          $.ajax({
              url: "update.php",
              type: "POST",
              async: true, 
              data: { Name:$("#name").val(), Gender:$("#gender").val(), Age:$("#age").val(), Donuts_eaten:$("#donuts_eaten").val()}, //your form data to post goes here as a json object
              dataType: "html",
  
              success: function(data) {
                  $('#output').html(data); 
                  drawVisualization();   
              },  
          });
      } else {
          //notify the user they need to enter data
      }
  });
  </code></pre>
  
  <p>HTML - modal window and button:</p>
  
  <pre><code>&lt;!-- Button trigger modal --&gt;
  &lt;button id="edit" class="btn btn-success disabled" type="button" data-toggle="modal" data-target="#myModal"&gt;
  Edit selected row&lt;/button&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title" id="myModalLabel"&gt;Add new row&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;div class="input-group"&gt;
    &lt;span class="input-group-addon"&gt;Name&lt;/span&gt;
    &lt;input type="text" value="" id="name" class="form-control" placeholder="Type name"&gt;
          &lt;/div&gt;&lt;/br&gt;
          &lt;div class="input-group"&gt;
    &lt;span class="input-group-addon"&gt;Gender&lt;/span&gt;
    &lt;input type="text" id="gender" class="form-control" placeholder="Gender?"&gt;
  &lt;/div&gt;&lt;/br&gt;
          &lt;div class="input-group"&gt;
    &lt;span class="input-group-addon"&gt;Age&lt;/span&gt;
    &lt;input type="text" id="age" class="form-control" placeholder="Number of age"&gt;
  &lt;/div&gt;&lt;/br&gt;
          &lt;div class="input-group"&gt;
    &lt;span class="input-group-addon"&gt;Donuts eaten&lt;/span&gt;
    &lt;input type="text" id="donuts_eaten" class="form-control" placeholder="Number of donuts eaten"&gt;
  &lt;/div&gt;&lt;/br&gt;
  
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /.modal-content --&gt;
    &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  
  <p>So how I can now update MySql database with php:</p>
  
  <p>so file update.php how must looks like:</p>
  
  <pre><code>&lt;?php
  $con = mysql_connect('localhost', 'gmaestro_agro', 'pass') or die('Error connecting to server');
  
  mysql_select_db('gmaestro_agro', $con); 
  
  //HOW I CAN UPDATE MYSQL DATABASE, WHAT I NEED TO ADD HERE?
  
  ?&gt;
  </code></pre>