Form is not being submit while fetch data using ajax search

1916 views php
8

I created a search which live search database data. I've shown data in tabular form and create a form inside this table. In this form, i need a button for form submission. The problem is, this button cannot submit form. This form is created in Fetch.php file as you can see this line of code <td><input type="submit" name="submit" value="Recover"></td>. Search is working fine but form is not submitting.

The Fetch.php code is,

    <?php
$connect = mysqli_connect("localhost", "root", "", "stolen_cars");
$output = '';
if(isset($_POST["query"]))
{
 $search = mysqli_real_escape_string($connect, $_POST["query"]);
 $query = "
  SELECT * FROM record 
  WHERE name LIKE '%".$search."%'
  OR model LIKE '%".$search."%' 
  OR registration_no LIKE '%".$search."%' 
  OR chassis_no LIKE '%".$search."%' 
  OR color LIKE '%".$search."%'
  OR city LIKE '%".$search."%'
  OR district LIKE '%".$search."%'
 ";
}
else
{
 $query = "
  SELECT * FROM record ORDER BY id
 ";
}
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
 $output .= '
  <div class="table-responsive">
   <table class="table table bordered">
    <tr>
     <th>Name</th>
     <th>Model</th>
     <th>Reg.#</th>
     <th>Chassis#</th>
     <th>Engine#</th>
     <th>Color</th>
     <th>City</th>
     <th>Distt.</th>
     <th>Action</th>
    </tr>
 ';
 $output .= '<form method="post" action="index.php" class=text-center>' ;
 while($row = mysqli_fetch_array($result))
 {
  $output .= '

   <tr>
    <td>'.$row["name"].'</td>
    <td>'.$row["model"].'</td>
    <td>'.$row["registration_no"].'</td>
    <td>'.$row["chassis_no"].'</td>
    <td>'.$row["engine_no"].'</td>
    <td>'.$row["color"].'</td>
    <td>'.$row["city"].'</td>
    <td>'.$row["district"].'</td>
    <td><input type="submit" name="submit" value="Recover"></td>
   </tr>
  ';
 }
$output .= '</form>';
 echo $output;
 }

else
{
 echo 'Data Not Found';
}

?>

Search:

<div class="container">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">Search</span>
            </div>
            <input type="text" name="search_text" id="search_text" placeholder="Search by name, model, registeration#, chassis# etc." class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
        </div>
        <div id="result"></div>
  </div>
<script>
$(document).ready(function(){

 load_data();

 function load_data(query)
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{query:query},
   success:function(data)
   {
    $('#result').html(data);
   }
  });
 }
 $('#search_text').keyup(function(){
  var search = $(this).val();
  if(search != '')
  {
   load_data(search);
  }
  else
  {
   load_data();
  }
 });
});
</script>

answered question

You need to submit the form using ajax?

no, need to sumbit form using PHP

1 Answer

1

I think you break the html since the while loop adds form tags in each iteration try something like this :

$output .= '  <form method="post" action="index.php" class=text-center>' ;


while($row = mysqli_fetch_array($result))
 {
  $output .= '

   <tr>
    <td>'.$row["name"].'</td>
    <td>'.$row["model"].'</td>
    <td>'.$row["registration_no"].'</td>
    <td>'.$row["chassis_no"].'</td>
    <td>'.$row["engine_no"].'</td>
    <td>'.$row["color"].'</td>
    <td>'.$row["city"].'</td>
    <td>'.$row["district"].'</td>
    <td><input type="submit" name="submit" value="Recover"></td>
   </tr>
  ';
 }
$output .= '   </form>';

posted this

Have an answer?

JD

Please login first before posting an answer.