Javascript does not recognise dynamic div content

I have a script i have been battling with now for like a week.

I have a page which has a div with id ("content"). Now I loaded some content, a form contained in a div tag to be specific, into this div VIA Ajax, and it is displaying fine

Now, the challenge is - When the form is submitted, Im am calling a function that will disable all the field on the element in that div tag. I always get the error "undefined".

It seems that the div, that i brought in to the page isn't recognized by javascript..

I have searched google, bing, yahoo..i just havent found the solution yet...

Please, what do I do??

I have included the code below --

+++++++++ The code below for my external javascript file

++++++++++++++++++++

// JavaScript Document

var doc = document;
var tDiv;
var xmlHttp;
var pgTitle;

function getXMLObj(){
        if (window.XMLHttpRequest){
          // code for IE7+, Firefox, Chrome, Opera, Safari
                Obj = new XMLHttpRequest();
          }
        else if (window.ActiveXObject){
            // code for IE6, IE5
                Obj = new ActiveXObject("Microsoft.XMLHTTP");
          }
        else{
                alert("Your browser does not support Ajax!");
        }
        return Obj;
}


function loadCont(toLoad, view){
    doc.getElementById('loadBlank').innerHTML = '<div id="loading">Processing Request...</div>';
    var url;
    switch(toLoad){
        case 'CI':
            pgTitle = "Administration - Company Information";
            url = "comp_info.php?v=" + view + "&sid=" + Math.random();
            break;
        case 'JB':
            pgTitle = "Administration - Jobs";
            url = "jobs.php?v=" + view + "&sid=" + Math.random();
            break;
        case 'US':
            pgTitle = "Administration - Users";
            url = "users.php?v=" + view + "&sid=" + Math.random();
            break;
        case 'EP':
            pgTitle = "Administration - Employees";
            url = "emp.php?v=" + view + "&sid=" + Math.random();
            break;
        case 'AP':
            pgTitle = "Administration - Recruitments";
            url = "applicants.php?v=" + view + "&sid=" + Math.random();
            break;
        case 'JV':
            pgTitle = "Administration - Recruitments";
            url = "jobvacancy.php?v=" + view + "&sid=" + Math.random();
            break;
    }

    xmlHttp = getXMLObj();
    if (xmlHttp !== null && xmlHttp !== undefined){
            xmlHttp.onreadystatechange = loadingContent;
            xmlHttp.open('GET', url, true);
            xmlHttp.send(null);
    }
}

function loadingContent(){

    if (xmlHttp.readyState == 4 || xmlHttp.readyState == 'complete'){
            //Show the loading and the title, but hide the content...
            if (xmlHttp.status == 200){
                doc.getElementById('dMainContent').innerHTML = parseScript(xmlHttp.responseText);
                doc.getElementById('loadBlank').innerHTML = '';
            }
            else{
                doc.getElementById('dMainContent').innerHTML = 'Sorry..Page not available at this time. <br />Please try again later';
                doc.getElementById('loadBlank').innerHTML = '';
            }
    }
    if (xmlHttp.readyState < 4){
            //Show the loading and the title, but hide the content...
            doc.getElementById('ActTitle').innerHTML = pgTitle;
            doc.getElementById('dMainContent').innerHTML = '';
    }
}

function valCompInfo(){
    //First Disable All the elements..
    alert('I was hree');
    DisEnaAll('CompForm');
    //Now..lets validate the entries..
}

function DisEnaAll(contId){
    //alert(doc.getElementById(contId).elements);
    var theId = doc.getElementById(contId).elements;

    try{
        var numElems = theId.length;

        for (var i=0; i < (numElems - 1); i++){
            (theId[i].disabled == false) ? (theId[i].disabled = true) : (theId[i].disabled = false);                
        }
    }
    catch(e){
        var msg = "The following error occurred: \n\n";
        msg += e.description
        alert(msg); 
    }

}


// http://www.webdeveloper.com/forum/showthread.php?t=138830
f开发者_如何学JAVAunction parseScript(_source) {
    var source = _source;
    var scripts = new Array();

    // Strip out tags
    while(source.indexOf("<script") > -1 || source.indexOf("</script") > -1) {
        var s = source.indexOf("<script");
        var s_e = source.indexOf(">", s);
        var e = source.indexOf("</script", s);
        var e_e = source.indexOf(">", e);

        // Add to scripts array
        scripts.push(source.substring(s_e+1, e));
        // Strip from source
        source = source.substring(0, s) + source.substring(e_e+1);
    }

    // Loop through every script collected and eval it
    for(var i=0; i<scripts.length; i++) {
        try {
            eval(scripts[i]);
        }
        catch(ex) {
            // do what you want here when a script fails
        }
    }

    // Return the cleaned source
    return source;
 }

This code is on the main page where the javascript is

<div id="dMainContent">

</div>
</body>
</html>

And finally, the content of the page i am loading via ajax..

<div style="width:738px" id="CompForm">
    <div class="tdright">
        <a href="#" class="lnkBtn" onclick="valCompInfo();"><?php echo $btnNm; ?></a> &nbsp;
     </div>
</div>

That's the code..

Thanks

The issue is with div tag (id "CompForm") which is not a HTML form.

"elements" is a collection of the form element not div element. So when trying to access div.elements the property is undefined.

See MSDN, form.elements is part of DOM level 1 (according to MSDN)

http://msdn.microsoft.com/en-us/library/ms537449%28v=VS.85%29.aspx

Add your Javascript functions or external JS file to the original page.

this is not JavaScript....

doc.getElementById(contId).elements

but is used in your JavaScript... you will definitely not get anything. (null)

I don't think this is valid either:

theId[i].disabled == false

EDIT: Note per comments: this is NOT the answer :) See comments for details of why.

Left as an answer simply as a learning aid aid as suggested.

Shouldn't

xmlHttp.onreadystatechange = loadingContent; 

be

xmlHttp.onreadystatechange = loadingContent(); 

or

loadingContent();

and that function should return a value if you want to assign it like that...