选择标记更改时发送值并显示输出

Question

I new in term of using jQuery.

I practice using native php ajax, but for this time I need to learn jQuery for the current technology and demand.

I sent "types" value method POST to other page (ajaxInfo.php) when the tag change.

After the select tag change, it should show the result at <div id="showList"> that come from database (MySQL). But nothing happen.

Below are the source code.

Body

<select id="form-types" class="col-xs-10 col-sm-5" name="types">
    <option value="">PLEASE CHOSE</option>
    <option value="STATE">STATE</option>
    <option value="FACULTY">FACULTY</option>
    <option value="PROGRAME">PROGRAME</option>
</select>

<div id="showList"></div>

jQuery AJAX

<script type = "text/javascript" >
$(document).ready(function () {
  $("select#form-types").change(function () {
    var types = $("select#form-types").val();
    if (types != null) {
      $.ajax({
          type: 'post',
          url: 'ajaxInfo.php',
          data: "types=" + types,
          dataType: 'html',
          success: function (response) {
            $("#showList").html(response);
          }
        }
      });
  });
}); 
</script>

Post Page (ajaxInfo.php)

<?php
if (isset($_POST["types"]) === TRUE){
    $types = $_POST["types"];
}
else{
    $types = null;
}
include '../dbco.php';
$query = $dbc -> query ("SELECT child FROM infobase WHERE parent='$types'");
if ($query -> num_rows > 0){
    echo "LIST OF : " . $types . "REGISTERED<br />";
    $count = 1;
    while ($result = $query -> fetch_assoc()){
        echo "$count" . $result['child'] . "<br />";
        count++;
    }
}else{
    echo "NO " . $types . " REGISTERED";
}
?>

Thank You.

Answer 1

You are using id (form-types) for your select input field. but your are tying to targeting another id (form-jenis).

use same named id for select input field and in your jquery selector.

<script type="text/javascript">
$(document).ready(function(){
    $("select#form-types").change(function(e){
        e.preventDefault();

        var types= $("select#form-types").val();

        if (types!= null)
        {
            $.ajax({
            type: 'post',
            url: 'show.php',
            data: "types=" + types,
            dataType: 'html',
            success: function(response) 
            {
                $("#showList").html(response);
            }
        }
    });
});