Как отправить из любой из двух идентичных веб-форм? - PullRequest
Новая
       12

Как отправить из любой из двух идентичных веб-форм?

0 голосов
/ 05 октября 2018

У меня есть следующая простая форма, дважды используемая на одной странице ... 

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

Я многому научился.И это работает для первого экземпляра формы, но не для второго.

Проблема в том, как мне обеспечить, чтобы или из маленьких форм могли производить тот же эффект?

Должен ли идентификатор для ввода текста и кнопки быть уникальным?

И, в любом случае, как одна и та же функция JavaScript может обрабатывать открытие окна для , в зависимости от того, какая форма представленный

Ответы [ 3 ]

0 голосов
/ 05 октября 2018

Глобальный атрибут id определяет уникальный идентификатор (ID), который должен быть уникальным во всем документе

  1. Параметр1 Js Fiddle .Измените идентификаторы, чтобы они стали уникальными в документе (пример 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));
Вариант 2 Js Fiddle .Замените идентификаторы на классы и переберите формы. 
<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)
})
0 голосов
/ 05 октября 2018

Это работает для первого экземпляра, потому что getElementById возвращает только один экземпляр элемента с идентификатором, который вы передаете ему - и если у вас есть несколько экземпляров на странице, он возвращает только первый экземпляр.

Как вы предложили, вы могли бы сделать идентификаторы уникальными, что, вероятно, я бы сделал как быстрое и простое решение.

Вместо этого вы могли бы использовать getElementsByName, не слишком меняя сценарий или разметку, но затемвам также придется выполнить дополнительную проверку, когда одна из форм не имеет ввода, а также, если потенциально оба они имеют ввод (например, если кто-то ввел текст для ввода обеих форм).Похоже, что сделать идентификаторы уникальными было бы проще и быстрее.

Поскольку получение нескольких форм для выполнения одного и того же действия, вероятно, самое чистое, что вы можете сделать, - это создать метод, который прослушивает событие отправки формна вашей странице и использует 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>
0 голосов
/ 05 октября 2018

Да, вам нужно использовать уникальный идентификатор кнопки для захвата каждого события.

Ниже я предлагаю другой подход, использующий 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>
...