使用DOM表单名中的变量

Using a variable in the form name of DOM

本文关键字：变量 DOM 表单 使用      更新时间：2023-09-26

这看起来很容易，但很难弄清楚。代码应该是不言自明的:

<html>
<head>
<body>
<form id='updatenotes_1139' action=index.php method=POST>
<input size=20 type='input' id='b_user' value="Default value">
<input type=submit>
</form>
<script>
var entered = 1139;
var formName = "updatenotes_"+entered;
//alert(formName);  // Displays "updatenotes_1139"
document.forms[formName]b_user.value = "Hello!";
</script>
</body>
</html>

基本思想是能够通过一个变量告诉JavaScript要编辑什么表单。我不能只使用GetElementByID，因为在完整的应用程序中有许多表单具有相同的输入名称(例如，15个表单每个都有一个"b_user"输入)。这主要是为了让浏览器的自动完成功能可以在所有这些浏览器上运行(对我来说这只是一个脚本，所以它不需要很漂亮，只要它能工作)。

不管它的价值是什么，那里的alert工作得很好。我只是不知道如何构建下一行，因为我能在网上找到的所有示例都是关于在输入id上使用变量而不是表单id。

document.forms[formName].b_user.value = "Hello!"; 
                     // ^ This is how you'd access it.

jsFiddle。

如前所述，id必须是唯一的。然而，name并不一定是。把你的HTML改成:

<input size=20 type='input' name='b_user' value="Default value">

(或者保留id属性，但需要name)

那么你可以这样做:

var form = document.getElementById(formName);
var b_user = form.getElementsByName('b_user')[0];
b_user.value = 'Hello';

你想要这样的东西吗

<html>
<head>
<body>
<form id='updatenotes_1139' action=index.php method=POST>
<input size=20 type='input' id='b_user' value="Default value">
<input type=submit>
</form>
<script>
var entered = 1139;
var formName = "updatenotes_"+entered;
//alert(formName);  // Displays "updatenotes_1139"
var myForm = document.forms[formName];
  console.log(myForm);
  myForm.getElementsByTagName('input')[0].value = "Hello!";
</script>
</body>
</html>
工作本

对于id，我首先尝试使用此代码通过id

访问表单
document[ "formID" ]; // returned undefined
然而，当我使用下面的代码时，它返回了正确的形式 
window[ "formID" ]; // returned form element

不确定这是否是最佳实践。无论如何，这是我最终得到的代码。

var entered = 1139;
var formID = "updatenotes_" + entered;
window[formID].b_user.value = "Hello!";
这里的

小提琴

相关文章：