not able to pass value using ajax in php file

Question

I am not able to pass value using ajax in php file.

Corrected Code

<script>
    $("body").on('change', '#area', function () { 
        //get the selected value 
        var selectedValue = $(this).val(); 
        //make the ajax call 
        $.ajax({
            url: 'box.php',
            type: 'POST',
            data: {option: selectedValue},
            success: function () {
                console.log("Data sent!");
            }
        });
    });
</script>

here the php code

<?php    $val=$_POST['option'];echo $val;    ?>

Answer 1

There are a few problems here:

It should be url , not rl . Also, you have type: POST' with it ending in a ' , but no starting ' .

It should be type: 'POST' .

It should then look like this:

$("body").on('change', '#area', function() {      
  var selectedValue = this.value;     
  $.ajax({  
    url: 'box.php', 
    type: 'POST',
    data: {
        option : selectedValue
    },     
    success: function() {          
        console.log("Data sent!");    
    }  
  });
});

If you want to view your data on the same page after (as on box.php , you are echo 'ing the value.), you can do this:

success: function(data) {
  console.log(data);
}

This will then write in the console what option is, which is the value of #area .

Answer 2

Try the following code

$("body").on('change',function(){
  $.ajax({
    URL:<you absolute url>,
    TYPE:POST,
    Data:"variable="+$("#area").val(),
    Success:function(msg){
      <do something>
    }
  });
});

Hope this will help you in solving your problem.

Answer 3

Your just miss ajax method parameter spelling of 'url' and single quote before value of type ie 'POST'. It should be like

$.ajax({  
    url: 'box.php', 
    type: 'POST',
    data: {option : selectedValue},     
    success: function() { console.log("Data sent!");}  
});