Передача формы без обновления страницы

Question

У меня есть несколько divs, show/hide на кнопке click div, внутри одного из этих divs У меня есть таблица и для фильтрации этой таблицы для поиска конкретного пользователя. Я использую PHP-код и форму для отправки проблема заключается в том, что после отправки формы обновляется страница и появляется первый div, хотя запрос работал, и когда я возвращаюсь в таблицу div, появляется фильтрация. Я использовал этот код, чтобы остановить обновление, но форма не представляется:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script> 
$(function() { 

    $('#myform').on('submit', function (e) { 

    e.preventDefault(); 

    $.ajax({ 
     type: 'post', 
     url: 'admin.php', 
     data: $('#myform').serialize(), 
     success: function() { 
     alert('table is filtered'); 
     } 
    }); 

    }); 

}); 
</script> 

и вот моя форма:

<div class="in5 n5" id="users"> 
    <br> 
    <form method="post" action="" id="myform" > 
     <table style="width:25%;height: 13%;table-layout: fixed; font-family: signika;background-color:white;color:white;border-bottom:1px solid white;"> 
      <tr> 
       <td width="30%" style="text-align:center;"> 
        <button style="width:100%;height: 100%;border:0; font-size: 20px;font-family: signika;background: transparent;">Show all</button> 
       </td> 
       <td> 
        <div style="height:100%;width: 100%;"> 
         <input type="text" name="valueToSearch" placeholder="Search user" style="height:100%;width: 70%; font-size: 20px;" > 
         <input value="Search" id="search" name="search" type="submit" style="width:30%; height: 100%; float: right; background-color: gray; color:white; font-size: 20px; "> 
        </div> 
       </td> 
      </tr> 
     </table> 

     <table style="width:100%;height:10%; background-color: white; font-size: 20px; border-bottom: 1px solid #cccccc; table-layout: fixed;border-collapse: collapse;"> 
      <tr> 
       <td style="width:3%;">ID</td> 
       <td style="width:10%;">Username</td> 
       <td style="width:10%;">Email</td> 
       <td style="width:10%;">First name</td> 
       <td style="width:10%;">Last name</td> 
       <td style="width:5%;">Gender</td> 
       <td style="width:10%;">Birthday</td> 
       <td style="width:8%;">Country</td> 
       <td style="width:7%;">City</td> 
       <td style="width:10%;">Bio</td> 
       <td style="width:5%;">Access</td> 
       <td style="width:7%;">Picture</td> 
       <td style="width:5%;">Ban user</td> 
      </tr> 
      <?php while($row = mysqli_fetch_array($search_result)):?> 
      <tr > 
       <td style="width:3%; overflow: hidden;" title="<?php echo $row[0]; ?>"> 
        <input style="border:0;background: transparent; font-size: 20px;" readonly="readonly" name="id" value="<?php echo $row[0]; ?>"> 
       </td> 
       <td style="width:10%; overflow: hidden;" title="<?php echo $row[1]; ?>"><?php echo $row[1]; ?></td> 
       <td style="width:10%; overflow: hidden;" title="<?php echo $row[2]; ?>"><?php echo $row[2]; ?></td> 
       <td style="width:10%; overflow: hidden;"title="<?php echo $row[4]; ?>"><?php echo $row[4]; ?></td> 
       <td style="width:10%; overflow: hidden;"title="<?php echo $row[5]; ?>"><?php echo $row[5]; ?></td> 
       <td style="width:5%; overflow: hidden;"title="<?php echo $row[6]; ?>"><?php echo $row[6]; ?></td> 
       <td style="width:10%; overflow: hidden;"title="<?php echo $row[7]; ?>"><?php echo $row[7]; ?></td> 
       <td style="width:8%; overflow: hidden;"title="<?php echo $row[8]; ?>"><?php echo $row[8]; ?></td> 
       <td style="width:7%; overflow: hidden;"title="<?php echo $row[9]; ?>"><?php echo $row[9]; ?></td> 
       <td style="width:10%; overflow: hidden;"title="<?php echo $row[11]; ?>"><?php echo $row[11]; ?></td> 
       <td style="width:5%; overflow: hidden;"> 
        <?php if($row['12']=="moderate"){ ?> 
         <a href="lock.php?id=<?php echo $row[0]; ?>"> 
          <img class="img2" src="icons/access.png" ></a> 
        <?php } else{ ?> 
         <a href="access.php?id=<?php echo $row[0]; ?>"> 
          <img class="img2" src="icons/locked.png" > 
        </a> <?php } ?> 
       </td> 
       <td style="width:7%; overflow: hidden;"> 
        <a href="#image" title="See profile picture" class="cover" > 
         <?php if($row[10]==""){ ?> 
          <img class="cimg2 " src="images/profile.png"> <?php 
         } else { ?> 
          <img class="cimg2 " src="img/<?php echo $row[10] ?>" > 
         <?php }?> 
        </a> 
       </td> 
       <td style="width:5%; overflow: hidden;"> 
        <a title="Delete user" href="deleteuser.php?id=<?php echo $row[0]; ?>" style="border:0;background: transparent;"> 
         <img src="icons/ban.png"></a></td> 
      </tr> 
      <?php endwhile;?> 
     </table> 
    </form> 

и код PHP:

<? 
if(isset($_POST['search'])) 
{ 
    $valueToSearch = $_POST['valueToSearch']; 
    // search in all table columns 
    // using concat mysql function 
    $query = "SELECT * FROM `r` WHERE CONCAT(`id`, `username`,`email`) LIKE '%".$valueToSearch."%'"; 
    $search_result = filterTable($query); 
} 
else { 
    $query = "SELECT * FROM `r`"; 
    $search_result = filterTable($query); 
} 

// function to connect and execute the query 
function filterTable($query) 
{ 
    $connect = mysqli_connect("localhost", "root", "", "x"); 
    $filter_Result = mysqli_query($connect, $query); 
    return $filter_Result; 
} 

проблема на странице отправки не обновляется, и появляется предупреждение, но также таблица не фильтрует.

Answer 1

Использование по щелчку не на покориться и кнопка ввода типа

$('#myform').on('click', function (e) { 

Answer 2

Oops! Вы тоже пропустили концепцию! При использовании Ajax вам нужно управлять вашим DOM (Document Object Model) сами по функции обратного вызова

Вы пропали без вести возвращение ложным; в конце отправки. Событие отправки формы при настройке и используется e.preventDefault(), тогда ваша реализация переопределяет поведение по умолчанию, поэтому ему нужно сообщить форму, если ей нужно отправить всю страницу или нет.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script> 
    $(function() { 

     $('#myform').on('submit', function (e) { 

      e.preventDefault(); 

      $.ajax({ 
      type: 'post', 
      url: 'admin.php', 
      data: $('#myform').serialize(), 
      success: function() { 
//filter the table using javascript code by changing the elements etc. 
       alert('table is filtered'); 
      } 
      }); 
    return false; 
     }); 

    }); 
    </script> 

Если это не работает, то есть должна быть некоторая неопределенность, что там могут быть некоторые ошибки во время выполнения ** **, которая мешает ваш скрипт для распространения.