Submiting form without refreshing a page

Question

I have multiple divs , show/hide on button click div , inside one of these divs I have a table and to filter this table to search a specific user I use a PHP code and a submit form the problem is after submitting the form the page refreshes and the 1st div appears although the request worked and when I revisit the table div the filtering appears. I used this code to stop the refresh but the form is not being submitted:

<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>

and here is my form:

<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>

and the PHP code:

<?
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;
}

the problem is on submit the page is not refreshing and the alert appears but also the table is not filtering.

Answer 1

使用点击而不是提交和输入类型按钮

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

Answer 2

Oops! You missed a concept also ! When using ajax you need to manipulate your DOM(Document Object Model) by yourself on callback functions

You are missing return false; at the end of submit event. The form submit event when customized and e.preventDefault() is used then your implementation overrides the default behavior thus it needs to tell the form if it needs to submit the whole page or not.

    <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>

If this not works then there must be some uncertainty like there may be some **runtime error ** which is preventing your script to propagate.