JavaScript 使用 document.forms[].elements[] 访问表单元素答案

【问题标题】：JavaScript accessing form elements using document.forms[].elements[]JavaScript 使用 document.forms[].elements[] 访问表单元素
【发布时间】：2010-04-27 09:05:39
【问题描述】：

var loc_name = document.forms['create_<?php echo(htmlspecialchars($window_ID)); ?>'].elements['location_name'];
alert(loc_name);

这只是给了我“未定义”的消息

在哪里...

var loc_name = document.forms['create_<?php echo(htmlspecialchars($window_ID)); ?>'];
alert(loc_name);

给我对象形式的业务。

我是不是把这一切都搞错了？访问此表单元素的“正确”方式是什么。表单元素有正确的name，它有一个id，id相似但不一样。

HTML

<input type="button" name="create_location" value="Create" onclick="
var pre_row_was = $('#pre_form_row_1').innerHTML;
$('#pre_form_row_1').innerHTML = '&lt;td colspan=\'3\'&gt;Validating...&lt;/td&gt;';
var loc_name = document.forms['create_1'].elements['location_name'];
alert(loc_name);
if(loc_name.value == '') { 
  alert('You can\'t leave the room name blank');
  loc_name.focus(); loc_name.value = 'Enter a name';
  $('#pre_form_row_1').innerHTML = pre_row_was; return false;
}
if(loc_name.value == 'Enter a name') {
  alert('You must enter a room name first'); loc_name.focus();
  $('#pre_form_row_1').innerHTML = pre_row_was;
  return false;
}
$('#pre_form_row_1').innerHTML = pre_row_was;
Window_manager.new_window().load_xml('location/create.php?location_name=' + loc_name.value).display();">

尝试对其进行格式化，使其更易于阅读。

【问题讨论】：

请显示生成的 HTML。
你能显示生成的 HTML（浏览器实际看到的），而不是PHP代码吗？另外，最好的调试方法是在客户端上使用调试器（如 Chrome 的 DevTools、Firefox 上的 Firebug、Visual Studio 或 IE 上的脚本调试器）进行调试。
innerHTML 不适用于 jQuery 包装器，它是 DOM 节点的属性。使用.html()。出于理智的考虑，将 JS 从内联事件处理程序属性中踢出到分配 click(function() { ... }) 侦听器的 <script> 块中！
@bobince 和其他innerHTML 位将稍作更改，还有其他事情要做。但是，如果我使用并设置它的内部 HTML，它工作得很好……我遇到的真正问题是想把它留空，但仍然占用一行文本的空间。不过，使用
似乎效果很好。

标签： javascript forms elements

【解决方案1】：

您的 HTML 无效。

tr 元素不能有 form 子元素，form 不能有 td 子元素。

浏览器以不同的方式从这个错误中恢复，包括（如果我没记错的话）将表单元素移动到表格之后，同时将其他所有内容留在原处。

在尝试使用 JS 访问 DOM 之前，先从 valid 文档开始。

当混合表格和表格时，您可以将整个表格放在一个表格中，或将整个表格放在一个单元格中。

您遇到的另一个问题是尝试修改表格行的 innerHTML。这将在许多版本的 Internet Explorer 中中断。切勿使用 innerHTML 修改表的位。

【讨论】：

我认为我以前从未遇到过这样的问题。我想我只是通过移动表单标签来解决它，这样它们就完全在表格标签之外了。我认为表单标签的工作方式首先是有缺陷的。您应该只是表单元素，您必须提供一个 ID，然后任何具有表单 ID 的表单元素都被视为一种表单，无论这些元素在页面上的任何位置......哦，好吧。谢谢
@thecoshman：“我想我已经解决了这个问题，只是通过移动表单标签，使它们完全位于表格标签之外” 对。这就是大卫所说的：您可以将整个表格放入表单中（因此表单 elements 放在单元格内是完全有效的）。但是您不能拥有table > tbody > form > tr 或table > tbody > tr > form > td。验证似乎很痛苦，但它确实可以帮助您避免不同浏览器以不同方式处理无效标记的问题（只给您留下他们如何以不同方式处理 valid 标记的麻烦:-)）。
我的意思是，我认为按照大卫所说的去做解决了那个问题。我从来不知道嵌套表单和表格的局限性。