Блог

Я пытаюсь создать форму поиска, которая имеет некоторые входные данные с атрибутом up-autosubmit , поэтому форма отправляется динамически Unpoly . Но в форме есть несколько текстовых полей, которые могут не заполняться пользователем, и я бы хотел, чтобы пустые поля не отправлялись, потому что метод формы get и все такие поля портят строку запроса.

Я попытался очистить их следующим образом:

 up.on('up:form:submit', function(ev) {
    let form = ev.target
    if (form.classList.contains('search-form')) {
        let textInputs = form.querySelectorAll('input[type=text]')
        for (let i = 0; i < textInputs.length; i  ) {
            if (textInputs[i].value.match(/^s*$/)) {
                textInputs[i].setAttribute('disabled', 'disabled')
            }
        }
    }
})

up.compiler('.search-results-wrap', function(el) {
    let textInputs = document.querySelectorAll('.search-form input[type=text]')
    for (let i = 0; i < textInputs.length; i  ) {
        textInputs[i].removeAttribute('disabled')
    }
})
  

Но это не сработало.

Как правильно это сделать?

Ваш подход не сработал, потому что на момент up:form:submit отправки параметры формы уже проанализированы.

В следующей основной версии up:form:submit событие будет иметь event.options.params свойство, которым могут управлять обработчики событий.

Обходным решением было бы привязаться к submit событию vanilla и манипулировать формой до того, как Unpoly проанализирует значения:

 up.compiler('form.search-form', function(form) {
  form.addEventListener('submit', function() {
    disableEmptyInputs(form)
  })
})
  

В моем случае форма была отправлена, когда был нажат любой флажок в форме, и все флажки снабжены атрибутом up-autosubmit для отмены выполнения задания. Я попытался выполнить обратный вызов для собственного события отправки, но оно так и не было вызвано. Единственный подход, который сработал для меня, — это установить обратный вызов для события изменения входных данных флажка:

 up.compiler('form.search-form input[type=checkbox]', function(ch) {
    ch.addEventListener('change', function() {
        let form = ch.form
        let textInputs = form.querySelectorAll('input[type=text]')
        for (let i = 0; i < textInputs.length; i  ) {
            if (textInputs[i].value.match(/^s*$/)) {
                textInputs[i].setAttribute('disabled', true)
            }
        }
        setTimeout(0, function() {
            let textInputs = form.querySelectorAll('input[type=text]')
            for (let i = 0; i < textInputs.length; i  ) {
                if (textInputs[i].value.match(/^s*$/)) {
                    textInputs[i].removeAttribute('disabled')
                }
            }            
        })        
    })
})