如何使用 Javascript/jQuery 提交（） type="search" 的输入？答案

【问题标题】：How to submit() an input with type="search" with Javascript/jQuery?如何使用 Javascript/jQuery 提交（） type="search" 的输入？
【发布时间】：2020-12-30 16:59:53
【问题描述】：

我正在构建一个 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>

表单的问题在于，当用户按 Enter 键时，网站会转到搜索结果页面。点击回车不是链接，因此 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);
})

我将很快解释它，尽管它不言自明。 AddEventlistener 当用户键入其中一种形式时。调用函数ambition_submit。该函数检查用户是否点击了“输入”。如果是，我们使用 preventDefault。 ambition-loaded 类已从正文中删除。我将发生事件的元素存储在变量中。（它被记录到控制台。）我设置了 300 毫秒的超时，然后页面应该被重定向。

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

如何提交输入框？

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

非常感谢！

【问题讨论】：

您的“表单”并不是真正的表单，而是输入元素，因此没有提交方法。按回车键也不应该在表单之外提交输入字段，所以问题是，是什么导致导航到搜索结果页面？
嗨，安德烈，感谢您查看。我现在没有这个。我想这与以下元素有关：<input type="submit" class="ambition-search-submit override" value="">。这个 type=submit 的输入在原始输入之后，但使用 display:none 隐藏。（搜索表单的代码以原始形式复制并由我修改。）是否可以将input tag 替换为form？或者您有什么其他建议？
别介意我用form标签替换它的建议。我刚刚再次检查了源代码，发现已经有一个form 容器。我会用完整的代码更新问题。
我成功了！我使用parentElement 获取form 元素，然后在其上使用提交。谢谢！如果您愿意，您可以提交您的建议，即提交<form> 作为答案@AndreNuechter！
谢谢，没关系。很高兴你让它工作！

标签： javascript jquery input submit form-submit

【解决方案1】：

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

感谢Andre Nuechter。

【讨论】：