CODEWITHSUNDEEP
phpjqueryhtml
user4093955
user4093955

Reputation:

Why the script is not running?

<?php
    $dates = "";
    foreach ($check_ins as $check_in):
        $dates .= '<option value= "' . $check_in['check_in'] . '">' . $check_in['check_in'] . '</option>';
    endforeach;
?>

<html>
    <head>
        <title>Bookings stats</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            function dynamicDates() {
                var d = $("#dates").val();
                $.post("stats.php", { newDate: d });
            }
            $("#dates").change( dynamicDates );
        </script>
    </head>
    <body>
        <select id="dates" name="check_in"><?php echo $dates; ?></select>
        <?php if (!empty($_POST["newDate"])){ echo $_POST["newDate"]; }?>
    </body>
</html>

I'm expecting that whenever I choose a date in the drop-down list, a message is displayed with that date, however anything happens. First I thought it was something about the post, but now I placed a breakpoint at the first line with Firebug and it never gets there, so the script is not running at all.

Why?

Upvotes: 2

Views: 51

Answers (2)

Chris
Chris

Reputation: 221

the javascript for event change is initialized before its dom element.

move the JS after the dom element it referes to OR wrap your js with something like following.

$(document).on('ready', function() {

    // MY FANCY JS CODE

});

[EDIT] may you take a look at this site how jquery works

Upvotes: 0

Niranjan N Raju
Niranjan N Raju

Reputation: 11987

Do like this

<select id="dates" name="check_in" onchange="dynamicDates()">
                                   ^                       ^

or

$("#dates").change(dynamicDates());
                               ^// parenthesis missing

Upvotes: 2

Related Questions