1

我正在尝试构建一个搜索表单，其中包含一些带有属性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')
    }
})

但它没有用。

正确执行此操作的方法是什么？

4

2 回答 2

0

在我的情况下，当单击表单中的任何复选框时提交了表单，并且所有复选框都提供了 up-autosubmit 属性，以便 Unpoly 完成工作。我试图对本机提交事件进行回调，但它从未被调用过。对我有用的唯一方法是在复选框输入更改事件上设置回调：

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')
                }
            }            
        })        
    })
})
于 2019-04-13T07:33:44.640 回答
0

您的方法不起作用，因为当时up:form:submit发出的表单参数已经被解析。

在下一个主要版本中，up:form:submit事件将具有event.options.params事件处理程序可以操作的属性。

submit一种解决方法是在 Unpoly 解析值之前绑定到 vanilla事件并操作表单：

up.compiler('form.search-form', function(form) {
  form.addEventListener('submit', function() {
    disableEmptyInputs(form)
  })
})
于 2019-04-11T07:37:17.780 回答