php - Can't call the .php file for my first Ajax try. (Populate dropdown with another dropdown)

Question

Table book contains: book_id,book_title
Table bookext contains: bookext_id,book_id(foreigned key to book),bookext_tag

Here is my script where i want to populate my dropdown is.

<script>                            
                function get_bookextt() {
                    var request = $.ajax({
                        url: "getbookext.php",
                        type: "POST",           
                        dataType: "html"
                    });

                    request.done(function(msg) {
                        $("#get_bookext").html(msg);            
                    });

                    request.fail(function(jqXHR, textStatus) {
                        alert( "Request failed: " + textStatus );
                    });
                }

        </script>

Seeing that code, here is the body part for my first dropdown that will associate the second dropdown that must appear

<select id="book" name='book' onchange="get_bookextt();">
<option value=''>Select</option>
<?php while ($row = mysql_fetch_array($result)) {
    echo "<option value='" . $row['book_id'] . "'>" . $row['book_title'] . "</option>";}
?>
</select>
<div id="get_bookext"></div>

I really feel dumb for posting my whole getbookext.php file in here because I think this is where I messed up.

<?php
include 'db_connection.php';
if ($_POST) {
    $book_id = $_POST['book_id'];
    if ($book_id != '') {
       $sql1 = "SELECT * FROM bookext WHERE book_id=" . $book_id;
       $result1 = mysql_query($sql1);
       echo "<select name='bookext'>";
       echo "<option value=''>Select</option>"; 
       while ($row = mysql_fetch_array($result1)) {
          echo "<option value='" . $row['bookext_id'] . "'>" . $row['bookext_tag'] . "</option>";}
       echo "</select>";
    }
    else
    {
        echo  '';
    }
}

?>

Please pinpoint to me where did I go wrong.

--EDITED--
Here is my whole head area

include 'db_connection.php';

$sql = "SELECT * FROM book";
$result = mysql_query($sql);
?>
<script>                            
function get_bookextt() {
     var request = $.ajax({
                         url: "getbookext.php",
                         type: "POST",
                         data: {'book_id', $(this).val()},
                         dataType: "html"
                    });
     request.done(function(msg) {
          $("#get_bookext").html(msg);            
     });
     request.fail(function(jqXHR, textStatus) {
          alert( "Request failed: " + textStatus );
     });
}



        </script>

Whilst here is the whole body area

<select id="book" name='book' onchange="get_bookextt($(this).val());">
<option value=''>Select</option>
<?php while ($row = mysql_fetch_array($result)) {
    echo "<option value='" . $row['book_id'] . "'>" . $row['book_title'] . "</option>";}
?>
</select>
<div id="get_bookext"></div> // Sub will be appended here using ajax

PS1. I don't understand why get_bookextt($(this).val()); isn't highlighting in my notepad++.

What it's doing now? See any errors, blank page? What console says? — pavel, May 25 '15 at 16:05
Nothing. The div where the dropdown should land isn't changing whenever I choose from the first dropdown. — WTFZane, May 25 '15 at 16:06
Please consider switching to PDO. Also, that code begs for sql injection. — Alex Tartan, May 25 '15 at 16:08
@Alex Yes, I am considering switching to PDO because of that sql injection. But I really need to produce this stuff. For presentation purposes. — WTFZane, May 25 '15 at 16:16
Hi @chris85 I would really appreciate if you answer it in full details. Please. — WTFZane, May 25 '15 at 16:23

score 1 · Accepted Answer · edited May 23 '17 at 10:26

Your AJAX request doesn't have book_id in it which your PHP needs to return the data, http://api.jquery.com/jquery.ajax/.

So your JS function should be something like...

function get_bookextt(book_id) {
     var request = $.ajax({
                         url: "getbookext.php",
                         type: "POST",
                         data: {'book_id': book_id},
                         dataType: "html"
                    });
     request.done(function(msg) {
          $("#get_bookext").html(msg);            
     });
     request.fail(function(jqXHR, textStatus) {
          alert( "Request failed: " + textStatus );
     });
}

Then your HTML should send the value on change so swap the select to:

<select id="book" name='book' onchange="get_bookextt($(this).val());">

When I have issues with AJAX requests the first thing I do is look at the request in the developer tools of Chrome.

Make sure the request makes it to the PHP script
Make sure it sends the data I'm expecting

Here's an article on using the tools, it's written using IE but Chrome is pretty similar. http://forums.asp.net/t/1982579.aspx?Using+the+browser+s+dev+tools+to+diagnose+ajax+problems+and+other+things+

You also should switch over to PDO or mysqli so you case use prepared statements and because mysql_ is deprecated. There are two current ways to limit injection possibilities.

Cast your POST id as an int so it has to be a number.
Use the mysql_real_escape_string

Option 1:

$book_id = (int)$_POST['book_id'];

Option 2:

$book_id = mysql_real_escape_string($_POST['book_id']);

Here's a thread for when you switch over on how to prevent these. How can I prevent SQL injection in PHP?

UPDATE

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<script type="text/javascript">
function get_bookextt(book_id) {
     var request = $.ajax({
                         url: "getbookext.php",
                         type: "POST",
                         data: {'book_id': book_id},
                         dataType: "html"
                    });
     request.done(function(msg) {
          $("#get_bookext").html(msg);            
     });
     request.fail(function(jqXHR, textStatus) {
          alert( "Request failed: " + textStatus );
     });
}
</script>
<select id="book" name='book' onchange="get_bookextt($(this).val());">
<option value=''>Select</option>
    <option value='1'>test</option>
</select>
<div id="get_bookext"></div>
</body>
</html>

Thank you for the effort, but still, it isnt displaying in the `
`. :( — WTFZane, May 25 '15 at 16:34
Does the ajax now return with the result? If you look at the AJAX request is the `book_id` in there with the selected value? — chris85, May 25 '15 at 16:35
Hey thank you for the article. It says in here that `Uncaught SyntaxError: Unexpected token ,` and there is no script that has been read? — WTFZane, May 25 '15 at 16:43
Okay now bro, I really appreciate what you've been doing. But the first error didn't disappear. And now, whenever I choose from my first dropdown, the developer tools give me this error `Uncaught ReferenceError: get_bookextt is not defined onchange @ testing.php:28` — WTFZane, May 25 '15 at 16:57
Can you update the question with the code you have? This is working on my local set up fine. I'll update the answer with my testing version. — chris85, May 25 '15 at 17:01
You sir, the real MVP. Thank you for all the reference, article that you share to me. :) Have a good day ahead. — WTFZane, May 25 '15 at 17:10

php - Can't call the .php file for my first Ajax try. (Populate dropdown with another dropdown)

1 Answers1