Calling PHP function Onchange on Javascript

Question

I want to call a function in php onchange in select of html,how can this be done?

html code

<div class="col-sm-4 form-group">
   <label for="c_city">City</label>
   <select class="form-control" id="c_city" onchange="<?php getArea(); ?>">
        <option value="">Select City Name</option>
        <!--populate value using php-->
        <?php
            $stmt ="SELECT * FROM Cities";
            foreach ($con->query($stmt) as $row) {
         ?>
         <option value="<?php echo $row['City_ID'];?>"><?php echo $row['City_Name'];?></option>
         <?php
          }
         ?>
   </select>
</div>

PHP Functions Page

function getArea() 
{
    if(isset($_GET['c_city'])) 
    {
        $c_city = $_GET['c_city'];
        echo $c_city;
    }
}

Answer 1

This can't be done by that way, you need AJAX to that. Your idea can't work because the onchange is a reserved function for javascript, not for php. If you execute your code, when the select changes, only will run your getArea() echo into javascript resulting in nothing to see as you expected. What I DID here was put a js function with an ajax call to your php code, helping you to retrieve your area as you wish. Obviously like my comment below, it's not a good way to put binds into html code, because when the code starts to grow, the maintenance becomes very costly - to solve this, I used on jquery function that binds some listener to an object, but you can use also change .

But it's important to analyze if you REALLY needs javascript there. If you only taking the get of one value as you code suggests, an form submited is more simple.

<div class="col-sm-4 form-group">
   <label for="c_city">City</label>
   <select class="form-control" id="c_city" onchange="getArea()"> //onchange is not a good practice in the html
        <option value="">Select City Name</option>
        <!--populate value using php-->
        <?php
            $stmt ="SELECT * FROM Cities";
            foreach ($con->query($stmt) as $row) {
         ?>
         <option value="<?php echo $row['City_ID'];?>"><?php echo $row['City_Name'];?></option>
         <?php
          }
         ?>
   </select>
</div>

<script>
   //that way with onchange in HTML
   function getArea(){
   var city = $('#c_city option:selected').val();
   $.get( "yourphpcode.php?action=getArea&c_city=" + city, function( data ) {

  alert( data );
});
   }
  //or THAT WAY
  $('#c_city').on('change', function(){
         var city = $(this).find('option:selected').val();
   $.get( "yourphpcode.php?action=getArea&c_city=" + city, function( data ) {

  alert( data );
});

   });
</script>


   //yourphpcode.php
    function getArea() 
{
    if(isset($_GET['c_city'])) 
    {
        $c_city = $_GET['c_city'];
        echo json_encode($c_city);
    }
}
    if (isset($_GET['action']) && $_GET['action'] == 'getArea'){
           getArea();
    }

Answer 2

You can try to use ajax to call the php script and receive results back to javascript.

For example in your html page:

<div class="col-sm-4 form-group">
   <label for="c_city">City</label>
   <select class="form-control" id="c_city" onchange="getArea()">
        <option value="">Select City Name</option>
        <!--populate value using php-->
        <?php
            $stmt ="SELECT * FROM Cities";
            foreach ($con->query($stmt) as $row) {
         ?>
         <option value="<?php echo $row['City_ID'];?>"><?php echo $row['City_Name'];?></option>
         <?php
          }
         ?>
   </select>
</div>

<script>
 function getArea(){
  var c_city = $('#c_city').val();
   $.ajax({
           type: 'POST',
           url: "get_area.php",
           data: {c_city:c_city},
           success: function(result){
               //do something here with return value like alert
               alert(result)
           }
     })
}
</script>

Then in your php script you can manipulate the value you receive from javascript

if(isset($_POST['c_city'])) 
    {
        $c_city = $_POST['c_city'];
        echo $c_city;
    }

Let me know if it helps or if you find a problem