how to get value from another page

Question

i was supposed to make a dynamic select box where the choices of the doctors name depends on which is selected in another select box namely specialty.

heres the html

    <select name="docSpec" id="docSpec" onChange="getSpecialty('getSpec.php?spec='+this.value)">

            <option>pick a specialization</option>
            <option value="General">General</option>
            <option value="pediatrics">pediatrics</option>
            <option value="Physician">Physician</option>
            <option value="Cardiologist">Cardiologist</option>
            <option value="Pulmonary">Pulmonary</option>

    </select>   




        <div id="getDoc"> <!-- the contents from getSpec.php are displayed in this div! -->
            <select>
                <option>select doctor</option>
            </select>
        </div>

still in the same file, heres my javascript..

    function getXMLHTTP() { //fuction to return the xml http object
    var xmlhttp=false;  
    try{
        xmlhttp=new XMLHttpRequest();
    }
    catch(e)    {       
        try{            
            xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e){
            try{
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e1){
                xmlhttp=false;
            }
        }
    }

    return xmlhttp;
}



function getSpecialty(strURL) {     

    var req = getXMLHTTP();

    if (req) {

        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                // only if "OK"
                if (req.status == 200) {                        
                    document.getElementById('getDoc').innerHTML=req.responseText;                       
                } else {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                }
            }               
        }           
        req.open("GET", strURL, true);
        req.send(null);
    }

}

i have a separate file for the request which contains this named getSpec.php

<?php $spec=$_REQUEST['spec']; // i converted javascript variable to php by passing it to url
    require_once('dbcon.php');
    $query="select doctorName from doctors where specialty= '$spec'"; // this is why i passed it with jquery
    $result=mysqli_query($conn,$query);
?>
<select name="doctor">
    <option>Select doctor</option>
    <?php 

        while( $row = mysqli_fetch_row($result)) { 

            echo "<option value='$row[0]'>$row[0]</option>"; // for contents of the dropdown

       } ?>

i passed the javascript variable and converted it to php in another page getSpec.php with this code but the problem now is i cant get the value from the selected of <select name="docName> . its in another page name getSpec.php is there a way i can get it?

Answer 1

What is your browser? you can't rely on innerHtml when manipulating DOM. it works differently on each browser, also IE handles XMLHTTPRESPONSE differently than webkit based browsers. I think it is "complete" or "completed" instead of 4.

you tagged your question with jquery, why not use this library for your problem. success handler of $.get and $.ajax and $("some css selector").html('your new html') are good tools.

Edit: I'm adding more details as were requested.
As you asked you can use code below to get innerHtml of select & getDoc: ('#' id for id and '[sth=?]' for equality of attributes)

var old_get_doc_innerHtml = $('#getDoc').html();
var old_select_innerHtml = $('select[name="doctor"]').html();

specifically for your getSpecialty(strURL) code use:

function getSpecialty(strURL) {
    var jqxhr = $.get(strURL, function (data) {
        // runs only if http fetch has succeeded.
        $("#getDoc").html(data);
        alert("Load was performed.");
    })
    .done(function () {
        // another success implementation type
    })
    .fail(function () {
        // runs only if http fetch has failed.
    })
    .always(function () {
        // runs always both in fail and success.
    });
}

Ok, a little code brief:
$ is the jQuery's operator, you can use static functions using $.someFunction() . jQuery's element selector uses a 'CSS Selector' String and the syntax is: $('CSS_SELECTOR') .
By using it you can select all 'label' tags of your page: $('label') or 'input' tags having type='text' $('input[type="text"]') or more. see API Doc selector Page

After selecting your element(s) with css_selector, you can run element specific functions like html() . jQuery never returns void instead it returns element Object so we can use every manipulation function on our variables / DOM elements without using ';'. I used this concept for the jqxhr variable (inside: getSpecialty(strURL), jqxhr was return object of method $.get), where I called .done(...) , .fail(...) , .always(...) of jqxhr .