skip to Main Content

I have 3 select option for searching the records in datatable with ajax jQuery php.

I have write this code but select option data is not going to other page & not returning back from ajax request.

PHP Code:-

<form name="search_form" id="search_form" method="POST"> 
               <div class="col-md-3">
                <div class="formrow">
                <select class="form-control" name="job_title" class="select_filter">
                    <option value ='' disabled selected>Job Title</option>
                    <option>PHP Developer</option>
                    <option>Andorid Developer</option>
                  </select>
            </div>
           </div>
                      
     <div class="col-md-3">
                <div class="formrow">
                  <select class="form-control" name="emptype" class="select_filter">
                    <option value ='' disabled selected>Employment Status</option>
                    <option>Permanent</option>
                    <option>Contract</option>
                    <option>Freelance</option>
                  </select>
                </div>
              </div>
         
    <div class="col-md-3">
                <div class="formrow">
                  <select class="form-control" name="experience" class="select_filter">
                    <option value ='' disabled selected>Experience</option>
                    <option>Fresher</option>
                    <option>1 Year</option>
                    <option>2 Years</option>
                    <option>3 Years</option>
                    <option>4 Years</option>
                    <option>5 Years</option>
                    <option>6 Years</option>
                    <option>7 Years</option>
                    <option>8 Years</option>
                    <option>9 Years</option>
                    <option>10 Years</option>
                  </select>
                </div>
              </div>
 </form>

jQuery / Ajax Code:-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
 
<script type="text/javascript" rel="stylesheet">
 $(document).ready(function(){
 $('.select_filter').on('change',function(){
       
     $.ajax({
           type: "POST",
           url: "ajaxCompany_search.php",
           data: $('#search_form').serialize(),
            success:function(data){
        console.log(data);
        alert(data);
                $("#projects").html(data);
            }
        });
  });
  });
</script> 

ajaxCompany_search.php

<?php
include('../../config.php');
print_r($_POST);
?>

2

Answers


  1. you have to group the class in an uniq tag:

    change

    class="form-control"    ... class="select_filter" 
    

    to

    class="form-control select_filter"
    
    Login or Signup to reply.
  2. You have given class two times inside the select field, due to which data is not showing.

    <select class="form-control" name="job_title" class="select_filter">
    

    write code as

    <select class="form-control select_filter" name="job_title">
    

    It is written like this right there

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search