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

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 ' ';
//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 ' ';
//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.