Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

jbowman99's avatar

Submit form on keyPress enter

I have a select2 search function and when a user presses enter within the search box the the field will be populated with the first result pulled from the search request.

I would like upon keypress enter to submit the form.

js for the select2 looks like this:

$(document).ready(function () {
            $(".js-search-menus").select2({
                multiple: true,
                maximumSelectionSize: 1,
                placeholder: 'Find a Menu',
                allowClear: true,
                ajax: {
                    type: 'POST',
                    url: '{{ action('\Modules\Admin\Http\Controllers\Restaurant\Menus\MenusController@postGetMenus') }}',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term,
                            page: params.page
                        };
                    },
                    processResults: function (data, params) {

                        menus = []

                        $.each($.parseJSON(data), function () {
                            menus.push({
                                id: this.MenuID,
                                text: this.MenuTitle
                            });
                        });

                        return {
                            results: menus,
                            pagination: {
                                more: (params.page * 30) < menus.length
                            }
                        };
                    },
                    cache: true
                },
                minimumInputLength: 3
            });
        });

works fine.

tried to add this after to submit on enter, didn't work?

$(document).ready(function () {
            $('select').keypress(function (e) {
                if (e.which == 13) {
                    $('#searchForm').submit();
                    return false;   
                }
            });
        });
0 likes
2 replies
spekkionu's avatar

The text box that the users type into for the select element is not the original select input that was there before select2 replaces it so the keypress event will not fire.

You will need to use one of the select2 events. Likely either select2:select or change. https://select2.github.io/options.html#events

$('.js-search-menus').on('select2:select', function() {
    $('#searchForm').submit();
});
jbowman99's avatar

@spekkionu

i was trying something similar to this, but according to some other threads the event press Enter is killed by the select2.js apparently it is possible to comment out these lines but I couldn't find them.

my next thought was to make a hidden input field, and on keyPress Enter submit if the form is valid...

Please or to participate in this conversation.