Wysyłka formularza w Bootstrap 4 Modal window

Witajcie,

Mam modal window (Bootstrap 4):

<div id="material-dialog-modal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body pt-0">
                    <h3 class="select-material-title px-3"></h3>
                    <form method="get" action="{{ route('frontend.get.materials') }}" class="px-3 select-material-url">
                        <input type="hidden" name="type" value="" class="material-type-input">
                        <div class="inner-addon rounded-0 modal-search-form">
                            <i class="fa fa-search"></i>
                            <input type="text" class="form-control product-query-string-body"
                                   placeholder="Szukaj produktu"
                                   aria-label="Wpisz nazwę lub kod koloru" name="query" value="{{ app('request')->input('query') }}"/>
                        </div>
                    </form>
                    <div class="row material-list px-5 pt-4 dynamic-materials">

                    </div>
                </div>
            </div>

        </div>
    </div>

Po wpisaniu szukanej frazy i wciśnięciu "enter" przeładowuje się cała strona - a nie tylko to, co jest w modal windows.

Jak to najlepiej naprawić? :)

A czemu uważasz, że się powinien tylko modal przeładować? Jak nie masz ajaxa, to się zawsze wyśle normalnie.

baracadus napisał(a):

Jak to najlepiej naprawić? :)

Podpiąć zdarzenie pod onsubmit formularza, zablokować domyślną akcję i obsłużyć ajaxem.