Javascript function not being recognized as a function

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>

If you're doing this in IE the problem might be that you have a textarea with the id="descrip", try changing that id. — david
– david, Commented Jun 2, 2011 at 23:05
The code in your JavaScript function makes no sense -- you're creating an XMLHttpRequest object, putting the object into a string, and trying to "write" to a TEXTAREA. What are you trying to accomplish? — user149341
– user149341, Commented Jun 2, 2011 at 23:06
@david you beat me to it, but ur comment came while I was writing my answer. — Cyberherbalist
– Cyberherbalist, Commented Jun 2, 2011 at 23:10

user236139 · Accepted Answer · 2011-06-02 23:26:06Z

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>

Cyberherbalist · Accepted Answer · 2011-06-02 23:09:30Z

3

This is a wild guess, as I am by no means a Javascript person, but I am wondering if giving your textarea the id=descrip (same name as your function) might be confusing the interpreter?

answered Jun 2, 2011 at 23:09

Cyberherbalist

12.4k18 gold badges91 silver badges125 bronze badges

Comments

Chuck · Accepted Answer · 2011-06-02 23:14:29Z

1

In Internet Explorer, element ids get defined as constants on window. The fact that your function is named the same as your element's id creates a conflict, and the element is winning, so IE sees you trying to call a textarea instead of a function.

answered Jun 2, 2011 at 23:14

Chuck

238k31 gold badges306 silver badges392 bronze badges

Collectives™ on Stack Overflow

Javascript function not being recognized as a function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related