Sent value and show output when select tag change

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.

@MehdiBounya - After the select tag change, it should show the result at
that come from database (MySQL). But nothing happen. — Asyraf, May 07 '17 at 19:58
Check the console and tell me is there any errors or what is the value returned by show.php — Spoody, May 07 '17 at 19:59
@MehdiBounya - Uncaught SyntaxError: missing ) after argument list. Acording to this error, the error is come if (types!= null) statement at the close bracket — Asyraf, May 07 '17 at 20:52
@Asyraf Read this... [PHP: SQL Injections](http://php.net/manual/en/security.database.sql-injection.php) and [How can I prevent SQL injection in PHP?](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) — Gerardo, May 07 '17 at 21:42
@Gerardo i use this [link]https://www.w3schools.com/php/php_form_validation.asp[\link] for SQL prevention. — Asyraf, May 09 '17 at 21:41
@Asyraf I read it and that's just for XSS (Cross Site Scripting) not the same as SQL Injections. You don't have to listen to me it's just a recommendation. You could read about prepared statements, they're pretty easy to use. — Gerardo, May 09 '17 at 22:23

Giulio Bambini · Answer 1 · 2017-05-07T20:50:18.123

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

score 0 · Answer 2 · answered May 07 '17 at 20:54

You have a missing bracket

    <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);
                    }
                }
            });
        });
}); // add this
    </script>

score 0 · Answer 3 · answered May 07 '17 at 21:10

I found out that my ajax jQuery function do not have close pair, so i decide to add it and it work.

<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);
                    }
                }); // Add This
            }
        });
    });
</script>

After the code running good, i also found out the error at ajaxInfo.php, the count inside the loop missing $ symbol

if ($query -> num_rows > 0)
{
    echo "LIST OF : " . $types . "REGISTERED<br />";

    $count = 1;

    while ($result = $query -> fetch_assoc())
    {
        echo "$count" . $result['child'] . "<br />";
        $count++; //HERE
    }
}

Thanks for the people that help.

Sent value and show output when select tag change

3 Answers3