search in ajax page not working

My ajax page works successfully but when I clicked search button it redirected to my login page or default page. On the other page that do not use ajax, my search button works and display the result. I have tried to overcome the problems but then it still give me the same error.


<script src=""></script>
    // Set trigger and container variables
    var trigger = $('#nav a'),
        container = $('#content');

    // Fire on click
    trigger.on('click', function(){
      // Set $this for re-use. Set target from data attribute
      var $this = $(this),
        target = $'target');       

      // Load target page into container
      container.load(target + '.php');

      // Stop normal link behavior
      return false;

<!-- Optimize for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>  


    <div id="content">

<?php include ('home.php');?>   

    </div>  <!-- end content -->

<div class="clear"></div>
<!-- FOOTER --> 
<div id="footer">
    <div class="menu">

 <nav id="nav">

    <br><br><br><br><a href="#" data-target="home">Muka Depan |</a>
                    <a href="#" data-target="page_1">Status Kerosakan |</a>
                    <a href="#" data-target="page_2">Carian Mudah |</a>
                    <a href="#" data-target="page_3">Pautan Pantas </a><br><br>


</div> <!-- end footer -->
<div class="clear"></div>


<form action="checklogin.php" method="POST" id="login-form" class="cmxform" autocomplete="off">

                                <label>Nombor Personel</label>
                                    <input type="text" id="login-username" class="round full-width-input" placeholder="Isi Nombor Personel" name="username" autofocus  />

                            <label>Kata Laluan</label>
                                    <input type="password" id="login-password" name="password" placeholder="Isi Kata Laluan" class="round full-width-input"  />

                            <center><a href="forget_pass.php" class="button ">Terlupa Kata Laluan?</a>

            <br><input type="submit" class="button round blue image-right ic-right-arrow" name="submit" value="LOG MASUK" />

            <input type="reset" class="button round blue" name="reset" value="   PADAM" /></center>


<form action="" method="post" name="search">
Nombor Personel <input name="searchtxt" type="text" class="round my_text_box" placeholder="Isi nombor personel" style="margin-left: 15px" > 
</select><input name="Search" type="submit" class="my_button round blue" value="CARI">
</form> <br><br>
 $SQL = "SELECT * FROM stock_avail";

 if(isset($_POST['Search']) AND trim($_POST['searchtxt'])=="")
 echo "No Information..";
if(isset($_POST['Search']) AND trim($_POST['searchtxt'])!="")
$SQL = "SELECT * FROM  stock_avail WHERE id = ".$_POST['searchtxt']." ";


Answers 1

  • Search form submitted request to the current page location, now it index.php. You need to add action="page_2.php", and/or submit form and update page using Ajax, like so:

    $('form[name=search]').on('submit', function (e) {
      var target = $(this).attr('action');
      var data = $(this).serialize();
      $.post(target, data).then(function (page) {

Related Articles