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.

index.php:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    // 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 = $this.data('target');       

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

      // Stop normal link behavior
      return false;
    });
  });
</script>

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


<!-- MAIN CONTENT -->

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

</nav>


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

home.php:

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

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

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

                            <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>
        </fieldset>        
    </form> 

page_2.php:

<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>
<?php 
 $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) {
        $('#content').html(page);
      });
      e.preventDefault();
    });
    

Related Articles