Question

I have the following basic javascript function that I call when an onClick event occurs

function testMe() {
    var oForm = document.forms["ExampleForm"]["First Name"].value;
    console.log(oForm);
    if (oForm == "") {
        window.alert("This is a test");
    }
    return false;
}

However each time I click on the button, I get the error Cannot read property "First Name" of undefined javascript in the console. The form element First Name exists and does the form name ExampleForm

What am I overlooking or doing wrong?

EDIT 0

Although the example I have running at http://jsfiddle.net/3Ayd8 works it does not work when I run the same code on a page on an internal website.

EDIT 1

Here is the output of console.log(document.forms)

<form method="post" action="sample.aspx" id="form">

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form'];
if (!theForm) {
    theForm = document.form;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>

<script type="text/javascript">
    //<![CDATA[

function NewDocument(parentNodeId, classId){ 
    if (parent != window) { 
        parent.NewDocument(parentNodeId, classId); 
    } else { 
        window.top.document.location = '/default.aspx?section=content&action=new&nodeid=' + parentNodeId + '&classid=' + classId; 
    } 
}
function NotAllowed(action){ 
    if (parent != window) { 
        parent.NotAllowed('', action); 
    } else { 
        window.top.document.location = '/default.aspx?section=content&action=notallowed&subaction=' + action; 
    } 
}
function DeleteDocument(nodeId) { 
    if (parent != window) { 
        parent.DeleteDocument(nodeId); 
    } else { 
        window.top.document.location = '/default.aspx?section=content&action=delete&nodeid=' + nodeId; 
    } 
}
function EditDocument(nodeId) { 
    if (parent != window) { 
        parent.EditDocument(nodeId); 
    } else { 
        window.top.document.location = '//default.aspx?section=content&action=edit&nodeid=' + nodeId; 
    } 
}
//]]>
<input type="hidden" name="vmode" id="vmode" value="2">
</div>
<script src="/GetResource.ashx?scriptfile=%2fCMSScripts%2fcmsedit.js" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=aK015nKOf8Jw44OCiklcSydFiWaSIB9l6ZwdCQaMAWlevtaFiOw7Urzac1pIZ9Rs0&amp;t=34d147fd" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=aK015nKOf8Jw44OCiklcSydFiWaSIB9l6ZwdCQaMAWm_idfkOBcdRXBrkc0cxAR10&amp;t=34d147fd" type="text/javascript"></script>
<div class="aspNetHidden">

    <input type="hidden" name="__SCROLLPOSITIONX" id="__SCROLLPOSITIONX" value="0">
    <input type="hidden" name="__SCROLLPOSITIONY" id="__SCROLLPOSITIONY" value="0">
</div>
    <div id="manPortal" style="background:none;">
    <div id="CMSHeaderPad" style="height: 22px; line-height: 0px; "></div><div id="CMSHeaderDiv" style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: auto; z-index: 10000; overflow: hidden; width: 100%; ">
<script type="text/javascript">
    //<![CDATA[
if ( (parent != null) && (parent.IsCMSDesk) ) { infoElem = document.getElementById('manPortal_pnlPreviewInfo'); if (infoElem) {if ( infoElem.style ) { infoElem.style.display = 'none'; } else { infoElem.display = 'none'; } }}
//]]>
</script><!-- -->
    </div>
</div><script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('manScript', 'form', [], [], [], 90, '');
//]]>
</script>


<script type="text/javascript" src="/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" src="/plugins.js"></script>
<script type="text/javascript" src="/script.js?v=0.4"></script>

    <div class="zoneMainContent">
<div class="one-col-layout">
    <div class="col-one">
    <script type="text/javascript">
function testMe() {
    console.log(document.forms);
    console.log(document.getElementById("ExampleForm"));
    return false;
}
</script>

    <input id="FirstName" name="FirstName" type="text" value=""> <input name="submit" onclick="return testMe();" type="submit" value="submit">

    </div>
</div>
        <div style="clear:both;line-height:0px;height:0px;"></div>
    </div>
</div></form>

Answer 1

1. Instead of “First Name” you should use “FirstName”. This was not the main issue, because “ExampleForm” was not found in the document.

2. If you have “ExampleForm” in an iFrame and you try to reach it from the outer document then your attempt will be unsuccessful, you need to reach “ExampleForm” from the page inside the iFrame in this case

3. If your page is inside an iframe and you try to reach “ExampleForm” which is in the outer document then you can use the window.parent property