How to call the value of select box from different file?

Question

I created 2 files: 1. post.php 2. ajax.php

i want to select 2 select box to show the related chart. the select box is coded in post.php. The data query is in the ajax.php file. i want to code the select box logic in ajax.php so that the chosen select box data will be sent to post.php using ajax call.

but, I don't know how to call the variable selected value of select boxes in ajax.php to run the function there.

Anyone can help me?

this is the code from post.php

            //combo box options to select post filter
             echo 'Posts of : ';
             echo '<select id="post-filter">';
             echo '<option value="0" selected="selected"> Select </option>';
             echo '<option value="1">Job</option>';
             echo '<option value="2">Internship</option>';
             echo '</select>';


             echo '&nbsp;&nbsp;&nbsp;';

            //combo box options to select group filter
             echo 'Category : ';
             echo '<select id="field-filter">';
             echo '<option value="0" selected="selected"> Select </option>';
             echo '<option value="1">Company</option>';
             echo '<option value="2">Location</option>';
             echo '<option value="3">Jobs Category</option>';
             echo '<option value="4">Salary</option>';
             echo '<option value="5">Experience</option>';
             echo '<option value="6">Level of Education</option>';
             echo '</select>';
            ?>

function change1() {
        var listbox1 = document.getElementById("post-filter");
        var selIndex1 = listbox.selectedIndex;
        var selValue1 = listbox.options[selIndex1].value;
        var selText1 = listbox.options[selIndex1].text;

        }


    function change2() {
        var listbox2 = document.getElementById("post-filter");
        var selIndex2 = listbox.selectedIndex;
        var selValue2 = listbox.options[selIndex2].value;
        var selText2 = listbox.options[selIndex2].text;

        }

this is the ajax.php file to get the chosen data value

if (selValue1 == '1') {
     if (selValue2 == '1') {

                x = CompanyData;
                y = optionsCompany;

                }

     if (selValue2 == '2') {
                   x = LocationData;
                    y = optionsLocation;
                }

      if (selValue2 == '3') {
          x = CategoryData;
          y = optionsCategory;
        }


      if (selValue2 == '4') {
          x = SalaryData;
          y = optionsSalary;
        }

      if (selValue2 == '5') {
          x = ExperienceData;
          y = optionsExperience;
        }


        if (selValue2 == '6') {
          x = LevelData;
          y = optionsLevel;
        }

 }


 elseif (selValue1 == '2') {

    if (selValue2 == '1') {

                x = CompanyData;
                y = optionsCompany;

                }

     if (selValue2 == '2') {
                   x = LocationData;
                    y = optionsLocation;
                }

      if (selValue2 == '3') {
          x = CategoryData;
          y = optionsCategory;
        }


      if (selValue2 == '4') {
          x = SalaryData;
          y = optionsSalary;
        }

      if (selValue2 == '5') {
          x = ExperienceData;
          y = optionsExperience;
        }


        if (selValue2 == '6') {
          x = LevelData;
          y = optionsLevel;
        }
 }

can i use this?

$(document).ready(function() {
        $('select[name="post-filter"]').change(function(){
        var select1 = $(this).val();
        $.ajax({
                type: 'POST',
                url: 'ajax.php',
                data: {select1: select1},
                dataType: 'php'
                 });
            });
        });

Answer 1

Post.php

 <?php
                 //combo box options to select post filter
                 echo 'Posts of : ';
                 echo '<select id="post-filter">';
                 echo '<option value="0" selected="selected"> Select </option>';
                 echo '<option value="1">Job</option>';
                 echo '<option value="2">Internship</option>';
                 echo '</select>';


                 echo '&nbsp;&nbsp;&nbsp;';

                //combo box options to select group filter
                 echo 'Category : ';
                 echo '<select id="field-filter">';
                 echo '<option value="0" selected="selected"> Select </option>';
                 echo '<option value="1">Company</option>';
                 echo '<option value="2">Location</option>';
                 echo '<option value="3">Jobs Category</option>';
                 echo '<option value="4">Salary</option>';
                 echo '<option value="5">Experience</option>';
                 echo '<option value="6">Level of Education</option>';
                 echo '</select>';
   ?>
   <script>
      $(document).ready(function() {
        // for post-filter
        $('#post-filter').on('change',function(){
        var select1 = $(this).val();  // Post filter value
        var select2 = $("#field-filter").val(); // Field Filter value
        $.ajax({
                type: 'POST',
                url: 'ajax.php',
                data: {selValue1 : select1,selValue2 :select2 },
                success: function(result){
                   console.log(result); // what ever the ajax call response we got from ajax.php
                }
            });
        });
     // we need to do the same for field filter value.
     $('#filed-filter').on('change',function(){
        var select2 = $(this).val();  // Field filter value
        var select1 = $("#post-filter").val(); // post Filter value
        $.ajax({
                type: 'POST',
                url: 'ajax.php',
                data: {selValue1 : select1,selValue2 :select2 },
                success: function(result){
                   console.log(result); // what ever the ajax call response we got from ajax.php
                }
            });
        });
   </script>

ajax.php will be the same as you have done.