如何访问与另一个窗体中的类同名的窗体中的类

how to access a class within a form that has the same name as a class in another form

提问人：qwerty12butt 提问时间：5/26/2023 最后编辑：Eflyaxqwerty12butt 更新时间：5/30/2023 访问量：39

问：

我正在尝试创建一个包含多个表单的数据收集页面，每个表单都使用相同的函数来附加数组。问题是我无法弄清楚如何访问表单上的数据。

到目前为止，我所拥有的：

请注意，JavaScript 代码将事件添加到每个表单的按钮中，并且productList();

函数应该从隐藏的输入控件中提取值。

document.addEventListener("DOMContentLoaded", () => {
  const product1 = document.querySelector("#productId_1")
  const product2 = document.querySelector("#productId_2")
  const product3 = document.querySelector("#productId_3")

  product1.addEventListener("submit", e => {
    e.preventDefault();
    var formId = "#productId_1";
    productList(formId);
  });

  product2.addEventListener("submit", e => {
    e.preventDefault();
    var formId = "#productId_2";
    productList(formId);
  });

  product3.addEventListener("submit", e => {
    e.preventDefault();
    var formId = "#productId_3";
    productList(formId);
  });
});


function productList(formId) {

  var a = document.getElementById(formId).getElementsByClassName("productId")[0];

  //testing
  alert(formId, a);
}
<div class="productContainer">
  <h1 class="productTitle">Products:</h1>
  <div class="container">
    <form action="" class="product" id="productId_1">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_1">
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container">
    <form action="" class="product" id="productId_2">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_2">
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container" class="product" id="productId_3">
    <form action="" class="product">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_3">
      <button class="submit">Purchase</button>
    </form>
  </div>
</div>

JavaScript HTML getElementsByClassName

评论

1赞 CBroe 5/26/2023
你在函数中使用了，但你正在传递给它 - 这需要只是;getElementById 仅获取实际的 ID 值，它不基于 CSS 选择器工作。（或者您也可以在这一点上切换到，那么将是正确的。getElementByIdproductList#productId_1productId_1querySelector#productId_1
0赞 CBroe 5/26/2023
并且您想要隐藏输入字段的值，目前您只是选择元素本身 - 需要.getElementsByClassName("productId")[0].value
0赞 CBroe 5/26/2023
并且只接受一个参数，所以即使你的 there 包含任何内容，你也永远不会看到它。（无论如何，您确实应该切换到用于此类调试目的。alertaconsole.log

答：

0赞 David 5/26/2023 #1

getElementById仅采用值，而不采用选择器语法。所以这个：id#

var formId = "#productId_1";

应该是这样的：

var formId = "productId_1";

此外，您会发现它产生的信息比 更多有用。所以这个：console.logalert

alert(formId, a);

应该是这样的：

console.log(formId, a);

这样，代码就可以工作了。 是选定的，是隐藏的。您可以使用 获取其值。formIdid<form>a<input>a.value

例如：

document.addEventListener("DOMContentLoaded",() =>{
    const product1 = document.querySelector("#productId_1")
    const product2 = document.querySelector("#productId_2")
    const product3 = document.querySelector("#productId_3")

    product1.addEventListener("submit",e=>{
        e.preventDefault();
        var formId = "productId_1";
        productList(formId);
    });

    product2.addEventListener("submit",e=>{
        e.preventDefault();
        var formId = "productId_2";
        productList(formId);
    });

    product3.addEventListener("submit",e=>{
        e.preventDefault();
        var formId = "productId_3";
        productList(formId);
    });
});


function productList(formId){
    var a = document.getElementById(formId).getElementsByClassName("productId")[0];
    //testing
    console.log(formId, a.value);
}
<div class="productContainer">
  <h1 class="productTitle">Products:</h1>
  <div class="container">
      <form action="" class="product" id="productId_1">
          <h1>balls</h1>
          <p>a ball bering</p>
          <input type="hidden" class="productId" value="item_1">
          <button class="submit">Purchase</button>
      </form>
  </div>

  <div class="container">
      <form action="" class="product" id="productId_2">
          <h1>balls</h1>
          <p>a ball bering</p>
          <input type="hidden" class="productId" value="item_2">
          <button class="submit">Purchase</button>
      </form>
  </div>

  <div class="container" class="product" id="productId_3">
      <form action="" class="product">
          <h1>balls</h1>
          <p>a ball bering</p>
          <input type="hidden" class="productId" value="item_3">
          <button class="submit">Purchase</button>
      </form>
  </div>
</div>

0赞 Mark Schultheiss 5/26/2023 #2

在这里，我假设您不知道所有的 id，并且在以后的时间点可能会有该类的更多元素（表单）。

function productList(formId) {
  const a = document.getElementById(formId).getElementsByClassName("productId")[0];
  //testing
  alert(formId, a);
}

function onSubmitHandler(event) {
  event.preventDefault();
  const formId = event.target.id;
  productList(formId);
}

document.addEventListener("DOMContentLoaded", () => {
  const forms = document.querySelectorAll('form');
  [...forms].forEach(form => form.addEventListener('submit', onSubmitHandler));
});
<div class="productContainer">
  <h1 class="productTitle">Products:</h1>
  <div class="container">
    <form action="" class="product" id="productId_1">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_1">
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container">
    <form action="" class="product" id="productId_2">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_2">
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container" class="product" id="productId_3">
    <form action="" class="product">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_3">
      <button class="submit">Purchase</button>
    </form>
  </div>
</div>

0赞 Dimas Lanjaka 5/26/2023 #3

必须从参数中删除才能使用#formIddocument.getElementById

查看实时游乐场 https://codepen.io/dimaslanjaka/pen/YzJMKJa

<div class="productContainer">
  <h1 class="productTitle">Products:</h1>
  <div class="container">
    <form action="" class="product" id="productId_1">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_1">
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container">
    <form action="" class="product" id="productId_2">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_2">
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container" class="product" id="productId_3">
    <form action="" class="product">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_3">
      <button class="submit">Purchase</button>
    </form>
  </div>
</div>
<script>
console.clear();

document.addEventListener("DOMContentLoaded", () => {
  const product1 = document.querySelector("#productId_1");
  const product2 = document.querySelector("#productId_2");
  const product3 = document.querySelector("#productId_3");

  product1.addEventListener("submit", function (e) {
    e.preventDefault();
    productList(this.id);
  });

  product2.addEventListener("submit", function (e) {
    e.preventDefault();
    productList(this.id);
  });

  product3.addEventListener("submit", function (e) {
    e.preventDefault();
    productList(this.id);
  });
});

function productList(formId) {
  const a = document.getElementById(formId);
  let hiddenInput;

  if (a) {
    hiddenInput = a.getElementsByClassName("productId")[0];
  }

  //testing
  alert(`hidden input of form #${formId} has value ${hiddenInput.value}`);
}
</script>
0赞 chrwahl 5/30/2023 #4

创建表单时，通常不需要使用 ID。请改用 name 属性 -- 既适用于表单，也适用于所有表单字段。

您已经拥有所有表单的事件侦听器。我做了一个较短的版本。您还可以查看注释掉的行，您可以在列表中获得带有点表示法的特定表单。document.forms

使用 addEventListener（） 方法时，回调函数中的参数是一个事件对象（此处为 submit 事件）。该事件包含有关该事件的所有信息。对于提交事件，提交了什么表单等。因此，在回调函数（此处）中，是表单，使用点表示法，您可以获取所有具有名称的表单字段，例如从该输入元素中获取值。productList(e)e.targete.target.productId.value

document.addEventListener("DOMContentLoaded", e => {
  // for each form in the document
  [...document.forms].forEach(form => {
    form.addEventListener('submit', productList);
  });
  // a specific form
  //document.forms.productId_1.addEventListener('submit', productList);
});

function productList(e) {
  e.preventDefault();
  console.log(e.target.productId.value);
}
<div class="productContainer">
  <h1 class="productTitle">Products:</h1>
  <div class="container">
    <form action="" class="product" name="productId_1">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" name="productId" value="item_1">
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container">
    <form action="" class="product" name="productId_2">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" name="productId" value="item_2">
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container" class="product">
    <form action="" class="product" name="productId_3">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" name="productId" value="item_3">
      <button class="submit">Purchase</button>
    </form>
  </div>
</div>

上一个：为什么使用 Selenium 和 Python 从网站抓取数据时，By.CSS 和 By.CLASS_NAME 选择器无法高效工作？

下一个：error ReferenceError：文档未定义，无法读取未定义的属性（读取“style”）（NextJS 自定义轮播错误）