javascript - 搜索表单未提交

我有这个搜索表：

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

最佳答案

因为您要阻止使用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'];
?>

希望这可以帮助..