Question

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

但这没用。

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

Answer 1

您的方法不起作用，因为在发出up:form:submit时，已经解析了参数形式。

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

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

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

Answer 2

在我的情况下，当单击表单中的任何复选框，并且所有复选框都带有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')
                }
            }            
        })        
    })
})

不垄断|从提交的值中排除空表单字段

2 个答案: