Поля формы пусты при сериализации при обработке через JavaScript Class

Question

Я надеюсь, что мой вопрос как-то понятен, у меня есть класс ES6, который инициализируется в обычной форме, которая затем обрабатывается с помощью вызова ajax (не включенного в пример).

Когда я пытаюсь сериализовать formData, он возвращает пустое значение вместо значения ввода first_name. Другие действия в форме, такие как добавление или удаление классов и т. Д. c. работают нормально, просто форма не возвращает никаких данных. Я предполагаю, что я каким-то образом потерял свои $. Это в объеме. Я новичок, пытаюсь построить свой JavaScript в модулях и классах и в абстрактном кодировании. Форма работает, как и ожидалось, когда я вызываю и обрабатываю ее с помощью обычного jQuery готового кода, но просто не могу понять, в чем здесь проблема.

script. js

import $ from 'jquery'

class CustomSubmit extends window.HTMLElement {
  constructor (...args) {
    const self = super(...args)
    self.init()
    return self
  }

  init () {
    this.$ = $(this)
    this.resolveElements()
    this.bindFunctions()
    this.bindEvents()
  }

  resolveElements () {
    // Get the Form
    this.$bidForm = $( '#CustomSubmitForm' , this)
  }

  bindFunctions () {
      this.sendForm = this.sendForm.bind(this)
  }

  bindEvents () {
    // Attach sendForm function to Form Submit  
    this.$.submit('[data-form-submit]', this.sendForm)
  }

  sendForm (e) {

    e.preventDefault()
    const formData = this.$.serialize()
    // here is the problem, formData is empty
    console.log(formData)

  }
}

window.customElements.define('submit-form', CustomSubmit, { extends: 'form' })

форма. html

<form is="submit-form" id="CustomSubmitForm">
<input type="text" name="first_name" id="first_name">
<button type="submit" [data-form-submit] >Submit Form</button>
</form>

Answer 1

Проблема заключается в том, что вы используете

class CustomSubmit extends window.HTMLElement {

, но обычный HTMLElement не имеет любых <form> -специфических c свойств и методов это позволило бы jQuery собирать значения со всех элементов. Вместо этого используйте

class CustomSubmit extends window.HTMLFormElement {
//                                    ^^^^