Prevent page from reload on submission but keep saving in the database

Question

I want to submit the form when I select an option from select option but I don't want the page to reload after doing that. I used the e.preventDefaut() but the form stops saving to the database. PS: it was saving perfectly before adding the preventDefault but the page does reload.

Here is my code for the form:-

<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>

and here is my Ajax code to submit the form:-

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

});

I was expecting the form to be submitted and my data added to the database without reloading the page. But when I added the preventDefaut() the data stop saving in the database.

Use Ajax: https://stackoverflow.com/a/5004276/8352986 – Reza Ramezanpour Jun 22 '19 at 07:50 — Reza Ramezanpour, Jun 22 '19 at 07:50

Mateus Junges · Answer 1 · 2019-06-22T07:55:09.047

1

You can submit the form with ajax.

First solution - With onChange submit

Assuming you have a submit button with id btn-submit.

Add a id to the form, like my-form.

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

Second one - With button submit

You can use the ajaxForm/ajaxSubmit functions from Ajax Form Plugin or the jQuery serialize function.

With ajax form:

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

or

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

ajaxForm will send when the submit button is pressed. ajaxSubmit sends immediately.

Hope it helps.

edited Jun 22 '19 at 07:55

answered Jun 22 '19 at 07:43

Mateus Junges

2,559
1
12
24

the thing that I need to submit the form after choosing an option from the select option that why I used the select onchange to submit the form – Elin Jun 22 '19 at 07:47
I changed the on click to on change. The first solution should work – Mateus Junges Jun 22 '19 at 07:49
in the URL should I just put 'course.add'? if so, it doesn't work for me – Elin Jun 22 '19 at 08:12

score 1 · Answer 2 · answered Jun 22 '19 at 07:44

1

Try using ajax post request

$('#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')
     })
 });

answered Jun 22 '19 at 07:44

Carl Angelo Orale

119
1
7

I tried it but it doesn't work, even if I remove the preventDefault still not working – Elin Jun 22 '19 at 08:11

Prevent page from reload on submission but keep saving in the database

2 Answers2