Предотвратить перезагрузку страницы при отправке, но сохранить в базе данных

Question

Я хочу отправить форму, когда я выбираю опцию из опций select, но я не хочу, чтобы страница перезагрузилась после этого.Я использовал e.preventDefaut(), но форма перестала сохраняться в базе данных.PS: он прекрасно сохранялся перед добавлением preventDefault, но страница действительно перезагружалась.

Вот мой код для формы: -

<form action="{{route('course.add')}}" method="POST"  > 
    @csrf

    <div class="aa">
        <div class="dd">

                <input type='checkbox' id='HiddenCheck{{$course->id}}' >
                <input class='red' id = "b{{$course->id}}"  onclick="showComboBox({{$course->id}})" >

                <label class="class_name" value ="{{$course->id}}" >{{$course->courseNumber}}</label>
                <input hidden type="number" value="{{$course->id}}"  name ="course"/>
        </div>

        <div class="select-style" id="check{{$course->id}}" hidden >
            <select name="a" id="season" >
            <option value="" selected disabled hidden>Taken on </option>
            <option value="Summer">Summer</option>
            <option value="Fall">Fall</option>
            <option value="Winter">Winter</option>
            <option value="Spring">Spring</option>
            </select>
        </div>
    </div>
</from> 

и вот мой код Ajax для отправкиФорма: -

$('#season').on('change', function(e) {
    e.preventDefault() ;
    $(this).closest('form').submit();

});

Я ожидал, что форма будет отправлена ​​и мои данные будут добавлены в базу данных без перезагрузки страницы.Но когда я добавил preventDefaut(), данные перестали сохраняться в базе данных.

Answer 1

Попробуйте использовать пост-запрос ajax

$('#season').on('change', function(e){
 e.preventDefault() ;
     var url = e.target.action  // get the target
     var formData = $(this).serialize() // get form data
     $.post(url, formData, function (response) { // send; response.data will be what is returned
         alert('data sent')
     })
 });

Answer 2

Вы можете отправить форму с помощью ajax.

Первое решение - с onChange отправить

Если у вас есть кнопка отправки с идентификатором btn-submit.

Добавьте id к форме, например my-form.

$(".select-style").on('change', function(){
    $.ajax({
        url: 'your-route-here',
        method: 'post',
        data: {
            $("#my-form").serialize(),
        },
        success: function(response){
            alert('ok');
        }
    });
});

Второй - с кнопкой отправки

Вы можете использовать функции ajaxForm / ajaxSubmit из Ajax Form Plugin или функцию сериализации jQuery.

• С формой Ajax:

$("#theFormId").ajaxForm({url: 'server.php', type: 'post'});

или

$("#theFormId").ajaxSubmit({url: 'server.php', type: 'post'});

ajaxForm будет отправлять при нажатии кнопки отправки. ajaxSubmit отправляет немедленно.

Надеюсь, это поможет.