如何使用Javascript / jQuery提交（）type =“search”的输入？

Question

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

现在我的表格有问题。 用户可以在标题中添加一个搜索，在侧边栏/小部件区域添加一个（或多个）搜索。

所有表单或多或少都有相同的结构（里面有一些 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>

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

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);
})

我将很快解释它，尽管它本身就说明了问题。 当用户键入其中一种表单时添加事件侦听器。 调用了一个函数ambition_submit 。 该函数检查用户是否点击了“回车”。 如果是，我们使用 preventDefault。 ambition-loaded的类ambition-loaded从正文中删除。 我将发生事件的元素存储在一个变量中。 （它被记录到控制台。）我将超时设置为 300 毫秒，然后页面应该被重定向。

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

如何提交输入字段？

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

提前谢谢了！

Answer 1

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

感谢安德烈 Nuechter 。