CODEWITHSUNDEEP
jqueryhtmlformsinputpreventdefault
Codette
Codette

Reputation: 59

jQuery Toggled search form will not submit once event.preventdefault

I have a search form in my navigation bar that toggles open and closed when the user clicks the search button, using e.preventDefault() to prevent the search button from submitting the form, initially. Unfortunately, this functionality seems to be preventing form from submitting at all.

I've tried using this jQuery conditional statement, to submit the form if the input field is not empty:

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

And, I've tried using this:

$('#search-button').on('click', function(e) {

    if ( ! $(this).data('clicked') ) {

        e.preventDefault();
        $('#s').animate({width: 'toggle'}).focus();
    }

    $(this).data('clicked', true);
});

The search form:

                    <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 -->

The stylings for the form:

#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;
}

I would like for the search form to toggle open so the user can input their search keywords, close if they have not entered any keywords, and submit if they have entered keywords. I can't figure out why my current code doesn't work that way.

Upvotes: 0

Views: 222

Answers (1)

Shawn Jacobson
Shawn Jacobson

Reputation: 1352

Change your input to type="button" and add an id to your form. In the else portion of your JavaScript, submit your form manually (i.e. $("#formId").submit()). I would also change your logic around a little...

$('#search-button').on('click', function(e) {
    var sInput = $('#s').val();
    if (sInput == null || sInput == '') {
        $('#s').animate({width: 'toggle'}).focus();
    }else{
        $('#formId').submit();
    }
});

Upvotes: 1

Related Questions