Question 15622 in Laravel Question posted in
The official Laravel Documentation can be found here.

how to use Ajax to collect data from my bootstrap modal in laravel?

So I added a boostrap modal form in my view and I integrated ajax to collect data from it and insert them in my database the thing is that the form doesn’t do anything and I couldn’t figure where the problem is? I tried to search in youtube and google but nothing worked this my view guys:

@extends('layouts.master')
  @section('content')

  <div id="content-page" class="content-page">
        <div class="row gutters-sm">
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
            <!-- addservicemodal -->
            <div class="modal fade" id="addservicemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Ajouter un service</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form id="addform">
                            <div class="modal-body">
                                {{ csrf_field() }}
                                <div class="form-group">
                                    <label for="intitule_service">Intitule</label>
                                    <input type="text" class="form-control"  name="intitule_service"  placeholder="Entrez une titre" required>
                                </div>
                                <div class="form-group">
                                    <label for="note_service">Note</label>
                                    <input type="text" class="form-control"  name="note_service" placeholder="Entrez  une note" required>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                                <button type="button" class="btn btn-primary">Sauvegarder</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="jumbotron">
                    <div class="row">
                        <div class="pull-left">
                            <h4>Ajouter service</h4>
                        </div>
                        <div class="pull-right">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addservicemodal">
                                ajouter
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('#addform').on('submit',function(e){
                e.preventDefault();
                $.ajax({
                    type:"POST",
                    url:"/serviceadd",
                    data:$("#addform").serialize(),
                    success:function(response){
                        console.log(response)
                        $('#addservicemodal').modal("hide")
                        alert("Service sauvegardé");
                    },
                    error: function(error){
                        console.log(error)
                        alert("Service non sauvegardé");
                    }
                });
            });
        });
    </script>
@endsection

this my controller:

public function store(Request $request)
{
    $service = new Service();
    $service->intitule_service = $request->input('intitule_service');
    $service->note_service = $request->input('note_service');
    $service->save();
}

this is my model

class Service extends Model
{
    protected $table = 'services';
    protected $fillable = ['intitule_service', 'note_service '];
}

and this is my route in web.php

Route::post('/serviceadd', 'ServiceController@store');
Tags:

3

Answers


  1. 0

    The issue is not related to CSRF. Since you’ve already added the token here {{ csrf_field() }}, there is no need to add it to the request headers. The form is not submitting because it has no submit button. Just change

    <button type="button" class="btn btn-primary">Sauvegarder</button>

    To this instead

    <button type="submit" class="btn btn-primary">Sauvegarder</button>
    Login or Signup to reply.
  2. 0

    You need to change the button type to type="submit" to submit the form and trigger the AJAX request. Also, make sure that the URL in your AJAX request (url:"/serviceadd") matches the URL in your route definition (Route::post(‘/serviceadd’, ‘ServiceController@store’)).

    <button type="submit" class="btn btn-primary">Sauvegarder</button>
    Login or Signup to reply.
  3. 0

    Try adding the name for the route and use it in the ajax request:

    Route::post('/serviceadd', 'ServiceController@store')->name('add.service');

    Also change the button type to submit

    <button type="submit" class="btn btn-primary">Sauvegarder</button>

    And in the script

    <script type="text/javascript">
        $(document).on('submit','#addform',function(e){
            e.preventDefault();
            /**
             * USE THE ROUTE NAME 
             */
            const AJAX_API = "{{route('add.service')}}"
            $.ajax({
                type:"POST",
                url:AJAX_API,
                data:$("#addform").serialize(),
                success:function(response){
                    console.log(response)
                    $('#addservicemodal').modal("hide")
                    alert("Service sauvegardé");
                },
                error: function(error){
                    console.log(error)
                   alert("Service non sauvegardé");
                }
        });
    });
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search