Question

我的导航栏中有一个搜索表单，当用户点击搜索按钮时会切换打开和关闭，最初使用e.preventDefault()来阻止搜索按钮提交表单。不幸的是，这个功能似乎阻止了表单的提交。

我已尝试使用此jQuery条件语句，如果输入字段不为空，则提交表单：

var sInput = $('#s').val();

if (sInput == null || sInput == '') {

    $('#search-button').on('click', function(e) {

        e.preventDefault();
        $('#s').animate({width: 'toggle'}).focus();
    });
}else{

    $('#search-button').on('click', function(e) {

        return true;
    });
}

并且，我尝试过使用它：

$('#search-button').on('click', function(e) {

    if ( ! $(this).data('clicked') ) {

        e.preventDefault();
        $('#s').animate({width: 'toggle'}).focus();
    }

    $(this).data('clicked', true);
});

搜索表单：

                    <div id="search-wrap" class="cf menu-item">

                        <form class="searchform cf" method="get" action="<?php echo home_url(); ?>/">

                            <input type="search" id="s" name="s" class="field right">

                            <div class="search-button-wrap left">

                                <input type="submit" id="search-button" value="">
                            </div><!-- End #search-button-wrap -->
                        </form><!-- End .searchform -->
                    </div><!-- End #search-field -->

表单的样式：

#main-nav .menu-item {
    display:  inline-block;
}

#s {
    width:            200px;
    border:           none;
    outline:          #FCFCFC;
    display:          none;
    position:         relative;
    border-bottom:    solid 1px #C29D52;
    background-color: #FCFCFC;
}

#s.field {
    font-size:      1.125em;
    text-align:     center;
    letter-spacing: 2px;
}

.searchform input {
    display: block;
}

#search-button {
    width:               20px;
    height:              20px;
    border:              none;
    cursor:              pointer;
    background-color:    #FCFCFC;
    background-image:    url(images/search.png);
    background-repeat:   no-repeat;
    background-position: center;
}

#search-wrap {
    vertical-align: middle;
}

我希望搜索表单切换为打开，以便用户可以输入他们的搜索关键字，如果他们没有输入任何关键字则关闭，如果他们输入了关键字，则提交。我无法弄清楚为什么我目前的代码不会那样工作。

Answer 1

将输入更改为type =“button”并在表单中添加ID。在JavaScript的else部分，手动提交表单（即$（“＃formId”）。submit（））。我也会改变你的逻辑......

$('#search-button').on('click', function(e) {
    var sInput = $('#s').val();
    if (sInput == null || sInput == '') {
        $('#s').animate({width: 'toggle'}).focus();
    }else{
        $('#formId').submit();
    }
});

jQuery Toggled搜索表单不会提交一次event.preventdefault

1 个答案: