pass values from one PHP page to another with ajax - php

Question

I have tied for hours now to get the values value="oneyearanalysis" and value="oneyearanalysis", of each button when i press them, i tried with ajax. I think i am close but i get no output GetData but i do in my console.log(clikYear);. Hope you can help me
Best regards
Index.php
<div class="container" style="margin-top: 50px;">
<select name="button" id="button">
<option value="">Select...</option>
<option value="oneyearanalysis">1 year analyse</option>
<option value="fiveyearanalysis">5 year analyse</option>
</select>
</div>
$(document).ready(function(){
$("#button").on("change",function() {
var clikYear = $(this).val();
console.log(clikYear);
if (clikYear !== "") {
var getTableCall2 = $.ajax({
url : "GetData.php",
type:"POST",
cache:false,
data:{clikYear:clikYear},
})
}
});
getTableCall2.done(function(data){
console.log(data);
console.log(getTableCall2);
console.log(clikYear);
})
GetData.php
if(isset($_POST['clikYear']))
{
$year= $_POST['clikYear'];
}
$yearOfChoice = $year;

Answer 1

You were quite close to make it work. If you apply the simple recommandations below, you should save yourself that kind of trouble in the future.
First recommandation is to indent your code correctly.
You would have noticed the getTableCall2 variable is declared on select change. But "used" before that when trying to apply the .done() promise handler.
Below, I made no change to you code except the indentation.
The order of execution on document ready is:
Register the change handler (not executed)
Throw an error.
 
$(document).ready(function(){
$("#button").on("change",function() {
var clikYear = $(this).val();
console.log(clikYear);
if (clikYear !== "") {
var getTableCall2 = $.ajax({
url : "GetData.php",
type:"POST",
cache:false,
data:{clikYear:clikYear},
})
}
});
getTableCall2.done(function(data){
console.log(data);
console.log(getTableCall2);
console.log(clikYear);
})
Second recommandation is to use the console where you would have seen this error:
ReferenceError: getTableCall2 is not defined.
Third recommandation is to be a bit more creative with you class and id naming. .button used on a <select> just can lead to confusion. You can use the name you want. Make it meaningful! I'm sure you do not use the word door when you talk about a window in the real life...
So here is something that should work:
$(document).ready(function(){
$("#analysis_term").on("change",function() {
var clikYear = $(this).val();
console.log(clikYear);
if (clikYear !== "") {
var getTableCall2 = $.ajax({
url : "GetData.php",
type:"POST",
cache:false,
data:{clikYear:clikYear},
})
getTableCall2.done(function(data){
console.log(data);
})
}
});
});
And to test it, make sure the GetData.php outputs something in both cases:
$year = "No POST value!";
if(isset($_POST['clikYear'])){
$year= $_POST['clikYear'];
}
echo "The POST value is:" . $year;

Answer 2

The ID for your Select is "button" but you are using Class Selector instead. Try replacing . with # in front of button
HTML
<select id="button">
<option value="">Select...</option>
<option value="oneyearanalysis">1 year analyse</option>
<option value="fiveyearanalysis">5 year analyse</option>
</select>
JQuery
$("#button").on("change", function () {
var clikYear = $(this).val();
console.log(clikYear);
if (clikYear !== "") {
$.ajax({
url: "GetData.php",
type: "POST",
cache: false,
data: { clikYear: clikYear },
})
}
});