JavaScriptのOnchangeでPHP関数を呼び出す

Question

PHPの関数をonchangeのhtmlのselectで呼び出したいのですが、どうすればできますか？

htmlコード

<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関数ページ

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

Answer 1

ajaxを使用してPHPスクリプトを呼び出して、JavaScript結果を受け取ることができます。 HTMLページの例については

：

<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> 

その後、あなたのPHPスクリプトにあなたはそれができますかあなたが見つけた場合なら、私を知ってみましょうあなたはjavascriptを

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

から受け取る値を操作することができます問題

Answer 2

これは、その方法によって行うことができない、あなたはそれにAJAXを必要としています。 onchangeはphpではなくjavascriptのための予約された関数であるため、あなたの考えはうまくいかない。コードを実行して選択が変更された場合、getArea（）エコーがjavascriptにのみ実行され、期待どおりに表示されません。私がここで行ったことは、あなたの望むようにあなたの地域を検索するのを助けるPHPコードへのajax呼び出しでjs関数を入れました。明らかに、私のコメントは以下のように、HTMLコードにバインドする良い方法ではありません。コードが大きくなってメンテナンスが非常にコストがかかるので、私はon jquery functionを使用してリスナーをオブジェクトにバインドしました。 changeも使用してください。

本当にjavascriptが必要かどうかを分析することは重要です。コードが示唆しているように1つの価値を得るだけであれば、提出されたフォームはよりシンプルです。

<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(); 
    }