Question

当我从选择选项中选择一个选项时，我想提交表单，但是我不希望在此之后重新加载页面。我使用了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提交表单。

第一个解决方案-使用onChange提交

假设您有一个ID为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');
        }
    });
});

第二个-使用按钮提交

您可以使用Ajax Form Plugin中的ajaxForm/ajaxSubmit函数或jQuery序列化函数。

以ajax形式：

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

或

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

ajaxForm将在按下提交按钮时发送。 ajaxSubmit立即发送。

希望有帮助。

Answer 2

尝试使用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')
     })
 });

阻止页面在提交时重新加载，但继续保存在数据库中

2 个答案: