如何使用 Javascript/jQuery 提交 () type="search" 的输入？

Question

我正在构建一个 WordPress 主题。我为页面转换添加了一个可选功能。它背后的概念很简单：用户单击 link，jQuery 拦截 link 与 event.preventDefault()，jQuery 删除特定的 class来自 body 元素并在 300 毫秒后加载 link。

现在我的表格有问题。用户可以在 header 区域添加一个搜索表单，在 sidebar/widget 区域添加一个（或多个）搜索表单。

所有形式的结构或多或少相同（里面有一些PHP）：

<form role="search" method="get" class="ambition-search-form header_search override" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <input type="search" class="ambition-search-field header_search override" id="ambition-search-field-input-header_search"
            placeholder="<?php echo esc_attr( get_theme_mod( 'ambition_text_searchfield', 'Start typing...' ) ); ?>"
            value="" name="s"
            title="<?php echo esc_attr( get_theme_mod( 'ambition_title_searchfield', 'Search for pages, articles and documents.' ) ); ?>"
            autocomplete="off" />
        <input type="submit" class="ambition-search-submit header_search override" value="" />
</form>

表单的问题在于，当用户按下回车键时，网站会转到搜索结果页面。按回车不是 link，因此 jquery 无法拦截它，就像 link 一样。为了解决这个问题，我创建了以下代码：

function ambition_submit(e) {

    if (e.key === 'Enter') {
        console.log('SUBMIT');

        event.preventDefault(); //Stop the link from going (by submitting it)
    
        if ($('body').hasClass('ambition-loaded')) { //For safety
            $('body').removeClass('ambition-loaded');   //Remove the .ambition-loaded class
    

        if (!event) {
            e = window.event;
        }
        
        var ambition_target = event.target || e.srcElement;

        console.log(ambition_target);

            //And set a timeout and move the browser to the url
            setTimeout(function() {
                ambition_target.submit();
            }, 300);      
        
        }
}
}


document.querySelectorAll('input').forEach(item => {
    item.addEventListener('keypress', ambition_submit);
})

我将很快解释它，尽管它本身就很说明问题。 AddEventlistener 当用户输入其中一种形式时。函数 ambition_submit 被调用。该函数检查用户是否点击了 'enter'。如果是，我们使用 preventDefault。 class ambition-loaded 从 body 中删除。我将事件发生的元素存储在一个变量中。（它被记录到控制台。）我设置了 300 毫秒的超时，之后页面应该被重定向。

在上面的代码中，ambition_target.submit();不起作用（.click()也不起作用）。

如何提交输入字段？

（或者，我如何延迟提交表单 300 毫秒，同时执行删除 class 的函数？）

非常感谢！

Answer 1

input 标签是 form 标签的子元素。 .submit() 不适用于 input 标签，因为它不是一个完整的表单。选择父 form 标签并提交它。

感谢Andre Nuechter。

如何使用 Javascript/jQuery 提交 () type="search" 的输入？

How to submit() an input with type="search" with Javascript/jQuery?

javascript

jquery

input

submit

form-submit