CODEWITHSUNDEEP
javascriptjquerymysqlajax
Majid Ali
Majid Ali

Reputation: 31

Displaying search result on same page without refreshing the page

While browsing a website i found an interesting feature that i like to have in my application.It is like displaying search result on same page without refreshing the page. When someone fills the last field of the form it shows the search result on the same page without refreshing the page.The form has no submit button or any link to submit the form data when someone fills the last field it search result and display the result. I want to implement this feature in my application i built in PHP. I know this can be done by Javascript & Ajax but i don't have enough knowledge of these languages. I just learned HTML,CSS,PHp & MySql. Let me show u my code

HTML:

<form action="do_search.php" method="post"/>
Enter Number:<input type="text" name="roll" id="roll">
<input type="submit" value="search record"/>

do_search.php:

    <?php
    include 'includes/dbConnect.php';   
?>
<?php
    $roll = $_POST['roll'];
    $result = mysql_query( "SELECT * FROM students WHERE Roll_No = '$roll'" ) or die("SELECT Error: ".mysql_error());
    $num_rows = mysql_num_rows($result);
    ?>
<table width="100%"  bgcolor="#F7F7F7" border="0">
<?php
if ($num_rows!=0)
{
?>
<tr style="text-align:left;">
    <td width="7%" align="center" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>#</strong></td>
    <td width="13%" align="left" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>Roll No</strong></td>
    <td width="29%" align="left" bordercolor="#CCCCCC" bgcolor="#996600"class="heading"><strong>Name</strong></td>
    <td width="23%" align="left" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>Father Name</strong></td>
    <td width="16%" align="center" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>Class</strong></td>
    <td width="12%" align="center" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>Section</strong></td>

</tr>
    <?php
//$counter = 1;
    while ($get_info = mysql_fetch_row($result))
    {
        print '<tr class="text-data">';
        print '<td align="center" valign="top">' . $get_info[0] . '</td>';
        print '<td align="left" valign="top">
        <a href="edit_Student.php?roll_no=' . $get_info[1] . '" style="color:#000"><b>' . $get_info[1] . '</b></td>';
        print '<td align="left" valign="top">'. $get_info[2] . '</td>';
        print '<td align="left" valign="top">' . $get_info[3] . '</td>';
        print '<td align="center" valign="top">' . $get_info[4] . '</td>';
        print '<td align="center" valign="top">' . $get_info[5] . '</td>';
        print '</tr>';
        //$counter++; 
    }
}
else
{
?>
<tr style="text-align:left;">
    <td align="center" colspan="7">
        No Student Found !
    </td>
</tr>
<?php
}
?>
</table>

This is working fine for me and display the record on do_search.php page. I want my form has no submit button option & when someone enter the form field Enter Roll Number it should display the record on same page and display all the record from database. Can anyone please help me for this. Thanks in advance

Upvotes: 0

Views: 4320

Answers (2)

RajeshK
RajeshK

Reputation: 461

You can do that with jQuery ajax. 

<form action="do_search.php" method="post"/>
 Enter Number:<input type="text" name="roll" id="roll">
</form>    
<div id="result"></div>

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
 $("#roll").change(function() {
      $.post("do_search.php", { roll:$("#roll").val() })
     .done(function( data ) {
         $("#result").html(data);
     });
}); 
</script>

Upvotes: 1

Arivezhil Marban
Arivezhil Marban

Reputation: 86

Use Jqyery keydown() Method

$("input").keydown(function(){
    //Do display logic
    // Use Ajax and get the data for the value enter and update your html content
});

http://www.w3schools.com/jquery/event_keydown.asp

Upvotes: 0

Related Questions