Обработчик событий JQuery препятствует отправке моей формы - PullRequest
Новая
       9

Обработчик событий JQuery препятствует отправке моей формы

0 голосов
/ 15 июня 2019

Следующий код должен изменять эстетику и функцию кнопки отправки: 

    $('[data-image-upload-button]').click(function(){
      if ($('[data-product-image-input]')[0].files.length > 0) {
        $('[data-product-image-input]').remove()
        $(this).prop('disabled', true)
        $(this).text('Uploaded!')
        $(this).removeClass('btn-outline-primary')
        $(this).addClass('btn-outline-success')
      }
    })

Однако, когда я нажимаю кнопку, этот код выполняется, но форма не отправляется. Я намеренно не использовал preventDefault(), потому что хотел, чтобы форма отправлялась так же, как и для выполнения этого блока js.

Я попытался вызвать эту функцию для события submit вместо click, но это выдает ошибку invalid_authenticity_token.

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

Что я делаю не так?

1 Ответ

0 голосов
/ 26 июня 2019

Похоже, что эти две строки 

$('[data-product-image-input]').remove()
$(this).prop('disabled', true)

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

В конечном итоге я решил добавить обработчики событий для кнопки и ввода, чтобы предотвратить щелчок ПОСЛЕ отправленной формы, например: 

$('[data-image-upload-button]').click(function(){
  if ($('[data-product-image-input]')[0].files.length > 0) {
    $(this).text('Uploaded!')
    $(this).removeClass('btn-outline-primary')
    $(this).addClass('btn-outline-success')
    $(this).click( event => event.preventDefault())
    $('[data-product-image-input]').click( event => event.preventDefault())
  }
})
...