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.

If only half of a page is loading that is a clear indicator of a PHP error so use [PHP error logging](http://stackoverflow.com/questions/1053424/how-do-i-get-php-errors-to-display) to see what's going on. — Martin, May 11 '16 at 17:32
You're missing result returning in your MySQLi, you've sent the query ok but once the server has the query you've given it no data about how you want it to [return the data](http://php.net/manual/en/class.mysqli-result.php).Hence improper data is being given back to you. — Martin, May 11 '16 at 17:34
Why are you using jquery 1.9.1 when the current version 1 jquery is 1.11.1, upgrade by changing a few characters on your jQuey reference! — Martin, May 11 '16 at 17:35
changing the version did not work , also the result are returning just fine if the preventDeafult() did not exist. — yasser h, May 11 '16 at 18:15

score 1 · Answer 1 · answered May 11 '16 at 17:29

1

Use on click not on submit and input type button

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

answered May 11 '16 at 17:29

Niklesh Raut

34,013
16
75
109

i tried this also $('#myform').on('submit', function (e) { is not working either but id of the div (#users) is appearing in the title like if the div is open but really it's not . – yasser h May 11 '16 at 17:36
But @Rishi: Where is submit button? I am unable to find it man. – Nana Partykar May 11 '16 at 17:37
Technically you're not submitting the form, you're merely sending it to the server with Ajax so the jQuery never reaches the `on('submit'`, as suggested, replace with `on('click'`. @yasserh – Martin May 11 '16 at 17:37
the submit button is in the 8th line of the form and the name ="search" @Nana partykar – yasser h May 11 '16 at 17:41
1

@Nana Partykar: search for submit you will see ` ` – Niklesh Raut May 11 '16 at 17:42
@Rishi but i am using the submit button to trigger the search in the php code , if(isset$_POST['search']) – yasser h May 11 '16 at 17:44
Yes it will work, `data: $('#myform').serialize(),` is sending post in ajax so just try it. – Niklesh Raut May 11 '16 at 17:55
@Rishi sorry , it's not working and when i clcik on the text input the alrt is appearing. – yasser h May 11 '16 at 18:08
You need to work here `success: function (data) { consolelog(data); }` – Niklesh Raut May 11 '16 at 18:15
If alert is coming so code is working fine till here. – Niklesh Raut May 11 '16 at 18:17
i added the code and nothing happened , i don't know why it's not working but the sql and php code seems to be working fine without the preventDeafult() but like i said it's showing the first div. – yasser h May 11 '16 at 18:19
Convert and echo json here `return $filter_Result;` – Niklesh Raut May 11 '16 at 18:25

Asim Khan · Answer 2 · 2016-05-11T18:18:19.907

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.

not working , what kind of run time error and where it could exist?? — yasser h, May 11 '16 at 18:11
tried the updated code also did not work how do i manipulate DOM?? — yasser h, May 11 '16 at 18:36

Submiting form without refreshing a page

2 Answers2