如何从两个相同的网络表单中的任何一个提交？

Question

我在同一页上使用了两次以下简单形式...

        <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 函数如何处理 提交的 表单的 window 空缺？

Answer 1

是的，您必须使用唯一的按钮 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>

Answer 2

The id global attribute defines a unique identifier (ID) which must be unique in the whole document

Option 1 Js Fiddle。更改 ID，使它们在文档中变得唯一 （示例 id="mybutton1"，id="mybutton2" 与 "mycompany" 相同） 并添加事件侦听器分别为每个按钮。将回调函数定义为全局函数并在每个按钮上调用它。

function newWindow(inputArea) { //pass input field ID as argument
    const inputValue = document.getElementById(inputArea).value;
    window.open("https://airtable.com/myformidgoeshere?prefill_Company=" + encodeURIComponent(inputValue));
}

document.getElementById('mybutton1').addEventListener('click', newWindow.bind(this, 'mycompany1', false));
document.getElementById('mybutton2').addEventListener('click', newWindow.bind(this, 'mycompany2', false));

Option 2 Js fiddle。将 ID 替换为类并遍历表格。

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

//get DOM elements and return an array
let form = [].slice.call(document.querySelectorAll('.form'));

//loop through each form
form.forEach(e => {
    function openWindow() {
        let inputField = e.querySelector('.form-control').value;
        window.open("https://airtable.com/myformidgoeshere?prefill_Company=" + encodeURIComponent(inputField));
    }
    e.querySelector('.mybutton').addEventListener("click", openWindow)
})

Answer 3

它在第一个实例中起作用，因为 getElementById returns 只有一个带有您传递给它的 ID 的元素实例 - 如果您在页面上有多个实例，它 returns 仅第一个实例。

正如您所建议的，您可以使 ID 唯一，这可能是我会做的一种快速简便的解决方案。

您可以改为使用 getElementsByName 而无需过多更改您的脚本或标记，但是当其中一个表单没有任何输入时以及是否有可能，您还必须进行一些额外的验证他们都有输入（就像有人输入两种形式的文本输入一样）。似乎使 id 唯一会更容易和更快。

就让多个表单执行相同的操作而言，您可以做的最简洁的事情可能是创建一个方法来侦听页面上表单的提交事件并使用 event.target.elements['elementName'] 获取按名称的特定输入。像这样：

<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" name="mycompany">
        <div class="input-group-append">
            <input class="btn btn-primary btn-lg" type="submit" name="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" name="mycompany">
        <div class="input-group-append">
            <input class="btn btn-primary btn-lg" type="submit" name="mybutton">Get started!</button>
        </div>
    </div>
</form>

<script>
    document.addEventListener("submit", function(e) {
        e.preventDefault();
        const inputValue = e.target.elements['mycompany'].value;
        window.open("https://airtable.com/myformidgoeshere?prefill_Company=" + encodeURIComponent(inputValue));
    }, false);
</script>

如何从两个相同的网络表单中的任何一个提交？

How to submit from either of two identical web forms?

javascript

forms

window.open