title: Add a record to the database without refreshing
body: <p>I want to add a record dynamically.
  When I insert action = "add.php" for my form, the addition is accomplished by displaying a message after refreshing.
  I want to add this addition without refreshing dynamically.</p>
  
  <p>Also, for the ID of my games, I want that when I delete a record, for the ID to be decremented or removed.  So that, when I add a game again, it uses the next ID available, not keeps on incrementing, like it is happeneing with me now.</p>
  
  <p>If I take off add.php from action, nothing happens and the game isn't added. 
  My question is, where is this script broken? Or if add.php is not functioning right?</p>
  
  <p>Here is my index.php and add.php</p>
  
  <pre><code> &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
         "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
       &lt;title&gt;title&lt;/title&gt;
  &lt;/head&gt;
   &lt;body&gt;
   &lt;?php
  include("dbconfig.php");
  $sql = "SELECT * FROM games";
  $result = mysql_query($sql);
  while ($record = mysql_fetch_array($result)){
  
    echo "&lt;p class=\"p" .$record['ID']. "\"&gt;&lt;/br&gt; Game ID: " .$record['ID']. "&lt;/br&gt; Game Name: " .$record['Name'].
    "&lt;br /&gt; Game Type: ".$record['Type']. "&lt;br /&gt; Rating: ".$record['Rating']."&lt;br /&gt;  Year Released: ".$record['Release Year']."&lt;br /&gt; &lt;br /&gt;" ?&gt;
   &lt;a href="#" id="&lt;?php echo $record["ID"]; ?&gt;" class="deletebutton"&gt;&lt;img  src="trash.png" alt="delete"/&gt; &lt;/a&gt;&lt;/p&gt;
  &lt;?php
   }
  ?&gt;
  
   &lt;form name="add" id ="add" action=""  method="post"&gt;
   &lt;input class ="gameID" type="hidden" id="ID" name="ID" value = " ' .$record['ID'] . ' " /&gt;
   &lt;b&gt;Game Name: &lt;/b&gt; &lt;input type="text" id="name" name="name" size=70&gt;
   &lt;b&gt;Game Type:&lt;/b&gt; &lt;input type="text" id="type" name="type" size=40&gt;
   &lt;b&gt;Rating: &lt;/b&gt; &lt;input type="number"  id="score"  name="score" min="1.0" max="10.0"  step ="0.1"/&gt;
   &lt;b&gt;Year Released: &lt;/b&gt; &lt;input type="number"  min="1900" max="2011" id="Yreleased" name="Yreleased" value="1985" size=4&gt;
   &lt;p&gt;&lt;input type="submit" name="Submit" id = "Submit" value="Add Game" class = "add games"&gt;&lt;/p&gt;
   &lt;/form&gt;
  
   &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
   &lt;script type = "text/javascript"&gt;
    $(document).ready(function(){
  
          $("#add").submit(function(){
  
  
                          var name =    this['name'].value;
                          var type =    this['type'].value;
                          var rating =  this['score'].value;
                          var release = this['Yreleased'].value;
                          var dataString = 'name='+ name + '&amp;type=' + type + '&amp;rating=' + rating + '&amp;release=' + release;
  
                      if (name == '' || type == '' || rating == '' || release == ''){
                          alert("please enter some valid data for your game entry");
                      }else
                      $.ajax({
                           type: "POST",
                           url: "add.php",
                           data: dataString,
                           success: function(){
                             window.location.reload(true);
                            $('.success').fadeIn(200).show();
                            $('.error').fadeOut(200).hide();
                           }
                      });
  
             return false;
          }
  
                                  )});
  
          &lt;/script&gt;
  
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
          &lt;script type = "text/javascript"&gt;
           $(document).ready(function(){
          $("a.deletebutton").click(function(){
               var del_id = $(this).attr("id");
               var info = 'id=' + del_id;
               var parent = $(this).parent();
              if(confirm("Sure you want to delete this game? !..There is no Undo")){
                  $.ajax({
                      type: "get",
                      url: "delete.php?" + info,
  
                      context: document.body,
                      success: function(){
  
                          $('.p'+del_id).html('deleted');
                          $('.success').fadeIn(200).show();
                      }
                  });
              }
               return false;
       });
   });
   &lt;/script&gt;
       &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <h2>add.php</h2>
  
  <pre><code>&lt;?php
      require('dbconfig.php'); //we cannot continue without this file, thats why using require instead of include
  
      if(isset($_POST['name']))
      {
  
      $name=addslashes($_POST['name']);
      $type=addslashes(($_POST['type']));
      $rating=addslashes($_POST['rating']);
      $release=addslashes($_POST['release']);
      $sql = 'INSERT INTO `games` (`Name`,`Type`,`Rating`,`Release Year`)  VALUES ("'.$name.'", "'.$type.'", "'.$rating.'", "'.$release.'")'; 
      mysql_query( $sql);
      if(!mysql_errno())
      echo " your game has been added to the list of games. ";
      }
  ?&gt;
  </code></pre>