how to display correct data in a text input using jquery

Question

Below I have a form which consists of a text input whichs holds details of the student's current course and a course drop down menu which consists of a list of courses.

<form action='editstudent.php' method='post' id='studentForm'>
<p><strong>Students:</strong> <select name="student" id="studentsDrop">
<option value="">Please Select</option>
<option value='38'>u0495333 - Jack smith</option>
<option value='1'>u0867587 - Mayur Patel</option>
<option value='36'>u0867588 - paul smith</option>
</select> </p>   
<div id='targetdiv'></div> 
</form>


    <form id='editForm'>

        <p><strong>Current Student Details</strong></p>
        <table>
<tr>
<th></th>
<td><input type='hidden' id='currentStudentId' name='StudentIdcurrent' value='' /> </td>
</tr>

        <tr>
        <th>Course:</th>
        <td><input type='text' id='currentStudentCourse' name='StudentCoursecurrent' readonly='readonly' value=''/> </td>
        </tr>
        </table>

        <p><strong>New Student Details</strong></p>
        <table>
<tr>
<th></th>
<td><input type='hidden' id='newStudentId' name='StudentIdNew' value='' /> </td>
</tr>
        <tr>
        <th valign='top'>Course:</th>
        <td id='datacourse' valign='top'><select name="courses" id="newStudentCourse">
    <option value="">Please Select</option>
    <option value='1'>INFO101 - Bsc Information Communication Technology</option>
    <option value='2'>INFO102 - Bsc Computing</option>
    <option value='8'>INFO103 - Business and Finance</option>
    <option value='7'>INFO104 - English</option>
    <option value='9'>INFO107 - Mathematics and Stats</option>
    <option value='16'>INFO120 - Science</option>
    </select>
        <div id='studentCourseAlert'></div></td>
        </tr>
        </table>

        </form>

Now with the code below it displays the course number and course name in the text input and it selects the student's course from the list of couses in the drop down menu by loacating the course's id.

$(document).ready( function(){

    var studentinfo = [{"StudentId":1,"CourseId":19,"CourseNo":"BIO234","CourseName":"Biology"},
{"StudentId":38, "CourseId":1,"CourseNo":"INFO101","CourseName":"Bsc Information Communication Technology"},
{"StudentId":36, "CourseId":8,"CourseNo":"INFO103","CourseName":"Business and Finance"} ];

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

    var studentId = $(this).val();

        if (studentId !== '') {
    for (var i = 0, l = studentinfo.length; i < l; i++)
    {
    if (studentinfo[i].StudentId == studentId) { 


    var currentcourse = $('#currentStudentCourse').val(studentinfo[i].CourseNo + " - " + studentinfo[i].CourseName);
    var newcourse = $('#newStudentCourse').val(studentinfo[i].CourseId);

    $('.courses').val(newcourse);

    break;       
    }
    }  
    }

    });

});

The problem I have is below. I want to update the txt input so that it displays the new course details. But the problem I can't seem to figure out if is that instead of displaying the course number and course name in the text input, it dislays the updated course's id into the text input. Now I know why it is doing this as that jQuery("#currentStudentCourse").val(newStudentCourse); will display the course id value into the text input. But my question is that how can I use the course id in order to find the id's course number and course name so that I can display the course number and course name in the text input after the update?

function submitform() {    

$.ajax({
type: "POST",
url: "updatestudent.php",
data: $('#editForm').serialize(),
success: function(html){

var newStudentCourse = jQuery("#newStudentCourse").val();

jQuery("#currentStudentCourse").val(newStudentCourse);


}
});        
}

UPDATE:

Here is an application where you can select a student, then pik a new course and submit it. You will see in the Current Course text input that it changes into a number which is the course id. Jsfiddle which contains the same code is in this jsfiddle: http://jsfiddle.net/Dst4Q/6/

Answer 1

You should be able to get the info you want from

$("#newStudentCourse option:selected").text()