Question

When I load the page and change the option in the select menu, in debugging consoles I get an error saying that descrip() is not a function

<script type="text/javascript">
function descrip(){ 
    var aid = new XMLHttpRequest("GET",document.ads.subject.value,false);  
    var file = "includes/ads/"+aid+".txt";
    document.ads.descrip.write(file);
    return aid;
}
</script>

<form name="ads" method="post" action="scripts/del_advert_script.php">
<label>Advertisements by subject:</label><select name="subject" id="sub" onChange="descrip()">
        //PHP Block that works
    </select>
    <textarea id="descrip" name="description" cols="100" rows="3" readonly="readonly">

    </textarea>
    <br />
    <input type="submit" value="Submit" />
</form>

Answer 1

There are four issues I see here: your XMLHttpRequest, your method of writing text to a <textarea>, your method of getting the currently selected value of a <select>, and your function shares the same name as an ID (a problem only in IE).

AJAX doesn’t quite work the way you have it above, as unfortunate as that is. Instead, you have to jump through some hoops in order to get a request running and get its responseText back. Here is some example code:

var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xhr.onreadystatechange = function () {
    // When the server has returned a response, and it is good, we're ready
    if (xhr.readyState === 4 && xhr.status === 200) {
        // do something with xhr.responseText
    }
};
// Three arguments: type of request, url, and should the request be async
xhr.open("GET", "url here", true);
xhr.send(null);

That is a very light example, but it does demonstrate the generic concept. For more on AJAX in general, see the MDC’S excellent tutorial on beginning AJAX.

Next, there is no write function for a <textarea> in the DOM. In order to change what is in the textarea, you need to use its value property:

your_textarea.value = "something here";

Or if you want to append new text to the textarea:

your_textarea.value += "something here";

This will insert text properly.

Thirdly, your method of ascertaining the current selected <option>‘s value in a <select> also does not work (unfortunately). In order to grab the value of the currently selected option, you have to use the selectedIndex property of a <select> as well as its options property:

your_select.options[your_select.selectedIndex].value;

This will properly return the value of the currently selected option.

Finally, and this is only an issue in IE, your function shares the same name as an ID. In IE, any IDs get defined globally as DOM elements, so this is an issue. So, simply changing your function’s name to something else should alleviate that issue.

All-in-all, here is the code I believe works (though untested):

<script type='text/javascript'>
function select_change() {
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    xhr.onreadystatechange = function () {
        // When the server has returned a response, and it is good, we're ready
        if (xhr.readyState === 4 && xhr.status === 200) {
            var file = "includes/ads/" + xhr.responseText + ".txt.";
            document.ads.descrip.value += file;
        }
    };
    // Three arguments: type of request, url, and should the request be async
    xhr.open("GET", 
            document.ads.subject.options[document.ads.subject.selectedIndex].value, 
            true);
    xhr.send(null);
}
</script>

<form name="ads" method="post" action="scripts/del_advert_script.php">
<label>Advertisements by subject:</label><select name="subject" id="sub" onchange="select_change()">
        //PHP Block that works
    </select>
    <textarea id="descrip" name="description" cols="100" rows="3" readonly="readonly">

    </textarea>
    <br />
    <input type="submit" value="Submit" />
</form>