jQuery切換搜索表單將不會提交一次event.preventdefault

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