Question

我有这个搜索表单：

并且它没有提交。当我点击进入或搜索图标时。为什么呢？

<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'];
?>

希望这会有所帮助..

搜索表单不提交

1 个答案: