如何使用ajax在laravel的同一页面中提交两个表单

Question

我的视图中有两个表单和一个提交按钮：

<form method="POST" id="projet_casting_form" class="myForms" enctype="multipart/form-data">
    {{ csrf_field() }}
    <input type="hidden" id="id_projet_casting" name="id_projet_casting"/>
    <div class="form-row">
        <div class="form-group col-md-4">
            <label for="inputState">Casting</label>
            <select id="id_casting" class="form-control" name="id_casting">
                <option selected>Choose...</option>
                @foreach($castings as $casting)
                    <option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-4">
            <label for="inputState">Type de contrat</label>
            <select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
                <option selected>Choose...</option>
                @foreach($models_contrat as $model_contrat)
                    <option data-id="{{$model_contrat->id_modele_contrat}}" value="{{$model_contrat->id_modele_contrat}}">{{$model_contrat->modele_contrat}}</option>
                @endforeach
            </select>
        </div>
        <div class="card-body">
            <button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
        </div>
    </div> 
</form>

// 第二种形式

<form method="POST" id="projet_casting_form" class="myForms" enctype="multipart/form-data">
    {{ csrf_field() }}
    <input type="hidden" id="id_projet_casting" name="id_projet_casting"/>
    <div class="form-row">
        <div class="form-group col-md-4">
            <label for="inputState">Casting</label>
            <select id="id_casting" class="form-control" name="id_casting">
                <option selected>Choose...</option>
                @foreach($castings as $casting)
                    <option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-4">
            <label for="inputState">Type de contrat</label>
            <select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
                <option selected>Choose...</option>
                @foreach($models_contrat as $model_contrat)
                    <option data-id="{{$model_contrat->id_modele_contrat}}" value="{{$model_contrat->id_modele_contrat}}">{{$model_contrat->modele_contrat}}</option>
                @endforeach
            </select>
        </div>
        <div class="card-body">
            <button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
        </div>
    </div> 
</form>

// 和提交按钮

<button type="submit" name="submit" id="submit" class="btn btn-primary mb-1">Add</button>

我正在尝试将这两种表格插入到数据库中的两个不同的表中， 换句话说，第一个表单存储到表中，第二个表单存储到另一个表中。

所以我使用以下代码 Ajax：

<script type="text/javascript">
$(document).ready(function(){
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    
    $('#submit').click(function() { 
        $.ajax({  
            url: "{{ route('ajout_projet.store') }}",  
            method: "POST",  
            data: $('#projetform').serialize(),
            type:'json',
        }); 
    });  
});
</script>

还有以下控制器：

public function store(Request $request)
{
    if(request()->ajax()) {
        $date_tournage = $request['date_tournage'];
        $time_tournage = strtotime($date_tournage);
        $date = date('Y-m-d', $time_tournage);
        $date_diffusion = $request['date_premiere_diffusion'];
        $time_diffusion = strtotime($date_diffusion);
        $datee_diffusion = date('Y-m-d',$time_diffusion);
        
        $rules = array(
            'numero_projet' => 'required',
            'id_client' => 'required',
            'id_agence_conseil' => 'required',
            'id_agence_production' => 'required',
            'id_agence_casting' => 'required',
            'description' => 'required',
            'date_tournage' => 'required',
            'date_premiere_diffusion' => 'required'
        );
    
        $error = Validator::make($request->all(), $rules);
    
        if ($error->fails()) {
            return response()->json(['errors' => $error->errors()->all()]);
        }
    
        $projets = new Projet();
        $projets->numero_projet = $request['numero_projet'];
        $projets->id_client = $request['id_client'];
        $projets->id_agence_conseil = $request['id_agence_conseil'];
        $projets->id_agence_production = $request['id_agence_production'];
        $projets->id_agence_casting = $request['id_agence_casting'];
        $projets->description = $request['description'];
        $projets->date_tournage = $date;
        $projets->date_premiere_diffusion = $datee_diffusion;
        $projets->id_filiale = Auth::user()->id_filiale;
        $projets->id_createur = Auth::user()->id;
        $projets->save();
                   
        // Add Projet-Casting
                     
        $id_projet = $projets->id;
        $id_casting = $request->id_casting;
        $id_contrat = 1;
    
        $projetscastings = [
            'id_projet'=> $id_projet,
            'id_casting'=> $id_casting,
            'id_contrat'=> $id_contrat,
        ];
    }
    
    return dd($projetscastings);
}

但是当我执行我的代码时，第一个表单的数据被插入到它的表中，但是对于第二个表单，我得到了：

array:3 [
  "id_projet" => null
  "id_casting" => null
  "id_contrat" => 1
]

当我这样做的时候：

data:console.log($('#projetform').serialize()),

我得到了：_token=T1FQQUFlrXd47Cbm7FSNISPfbIArxsZnd0QLEVxr&id_projet=&numero_projet=jh&id_client=1&id_agence_conseil=1&id_agence_production=1&id_agence_casting=1&description=ok&date_tournage=06%2F02%2F2021&date_premiere_diffusion=06%2F24%2F2021

所以第二种形式的输入不是token。

如何在同一个请求 ajax 中传递两个表单？

如果您有任何想法，我将不胜感激

提前谢谢你

Answer 1

你可以这样做

第一种形式

<form method="POST" action="{{your_action}}" id="delete_something" class="myForms" enctype="multipart/form-data">

第二种形式

<form method="POST" action={{your_action}} id="add_something" class="myForms" enctype="multipart/form-data">

提交按钮

<button type="button" onclick="submitData()" class="btn btn-primary mb-1">Submit</button>

在 Javascript 中使用如下代码

<script>
    function submitData(){
        document.getElementById("delete_something").submit();
        document.getElementById("add_something").submit();
        // Or jQuery
        // $("#delete_something").submit();
        // $("#add_something").submit();
    }
</script>