提取innerhtml的值

I have a div element id my php page

<div class="col-md-8"  id="sub_group" name="sub_group">
    <!--output from other file -->
    </div>

I have made a function to retrieve data from get_course_details.php

    <script type="text/javascript">
        var RequestObject = false;
        if (window.XMLHttpRequest) { 
          RequestObject = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
          RequestObject = new ActiveXObject("Microsoft.XMLHTTP");
        }

    function get_innerHTML(targetID, requestData, targetPHP){
        if (RequestObject){
            RequestObject.open("POST", targetPHP);
            RequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

            RequestObject.onreadystatechange = function(){
                if (RequestObject.readyState == 4 && RequestObject.status == 200) {
                    targetID.innerHTML = RequestObject.responseText; //setting the returned data by server to the address element
                }
            }
            RequestObject.send(requestData); // sending scentre value to fetch scentre addres
        }
        return false; // returned false so that form do not send submit request
    }

I have used this function to get response from PHP

    $(document).ready(function() {
    $("#course").change(function(){
            if ($("#course").val()!=""){
                var requestData = "course_id=" + $("#course").val() ;
                get_innerHTML(sub_group, requestData, "./support/get_course_details.php"); //(targetID, requestData, targetPHP )
            }
            alert($( "#subroup" ).find( "optional" ).value); *// display undefined*
            $('#sub_group').checkboxes('max', 4); //here i want pass the value of optional text i.e. 4
        });

the alert msg shows "undefined" I am unable to fetch value from textbox having id "#optional" i am checking with alert method I have seen that the alert message comes before them innerHTML loaded.

how to i get the value of id("optional") immediate after ('#course').change() function completed

the (get_course_details.php) code is

    <?php
    require_once("../include/dbconn.php");
    $course_id = $_POST['course_id'];
    $statement1 = "select `eligibility`, `fees`, `optional` from course where `course_id`='$course_id';";
    $output1 ="";
    $output2 ="";
    $output3 ="";
    $output4 ="";
    $result1 = $link->query($statement1);
        if($result1){
            $row = $result1->fetch_assoc();
            $output1= $row['eligibility'];
            $output2= $row['fees'];
            $output3= $row['optional']+1;
        }
        else{echo "ERROR";}

    $statement2 = "SELECT group_id, group_name, group_type FROM pssou.`group` where course_id='$course_id';";
    $result2 = $link->query($statement2);
        if($result2){
            for ($row_no = 1; $row_no <= $result2->num_rows; $row_no++) {
                $row = $result2->fetch_assoc();
                if ($row['group_type']=="C"){ // if group_type is compulsory
                    $output4.= "<div class='form-check disabled'><label class='form-check-label'>";
                    $output4 .="<input class='form-check-input' name='group_id' id='group_id' value='".$row['group_id']."' type='checkbox' checked disabled/>". $row['group_name'];
                    $output4.= "</label></div>";
                }
                else{
                    $output4.= "<div class='form-check'><label class='form-check-label'>";
                    $output4.="<input class='form-check-input' name='group_id' id='group_id' value='".$row['group_id']."' type='checkbox'/>". $row['group_name'];
                    $output4.= "</label></div>";
                    }
            }
        }
        else{echo "ERROR";}

    $output = <<< EOF
    <div class="col-md-6">
    <div class="row">
    <label> Minimum Qualification </label>
    <div class="well well-sm" role="alert">
    <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
    $output1
    </div> 
    </div>
    <div class="row">
    <label> Course Fees </label>
    <div class="well well-sm" role="alert">
    <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
    $output2
    </div>
    </div>
    </div>
    <div class="col-md-6">
    <label> subject (Select Any $output3) </label>
    <input type="text" id="optional" value ="$output3"/>
    $output4
    </div>

    EOF;


        echo $output;
        $result1->free();
        $result2->free();

        ?>

Looking at your line:

alert($( "#subroup" ).find( "optional" ).value)

1) is "#subroup" misspelled? is there an element with id="subroup"? (its not subgroup?)

2) the .find() function needs an selector, you passed an element selector, its trying to find an element named "optional" if you want to find an element by its id, then use .find("#optional")

There may have others problems.

If you're using jQuery, why don't you use jquery.ajax()?