CODEWITHSUNDEEP
javascriptjquery
gsiradze
gsiradze

Reputation: 4733

search form doesn't submits

I have this search form:

JSFIDDLE

and it doesn't submits. When I click to enter or search icon. why?

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

Upvotes: 1

Views: 94

Answers (1)

Karthik
Karthik

Reputation: 1751

Because you are preventing form submit with e.preventDefault() and not submitting form with any other methods.
You can submit your form using ajax like this:

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

and write submit functions in submit.php
Inside submit.php you can write what you need to do with user input. Something like this:

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

Hope this helps..

Upvotes: 3

Related Questions