Question

我有一个基本的javascript函数，我在onClick事件发生时调用

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

然而，每次单击按钮，我都会在控制台中收到错误Cannot read property "First Name" of undefined javascript。表单元素First Name存在，表单名称为ExampleForm

我忽视或做错了什么？

编辑0

虽然我在http://jsfiddle.net/3Ayd8运行的示例有效，但当我在内部网站的页面上运行相同的代码时，它不起作用。

编辑1

以下是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

您不能在元素的名称或ID中包含空格。

这是根据HTML spec。

Answer 2

您应该使用“FirstName”而不是“First Name”。这不是主要问题，因为在文档中找不到“ExampleForm”。
如果您在iFrame中有“ExampleForm”并且您尝试从外部文档中访问它，那么您的尝试将失败，您需要在此情况下从iFrame内的页面到达“ExampleForm”
如果您的网页位于iframe内，并且您尝试访问外部文档中的“ExampleForm”，则可以使用window.parent属性

Answer 3

从表单示例表单中的字段First Name的名字中删除空格。

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

希望这有帮助

无法读取未定义的javascript的属性“First Name”

3 个答案: