How to submit from either of two identical web forms?

Question

I have the following simple form used twice on the same page...

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

The following JavaScript grabs the text input and uses it to form a URL parameter for a URL we send the user to...

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

That much I have learned. And it works, for the first form instance - but not the second.

The problem is, how do I ensure that either of the little forms can produce the same effect?

Do the id for the text input and button need to be unique?

And, either way, how can the same JavaScript function handle the window opening for whichever of the forms is submitted?

Answer 1

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

---

1. Option 1 Js Fiddle. Change the ID's so they become unique within the document (example id="mybutton1", id="mybutton2" same for "mycompany") and add the event listeners separately for each button. Define the callback function as a global function and call it on each button.

---

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

---

2. Option 2 Js fiddle. Replace ID's with classes and loop through the forms.

---

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