使用ajax搜索获取数据时不提交表单

Question

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>

Answer 1

I think you break the html since the while loop adds form tags in each iteration furthermore, the all relevant inputs should be inside the form

So 1st of all, the form should move out of the table the

<th>action</th>

should be removed

And the while loop should remove the form tags:

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>
   </tr>
  ';
 }
$output .=' </table>' ;

2nd of all, the submission shohld be with the text:

<form method="post" action="index.php" class=text-center>' ;
<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">
<input type="submit" name="submit" value="Recover">
</form>

Hope it helps