时间戳

首页 > 解决方案 > 如何使用 Javascript/jQuery 提交（） type="search" 的输入？

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

问题描述

我正在构建一个 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 毫秒，同时执行一个删除类的函数？）

提前谢谢了！

标签： javascriptjqueryinputsubmitform-submit

解决方案

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

感谢安德烈·努希特。

推荐阅读