Question posted in
You can find the official documentation here.

pass values from one PHP page to another with ajax – Jquery ajax

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;
Tags:

2

Answers


  1. 0

    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 },
        })
    }
});
    Login or Signup to reply.
  2. 0

    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.

    1. 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);
  })
    1. Second recommandation is to use the console where you would have seen this error:

    ReferenceError: getTableCall2 is not defined.

    1. 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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search