Question

I have an application here

Now lets say in my database it looks like this:

Course Table:

CourseId CourseNo CourseName          Duration
1        INFO101  ICT                 3/4
2        INFO102  Computing           2/3
3        INFO103  Computing Science   3

In the course dropdown menu it displays the list of couses from the database as so:

Please Select
INFO101-ICT 
INFO102-Computing
INFO103-Computing Science 

In the duration dropdown menu it displays a duration options which are below:

Please Select
1
1/2
2
2/3
3
3/4
4
4/5
5
5/6
6
6/7
7
7/8
8
8/9
9
9/10
10

Now what is suppose to happen in the applcation is that when you select a course from the drop down menu, then it should select the duartion from the duration drop down menu which matches the duration which belongs to the course in the database.

So for example if I select course INFO101-ICT from the coure drop down menu, then it should automatically select duration 3/4 in the duration drop down menu.

But in the application it is not doing this, when I select a course, it is just select a blank option in the duration drop down menu.

My question is how can I get the correct duration selected in the duration drop down menu depending on the course selected from the course drop down menu?

Below is the full code for the application:

     <?php

        // connect to the database
        include('connect.php');


        /* check connection */
        if (mysqli_connect_errno()) {
            printf("Connect failed: %s\n", mysqli_connect_error());
            die();
        }

        ?>

        <h1>EDIT COURSE</h1>

        <?php

        $min_year     = 1;
        $max_year     = 10;
        $years        = range($min_year, $max_year); // returns array with numeric values of 1900 - 2012
        $durationHTML = '';
        $durationHTML .= '<select name="duration" id="newDuration">' . PHP_EOL;
        $durationHTML .= '<option value="">Please Select</option>' . PHP_EOL;

        foreach ($years as $year) {
            $durationHTML .= "<option>$year</option>" . PHP_EOL;
            if ($year != $max_year) {
                $nextYear = $year + 1;
                $durationHTML .= "<option>$year/$nextYear</option>" . PHP_EOL;
            }
        }
        $durationHTML .= '</select>';

        $newCourseNo = (isset($_POST['CourseNoNew'])) ? $_POST['CourseNoNew'] : '';

        $coursequery = "
        SELECT CourseId, CourseNo, CourseName, Duration
        FROM Course
        ORDER BY CourseNo
        ";

        $courseqrystmt = $mysqli->prepare($coursequery);
        // You only need to call bind_param once

        $courseqrystmt->execute();

        $courseqrystmt->bind_result($dbCourseId, $dbCourseNo, $dbCourseName, $dbDuration);

        $courseqrystmt->store_result();

        $coursenum = $courseqrystmt->num_rows();

        $courseHTML = '';

        $courseHTML = '<select name="courses" id="coursesDrop">' . PHP_EOL;
        $courseHTML .= '<option value="">Please Select</option>' . PHP_EOL;

        $courseInfo = array();

        while ($courseqrystmt->fetch()) {
            $courseHTML .= sprintf("<option value='%s'>%s - %s</option>", $dbCourseId, $dbCourseNo, $dbCourseName) . PHP_EOL;

            $courseData               = array();
            $courseData["CourseId"]   = $dbCourseId;
            $courseData["CourseNo"]   = $dbCourseNo;
            $courseData["CourseName"] = $dbCourseName;
            $courseData["Duration"]   = $dbDuration;

            array_push($courseInfo, $courseData);
        }


        $courseHTML .= '</select>';


        $courseform = "
        <form action='" . htmlentities($_SERVER['PHP_SELF']) . "' method='post' id='courseForm'>
        <p><strong>Course:</strong> {$courseHTML} </p>   
        </form>";

        echo $courseform;



        $editcourse = "
        <form id='updateCourseForm'>

        <p><strong>New Course Details:</strong></p>
        <table>
        <tr>
        <th>Duration (Years):</th> 
        <td id='data'>{$durationHTML}</td>
        </tr>
        </table>

        </form>
        ";

        echo $editcourse;

        ?>

        < script type = "text/javascript" > 
$(document).ready(function() {

    var courseinfo = '<?php echo json_encode($courseInfo);?>';

    $('#coursesDrop').change(function() {

        var courseId = $(this).val(),
        coursedata;

        for (var i = 0, l = courseinfo.length; i < l; i++) {
            if (courseinfo[i].CourseId == courseId) {
                coursedata = courseinfo[i];
            }
        }

        var index = $('#newDuration option[value="' + courseinfo.Duration +  '"]').attr('selected','selected');
        alert(courseinfo.Duration);

    });
});
         < /script>

Answer 1

One problem is this:

if (courseinfo[i].courseId = courseId) {
    coursedata = courseinfo[i];
}

Should be this:

if (courseinfo[i].courseId == courseId) {
    coursedata = courseinfo[i];
}

You want the comparison operator == rather than =.

Another problem is the following is a literal string rather than calling the php function:

var courseinfo = '<?php=json_encode($courseInfo);?>';

View the page source and you will see that courseinfo has a value of '<?php=json_encode($courseInfo);?>' rather than the output of json_encode($courseInfo). You need to fix this up to output the php.

Edit 2

There are few more problems in your code. Here is the code that will work.

Javascript

var courseinfo = [{"CourseId":1,"CourseNo":"INFO101","CourseName":"Bsc Information Communication Technology","Duration":"3\/4"},{"CourseId":2,"CourseNo":"INFO102","CourseName":"Bsc Computing","Duration":"3\/4"},{"CourseId":8,"CourseNo":"INFO103","CourseName":"Business and Finance","Duration":"3"},{"CourseId":7,"CourseNo":"INFO104","CourseName":"English","Duration":"3\/4"},{"CourseId":9,"CourseNo":"INFO105","CourseName":"Mathematics","Duration":"3\/4"},{"CourseId":10,"CourseNo":"INFO106","CourseName":"Law","Duration":"3"}];

$('#coursesDrop').change(function() {

    var courseId = $(this).val(),
        coursedata, i;

    for (i = 0, l = courseinfo.length; i < l; i++) {
        if (courseinfo[i].CourseId == courseId) {
            coursedata = courseinfo[i];
        }
    }

    var index = $('#newDuration').val(coursedata.Duration);

});​

Demo

Here were the problems.

You need to remove the single quote around your courseinfo array:

var courseinfo = [...];

Your if statement needs the correct case for it’s variable courseinfo CourseId. In the array is CourseId so this is what it needs to be in the if comparison:

if (courseinfo[i].CourseId == courseId) {
    ...
}

Use coursedata.Duration to set the #newDuration val.

var index = $('#newDuration').val(coursedata.Duration);