title: Jquery ajax call going to php script and not reloading page
body: <p>I have a simple page which allows users to add language ids to items. The page loads up a list of records, by doing an ajax call. All the records are loaded into a div as a list.</p>
  
  <p>Each list item is a form, so when the user inputs the lang id, they press update and the ajax call goes off, updates the database and reloads the list with the records, minus the one just updated.</p>
  
  <p>The jquery call, works on page load, but if you submit a form item, it goes to the php script instead of reloading within the page you submitted on.</p>
  
  <p>Any ideas why the initial call loads 'in page' but the form submit does not. Also is using a form per record a good idea or is there a better way to do it with jquery.</p>
  
  <p>The original php script (sort_language.php) which does the ajax call</p>
  
  <pre><code>   &lt;script id="source" language="javascript" type="text/javascript"&gt;
  
     function run(){
  // get form data
      var eng = $('#rec #eng').val();
      var cym = $('#rec #cym').val();
  
      // put form data in a JSON
      var data_json = {'eng':eng, 'cym':cym};
  
      //post to php script to update database and return html list
      $.ajax({
        type: 'post',
        url: 'ajax/lang_api.php',
        data: data_json,
        beforeSend: function() {
          // before send the request, display a "Loading..." message
          $('#records').html('Loading...');
        },
        timeout: 10000,        // sets timeout (10 seconds)
        error: function(xhr, status, error) { alert('Error: '+ xhr.status+ ' - '+ error); },
        success: function(response) { $('#records').html(response); }
      });
  
      return false; //this should stop page reload
  }
  
  
  $(document).ready(function()
  {
      $("#rec").submit(function()
      {
          run()
      });
      run()
  });
  
  
  
   &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="record_wrapper"&gt;
  &lt;h1&gt;Records by title&lt;/h1&gt;
  &lt;div id="records"&gt;
      Waiting for records to load....
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the php script which created the list and updates the db.</p>
  
  <pre><code>//get lang post variables if they exist
  $eng_id = $_POST['eng'];
  $cym_id = $_POST['cym'];
  //debug - check post values are correct visually
  echo 'eng' . $eng_id . ' cym ' . $cym_id;
  
  function create_list() {    
  //generate html list
  $html .='   &lt;ul&gt;';
  
      //grab records from DB which have not been updated with language value to display
      if (!$query = mysql_query("SELECT `id`, `title-245` FROM `records` WHERE `catalog_lang-040` = 'eng' ORDER BY `title-245`")) {
          echo mysql_error();
      }
      //generate each item in list as a form 
      //set form id to rec
      while($row = mysql_fetch_array($query))
      {
          $html .= '  &lt;li&gt;&lt;form action="ajax/lang_api.php" method="post" id="rec"&gt;' . $row['title-245'] . ' &lt;input type="text" name="cym" size="3" /&gt;&lt;input type="hidden" name="eng" id="eng" value="' . $row['id'] . '" /&gt; &lt;input type="submit" value="submit" /&gt;&lt;/form&gt;&lt;/li&gt;
          ';                                                                                      
      }
  
  $html .= '  &lt;/ul&gt;';
  //return the html to be used
  return $html;
  }
  
  //if eng and cym ids are submitted then update DB, otherwise just return the html required.
  //check value is set using isset
  if (isset($eng_id) &amp;&amp; isset($cym_id)) {
  
  if (!is_numeric($eng_id)) { $rehtml= 'Invalid English ID'; }
  if (!is_numeric($cym_id)) { $rehtml= 'Invalid Welsh ID'; }
  
  //sql to go here to update db ith language value
  
  //and then get new list to output.
    echo create_list();
  //post undefined so just return list (for first page load/refresh)  
  }else{
  // output the html
    echo create_list();
  }
  </code></pre>
  
  <p>Probably missing something obvious, but first time playing with jquery/js.  </p>
  
  <p>And here is the HTML list that is created by lang_api.php, this loads into the records div replacing "waiting for records to load" in sort_language.php</p>
  
  <pre><code>eng417 cym 21   
  &lt;ul&gt;    
   &lt;li&gt;&lt;form action="ajax/lang_api.php" method="post" id="rec"&gt;18th - 19th century ballads collection , 18th - 19th century,  &lt;input type="text" name="cym" size="3" /&gt;&lt;input type="hidden" name="eng" id="eng" value="417" /&gt; &lt;input type="submit" value="submit" /&gt;&lt;/form&gt;&lt;/li&gt;
              &lt;li&gt;&lt;form action="ajax/lang_api.php" method="post" id="rec"&gt;1st The Queen's Dragoon Guards Collections , 1685 -,  &lt;input type="text" name="cym" size="3" /&gt;&lt;input type="hidden" name="eng" id="eng" value="1001" /&gt; &lt;input type="submit" value="submit" /&gt;&lt;/form&gt;&lt;/li&gt;
              &lt;li&gt;&lt;form action="ajax/lang_api.php" method="post" id="rec"&gt;Aberconway Library , 20th century -,  &lt;input type="text" name="cym" size="3" /&gt;&lt;input type="hidden" name="eng" id="eng" value="101" /&gt; &lt;input type="submit" value="submit" /&gt;&lt;/form&gt;&lt;/li&gt;
              &lt;li&gt;&lt;form action="ajax/lang_api.php" method="post" id="rec"&gt;Aberfan Disaster Archive , Mainly 1966 -,  &lt;input type="text" name="cym" size="3" /&gt;&lt;input type="hidden" name="eng" id="eng" value="303" /&gt; &lt;input type="submit" value="submit" /&gt;&lt;/form&gt;&lt;/li&gt;
              &lt;li&gt;&lt;form action="ajax/lang_api.php" method="post" id="rec"&gt;Abergavenny Local History Collection , Prehistory to the present day,  &lt;input type="text" name="cym" size="3" /&gt;&lt;input type="hidden" name="eng" id="eng" value="1030" /&gt; &lt;input type="submit" value="submit" /&gt;&lt;/form&gt;&lt;/li&gt;
              &lt;li&gt;&lt;form action="ajax/lang_api.php" method="post" id="rec"&gt;Alister Hardy Religious Experience Archive , 1924 -,  &lt;input type="text" name="cym" size="3" /&gt;&lt;input type="hidden" name="eng" id="eng" value="1042" /&gt; &lt;input type="submit" value="submit" /&gt;&lt;/form&gt;&lt;/li&gt;
              &lt;li&gt;&lt;form action="ajax/lang_api.php" method="post" id="rec"&gt;Almanacs Collection , 1700 - 1850,  &lt;input type="text" name="cym" size="3" /&gt;&lt;input type="hidden" name="eng" id="eng" value="740" /&gt; &lt;input type="submit" value="submit" /&gt;&lt;/form&gt;&lt;/li&gt;
              &lt;li&gt;&lt;form action="ajax/lang_api.php" method="post" id="rec"&gt;Ammanford Local Studies Collection , 1880s -,  &lt;input type="text" name="cym" size="3" /&gt;&lt;input type="hidden" name="eng" id="eng" value="939" /&gt; &lt;input type="submit" value="submit" /&gt;&lt;/form&gt;&lt;/li&gt;
              &lt;li&gt;&lt;form action="ajax/lang_api.php" method="post" id="rec"&gt;Anderson Collection , 17th - 20th century,  &lt;input type="text" name="cym" size="3" /&gt;&lt;input type="hidden" name="eng" id="eng" value="407" /&gt; &lt;input type="submit" value="submit" /&gt;&lt;/form&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>