联系表格 7 在 jQuery 中调用提交事件答案

【问题标题】：Contact form 7 call submit event in jQuery联系表格 7 在 jQuery 中调用提交事件
【发布时间】：2018-04-18 22:52:36
【问题描述】：

我有一个简单的联系表格，最后我添加了一个自定义字段：

<input type="text" name="test" id="test" class="form-control">

我需要检查字段是否为空，然后提交表单：

$('.wpcf7-submit').on('click', function (e) {
    e.preventDefault();

    var testInput = $('input[name="test"]').val();

    if (testInput != '') {
        // How to submit form here?
    }
});

怎么做？

【问题讨论】：

标签： jquery html wordpress

【解决方案1】：

先检查是否为空，再检查preventDefault。否则它将提交

$('.wpcf7-submit').on('click', function (e) {
    var testInput = $('input[name="test"]').val();

    if (testInput === '') {
        e.preventDefault();
    }
});

编辑：

您还应该考虑到人们不会通过按提交来提交，而是通过按 Enter 来提交 - 因此您可能应该这样做：

$('#myForm').on('submit', function() {
  ....
}

而不是听点击

【讨论】：

它正在提交页面并在使用 e.preventDefault() 时重新加载它；
“使用时”是什么意思？您是否阻止了点击或提交？

【解决方案2】：

这应该可行：

$('.wpcf7-submit').submit();

【讨论】：

表单发送到Ajax

【解决方案3】：

如果输入为空，您可以阻止默认设置，如下所示：

$('.wpcf7-submit').on('click', function (e) {
var testInput = $('input[name="test"]').val();

if (testInput === '') {
    e.preventDefault();

}

});

或者：

$('.wpcf7-submit').on('click', function (e) {
e.preventDefault();

var testInput = $('input[name="test"]').val();

if (testInput != '') {
    $('#form-id').submit();
}

});

希望它会有所帮助。

【讨论】：