Как отправить форму?

Question

[Алексей Чернов]

В консоли выдает ошибку.

<section class="header-upload"><div class="wrap"><div class="header-upload__wrap">   
 <form id="wpua-edit-13" class="wpua-edit" action="" method="post" enctype="multipart/form-data">
      <div class="wpua-edit-container">
      <input type="hidden" name="wp-user-avatar" id="wp-user-avatar-existing" value="2395">
      <p id="wpua-upload-button-existing">
        <input name="wpua-file" id="wpua-file-existing" type="file">
        <button type="submit" class="button" id="wpua-upload-existing" name="submit" value="Загрузить">Загрузить</button>
      </p>
    </div>
      <input type="hidden" name="wpua_action" value="update">
      <input type="hidden" name="user_id" id="user_id" value="13">
      <input type="hidden" id="_wpnonce" name="_wpnonce" value="afc77a7469">
      <input type="hidden" name="_wp_http_referer" value="/">
 </form>
  </div></div></section>

var uploadAvatar = () => {
  var popup = document.querySelector('.header-upload'),
        form = popup.getElementsByTagName('form'),
        container = document.querySelector('#wpua-upload-button-existing'),
        input = container.getElementsByTagName('input')[0];

  input.onchange = function() {
    form.submit()
  }
}

Answer 1

[Дмитрий Беляев]

Метод getElementsByTagName возвращает не один элемент, а коллекцию, у которой нет метода submit

Возможные решения:

1. Выбрать конкретный элемент из коллекции по индексу: form = popup.getElementsByTagName('form')[0]
   
2. Выбрать конкретный элемент по селектору: form = popup.querySelector('form')
   
3. Выбрать элемент по id: form = document.getElementById('wpua-edit-13')