时间戳

首页 > 解决方案 > 使用 javascript 动态编辑多个相同的 HTML 表单

javascript - 使用 javascript 动态编辑多个相同的 HTML 表单

问题描述

我正在构建一个小型网页，该网页将用于控制一组具有预定义设置操作的 RGB LED。要以图形方式配置操作，使用包含开始和结束像素、相关颜色信息以及要使用的设置操作的表单。

（顺便说一句，没有提交表单，所以如果另一个结构会更好，可以使用它来代替。Forms support name，所以这至少对其中一些有帮助。Javascript 将表单中的数据解析为 JSON稍后使用 AJAX 发送的文件。我已经大致弄清楚了，但是在某些部分，我要提出的问题会使尝试一次简单地从所有表单中读取数据变得复杂方式。）

每个表单都有一些动作（onChange选择动作的下拉菜单或删除按钮），这些动作应该只影响该表单（或它的一部分）。还应该有一种方法可以一次获取所有表单并提取数据以发送到服务器（name由于该数据安全地包含在表单可访问元素中，因此可以正常使用）。

我也无法使用 JQuery 之类的辅助库，因为没有 Internet 访问权限。所有代码都必须托管在服务器上，并且空间非常小（它是托管它的嵌入式处理器）。我现在不想添加 40KB 的 Jquery。

我遇到的问题是我需要更改标签文本并根据选择的选项显示或隐藏元素。

例如，单一颜色只需要一个颜色输入标签，但线性淡入淡出需要两个。其他人不需要颜色，因为它们对现有的颜色模式执行操作。

使用 aform允许name通过查找 form_as_JS_var.elements.name 来访问具有属性集的事物。遗憾的是，这不适用于原始 HTML、spans 或除特定于表单的元素之外的任何东西。我还发现除了（如果这点还不明显，我对 HTML 和 JS 有点陌生）之外，document.getElementById()没有其他的等价物。document我一直希望做类似 .getElementById("color1") 之类的事情（这可能让我为简单起见使用相同的标签，只要它们不在每种形式中重复使用，但事后看来有点愚蠢）。无论哪种方式，我都需要确保每个添加的表单都包含多个全局唯一 ID，并且 以某种方式查找 ID，当受影响的项目和触发更改的项目处于相同形式时！

我确实发现了这个label标签，但它（出于某种莫名其妙的原因）绑定到 ID 而不是名称（使用 JS 设置真的很烦人，但那是另一回事了）。因此，我仍然坚持使用从而document不是任何形式的本地方法访问的全局唯一 ID。

我想使用的 HTML 表单如下：

<form id="color_form_0" class="color_form">
  <fieldset>
    <legend id="legend_0">New Control Entry</legend>
    <label for="legend_0">Type: </label>
      <select name="type" id="type_0">
        <option value="rainbow">Rainbow Pattern</option>
        <option value="repeat">Clone Fill</option>
        <option value="fade">Linear Fade</option>
        <option value="fill">Single Color</option>
        <option value="rotate">Animation</option>
      </select>
    <label for="color1_0">Color 1: </label>
      <input type="color" name="color1" id="color1_0">
    <label for="color2_0">Color 2: </label>
      <input type="color" name="color2" id="color2_0">
    <br>
    <label for="range1_0">Range Start: </label>
      <input type="number" max="80" min="0" id="range1_0">
    <label for="range2_0">Range End: </label>
      <input type="number" max="80" min="0" id="range2_0">
  </fieldset>
</form>

请注意，其中很多都需要唯一的 ID（添加了 _# 部分）。我必须有标签的 GUID 才能正确访问它们（没有 ID 会使标签无法访问，非唯一 ID 使它们都平等地绑定到具有该 ID 的每个项目（跨表单））。我还必须有一个 ID 来更改图例标签的名称（应该更改以匹配当前选择的 Type.

我期望能够做的是：

<form>
  <button onclick="doStuff()">foo</button>
  <some_tag_here>
</form>

doStuff 中的 Javascript 基本上是这样的（可能不完全准确；读作伪代码）：

function doStuff(b){
  var par=b.parentNode;
  var otherTag=par.SomeHowGetOtherTagPerhapsByNonUniqueIdOrClassNameMightAlsoWork();
  otherTag.innerHtml="<blink>Success!!!</blink>";

相反，我可以通过 访问某些项目name，但不是所有我需要更改的项目，并且label标签虽然起初看起来很完美，但无论如何都必须具有唯一的 ID。该name方法确实允许这种树遍历，但它并不完美。我的另一个想法 childNode 是一个数组，我不确定如何搜索我需要修改的一个（或多个）节点，并且可能假设那里已经有某种标识符......比如又是一个身份证。

TL;博士：

我正在尝试以按钮（或其他元素）触发该功能的相同形式编辑项目。有多种形式，我不想影响其他形式。我可以捕获this并获取包含我要编辑的内容的按钮的父级（本质上是表单）。

我无法弄清楚如何有效地或简单地更改表单中不是特定于表单的元素的任何内容（即更改告诉用户某些事情的简单文本）。到目前为止，我发现的所有解决方案都需要进行全局范围的查找，这要求多个表单中的每一个在每个元素或那些label-ed 上都有唯一的 ID，并且当数据就在要查找的元素附近时，我的效率感会降低它。

后者假设 document.getElementByX 比假设的 getParent.getChild 类型的操作更昂贵（这是我想要做的），但为了在编码时不让人头疼，更本地化的方法会很好，即使那是不是这样。

标签： javascripthtmlforms

解决方案

使用该querySelector()方法，它可以应用于一个容器并在该容器内搜索。

function doStuff(b){
  var par=b.parentNode;
  var otherTag=par.querySelector("div");
  otherTag.innerHTML="<span style='color: red;'>Success!!!</span>";
}
<form>
  <button type="button" onclick="doStuff(this)">foo</button>
  <div></div>
</form>

推荐阅读