Bootstrap form submission

Question

I am trying to use the following search function found on Bootsnip.

I was hoping that this would submit when I press enter, but it only submits when press tab and highlight the search button or click on the button. Is there any way to alter this code so that it works upon pressing "Enter" on the keyboard.

Here is the code:

<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="input-group custom-search-form">
              <input type="text" class="form-control">
              <span class="input-group-btn">
              <button class="btn btn-default" type="button">
              <span class="glyphicon glyphicon-search"></span>
             </button>
             </span>
             </div><!-- /input-group -->
        </div>
    </div>
</div>

score 0 · Accepted Answer · edited May 23 '17 at 12:15

A bit more information might be needed in order to point you in the right direction. For instance, how are you handling the actual search logic?

I might suggest a few things, though. First, wrap the input in a form. It also might be helpful to swap the type="button" to a type="submit". Example:

<form role="search">
    <div class="input-group custom-search-form">
        <input type="text" class="form-control" required="required" aria-required="true" />
            <span class="input-group-btn">
                <button class="btn btn-default" type="submit">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </span>
    </div>
</form>

If the search logic is being handled when the form posts, you might want to add in an action and/or a method attribute on the form, as well. If the search logic is being handled by jQuery, then that shouldn't matter.

If you are looking for a straight JS/jQuery answer, something like this would help:

$("input").keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();
        $("form").submit();
    }
});

Here are a few other Stackoverflow articles that may help the cause:

Submitting a form on 'Enter' with jQuery?

Submitting a form by pressing enter without a submit button

Hope this helps.

Bootstrap form submission

1 Answers1