title: php Ajax and jquery form loading then submission not working
body: <p>I have 4 files testmain.php test1.php test2.php test3.php, in the testmain.php I have a div with class "content_load" where I am loading 3 files on click one by one, they are loading fine but test1.php is a form file when it's finish loading I am submitting it with ajax but it's getting redirect, I am trying since yesterday but not able to solve this, if I do not load files with ajax and just submit the test1.php that works fine, but when I combine the code of loading files using load() and submit with <code>$.ajax()</code> then code for loading files works fine but get redirect any solve this issue for me please so I can go ahead with my learning.</p>
  
  <p>testmain.php</p>
  
  <pre><code> &lt;div id="menu_top"&gt;
                  &lt;a class="menu_top" href="test1.php"&gt;TEST 1&lt;/a&gt; /
                  &lt;a class="menu_top" href="test2.php"&gt;TEST 2&lt;/a&gt; /
                  &lt;a class="menu_top" href="test3.php"&gt;TEST 3&lt;/a&gt; /
      &lt;/div&gt;
          &lt;div class="content_load"&gt;&lt;/div&gt;    
  </code></pre>
  
  <p>test1.php</p>
  
  <pre><code> &lt;form class="ajax" action="test1.php" method="post" enctype="multipart/form-data"&gt;
          &lt;input type="text" name="txt1" /&gt; &lt;br&gt;
          &lt;input type="text" name="txt2" /&gt; &lt;br&gt;
          &lt;select name="sel"&gt;
          &lt;?php
          include  '../mysql_connect.php';
          $db = new DBConfig();
          $conn = $db-&gt;getDbPDO();
  
         $sql = "SELECT * FROM tbl_campus ORDER BY camp_id ASC";
         //$sql = "SELECT camp_id FROM tbl_campus ORDER BY camp_id ASC";
  
         $query = $conn-&gt;query($sql);
         $result = $query-&gt;fetchAll(PDO::FETCH_ASSOC);
         $arrlength = count($result);
  
         for ($x = 0; $x &lt; $arrlength; $x++){
         ?&gt;        
         &lt;option value="&lt;?php echo $result[$x]['camp_id']; ?&gt;"&gt;&lt;?php echo $result[$x]['camp_name']; ?&gt;
         &lt;?php } ?&gt;
          &lt;/select&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;input type="submit" value="Click" name="submit" /&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>test2.php &amp; test 3.php</p>
  
  <pre><code>  &lt;h3&gt;THIS IS TEST 2&lt;/h3&gt;   &lt;h3&gt;THIS IS TEST 2&lt;/h3&gt;
  </code></pre>
  
  <p>jquery file</p>
  
  <pre><code>$(document).ready(function() {            
  $('.content_load').load($('.menu_top:first').attr('href'));
  $('.menu_top').click(function(){
      var page = $(this).attr('href');
      $('.content_load').load(page); return false; });
  
      $('form.ajax').on('submit', function(e){
       e.preventDefault();
          var that = $(this);
  url = that.attr('action'), type = that.attr('method'), data = {};
          that.find('[name]').each(function(index, value){            
          var that=$(this),
              name = that.attr('name'),
              value = that.val();
              data[name] = value;
      });
      $.ajax({
         url: url,
         type: type,
         data: data,
         success: function(response){
             console.log(response);
         }
      });
      clearAll();
      return false;
                });
  });
  
  function clearAll(){
      $("form :input").each(function(){
         $(this).val(""); 
      });
  }
  </code></pre>