时间戳

首页 > 解决方案 > 如何从两个相同的 Web 表单中的任何一个提交？

javascript - 如何从两个相同的 Web 表单中的任何一个提交？

问题描述

我在同一页面上使用了以下简单表格两次...

        <form>
          <div class="input-group input-group-lg mb-3 p-2 bg-warning rounded">
            <input type="text" class="form-control" placeholder="My company name" aria-label="My company name" aria-describedby="basic-addon2" id="mycompany">
            <div class="input-group-append">
              <button class="btn btn-primary btn-lg" type="button" id="mybutton">Get started!</button>
            </div>
          </div>
        </form>

以下 JavaScript 抓取文本输入并使用它为我们发送给用户的 URL 形成 URL 参数...

  <script>
    document.getElementById('mybutton').addEventListener(
      "click", function(){
        const inputValue = document.getElementById('mycompany').value;
        window.open("https://airtable.com/myformidgoeshere?prefill_Company=" + encodeURIComponent(inputValue));
      }
    )
  </script>

我学到了这么多。它适用于第一个表单实例 - 但不是第二个。

问题是，我如何确保任何一种小形式都能产生相同的效果？

文本输入和按钮的 id 是否需要唯一？

而且，无论哪种方式，同一个 JavaScript 函数如何处理提交的任何表单的窗口打开？

标签： javascriptformswindow.open

解决方案

是的，您必须使用唯一的按钮 ID 来捕获每个事件。

下面我建议另一种方法，使用 querySelctors 来遍历 DOM。

document.querySelectorAll('form') // loop each form
  .forEach(form => form.querySelector('#mybutton').addEventListener('click', (e) => { //add the vent to the corresponding form button
    const inputValue = form.querySelector('#mycompany').value
    window.open("https://airtable.com/myformidgoeshere?prefill_Company=" + encodeURIComponent(inputValue));
  }))
<form>
  <div class="input-group input-group-lg mb-3 p-2 bg-warning rounded">
    <input type="text" class="form-control" placeholder="My company name" aria-label="My company name" aria-describedby="basic-addon2" id="mycompany">
    <div class="input-group-append">
      <button class="btn btn-primary btn-lg" type="button" id="mybutton">Get started!</button>
    </div>
  </div>
</form>

<form>
  <div class="input-group input-group-lg mb-3 p-2 bg-warning rounded">
    <input type="text" class="form-control" placeholder="My company name" aria-label="My company name" aria-describedby="basic-addon2" id="mycompany">
    <div class="input-group-append">
      <button class="btn btn-primary btn-lg" type="button" id="mybutton">Get started!</button>
    </div>
  </div>
</form>

推荐阅读