Formularz na ajax

Question

Mam formularz:

<form id="messageBoxForm" method="post" action="{{ route('comments', ['id' => $id, 'name' => $>name]) }}">
                <input type="hidden" value="{{ $id }}" name="postId">
                <input type="text" name="message">
                <input type="submit" value="Wyślij">
                {{ csrf_field() }}
</form>

Chciałbym wysyłać ten formularz bez przeładowywania strony, poczytałem, i poszukałem sobie coś takiego

var frm = $('#messageBoxForm');
    frm.submit(function (e) {
        e.preventDefault();
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
        });
    });

Czyli jak rozumiem wykrycie submita na formularzu o id "messageBoxForm" usunięcie eventu submit, ustawienie typu, adresu i serializacja danych z formularza.

Jednak po kliknięciu w przycisk "Wyślij" nadal przenosi mnie pod adres wskazany w routingu, a ma tam tylko wysłać dane z formularza.

Co jest źle, i jak to poprawić?

Answer 1

Dla testu daj buttona poza forma. Po za tym masz tam submit a nie button. A możesz sobie podpiąć np: onClick do buttona.