搜索表單不提交

Question

我有這樣的搜索形式：

JSFIDDLE

，並沒有的提交。當我點擊進入或搜索圖標。爲什麼？

<form action="/search.php" method="get"> 
    <fieldset> 
     <ul class="toolbar clearfix"> 
      <li><button type="submit" id="btn-search"><span class="fa fa-search" style="color:gray;"></span></button></li> 
      <li><input type="search" id="search" placeholder="" name="s"></li> 
     </ul> 
    </fieldset> 
</form> 

$(document).ready(function() { 
    $('#btn-search').on('click', function(e) { 
     e.preventDefault(); 
     $('#search').fadeIn().focus(); 
    }); 
}); 

Answer 1

因爲你是防止形式e.preventDefault() ，而不是提交的形式與任何其他方法提交。
可以使用AJAX這樣提交您的表格：

$('#btn-search').on('click', function(e) { 
     e.preventDefault(); 

     if($('#search').val()){ 
      $.ajax({ 
       url  : 'submit.php', 
       data : { 'input': $('#search').val() }, 
       success : function(response) { 
        alert(response); 
       } 
      }); 
     } 

     $('#search').animate({ 
      width: 'toggle', 
     }).focus(); 
    }); 

譜寫submit.php
提交功能裏面submit.php你可以寫你需要用戶輸入做什麼。事情是這樣的：

<?php 
    echo "You have entered: " . $_GET['input']; 
?> 

希望這有助於..