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>

document.getElementById（'mybutton'）。addEventListener(
“单击”，函数（）{
const inputValue=document.getElementById（'mycompany'）.value；
窗口打开（“https://airtable.com/myformidgoeshere?prefill_Company=“+encodeURIComponent（inputValue））；
}
)

我学到了很多。 它对第一种形式的实例有效，但对第二种形式的实例无效

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

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

---

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

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

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

document.querySelectorAll（'form'）//循环每个表单
.forEach（form=>form.querySelector（“#mybutton”）.addEventListener（'click'，（e）=>{//将通风口添加到相应的表单按钮
const inputValue=form.querySelector（“#mycompany”）.value
窗口打开（“https://airtable.com/myformidgoeshere?prefill_Company=“+encodeURIComponent（inputValue））；
}))

开始吧！
开始吧！

---

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

---

---

。用类替换ID，并在表单中循环

---

---

它适用于第一个实例，因为

getElementById

只返回一个元素的实例，该实例的id与您传递给它的id相同，并且如果页面上有多个实例，它只返回第一个实例

正如您所建议的，您可以使ids独特，这可能是我作为一个快速简单的解决方案所要做的

您可以改用

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>

开始吧！
开始吧！
文件。附录列表（“提交”，功能（e）{
e、 预防默认值（）；
常量inputValue=e.target.elements['mycompany'].value；
窗口打开（“https://airtable.com/myformidgoeshere?prefill_Company=“+encodeURIComponent（inputValue））；
}，假）；

<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)
})

<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>