save multiple rows into database usin dynamic input fields/larave and jQuery - html

Question

I want to insert multiple rows from dynamic input fields.
So I'm using the following formm and the following script which adds dynamically input fields.
$(document).ready(function() {
$("body").on("click", ".add_new_frm_field_btn", function() {
var random = 1 + Math.floor(Math.random() * 1000); //generate random values..
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
//added data-index and outer..class
$(".form_field_outer").append(`<div class="col-12 outer" data-index="${index}_${random}"><div class="card-body form_field_outer_row"> <div class="form-row"><div class="form-group col-md-4"> <label for="inputState">Casting</label><select id="id_casting" class="form-control" name="rows[${index}][id_casting]">
<option selected>Choose...</option><option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option> </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="rows[${index}][id_modele_contrat]"> <option selected>Choose...</option><option>...</option> </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></div></div> `);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="row">
<div class="col-12">
<div class="card mb-4">
<div class="card-body">
<h5 class="mb-4">Projet</h5>
<!-- <form id="projetform" method="post" action="ajout_projet" class="myForms" enctype="multipart/form-data"> -->
<form method="POST" id="projetform" class="myForms" enctype="multipart/form-data">
{{ csrf_field() }}
<input type="hidden" id="id_projet" name="id_projet" />
<div class="form-group">
<label for="inputAddress">Numéro de projet</label>
<input type="text" class="form-control" id="numero_projet" name="numero_projet" placeholder="Description">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-12 col-xl-8 col-left">
<div class="card mb-4">
<div class="card-body">
<button type="button" class="btn btn-outline-primary mb-1 add_new_frm_field_btn">Ajouter un nouveau casting</button>
</br>
</br>
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row outer" data-index="1">
<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 class="form-control" name="rows[1][id_casting]" id="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="rows[1][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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-12 col-xl-4 col-right">
<div class="card mb-4 casting_details ">
<div class="card-body casting_details2 ">
<div class="d-flex flex-row mb-3 ">
<!-- Pictures ot the selected casting will come here-->
</div>
</div>
</div>
</div>
<button type="submit" name="submit" id="submit" class="btn btn-primary mb-1">Add</button>
</div>
Ajax code :
$('#submit').click(function(){
$.ajax({
url:"{{route('ajout_projet.store')}}",
method:"POST",
data:$('#projetform').serialize(),
type:'json',
success: function(e){
console.log(e)
},
error: function(error){
console.log(error)
}
});
});
I put in my controller :
$data = $request->input('rows');
dd($data);
When I add in my frontEnd for example 4 input fields that is four rows , the dd($data); shows only the first row :
array:1 [
1 => array:2 [
"id_casting" => "19"
"id_modele_contrat" => "1"
]
]
while it should show the 4 additional input fields values like :
array:4 [
1 => array:2 [
"id_casting" => "19"
"id_modele_contrat" => "1"
],
2 => array:2 [
"id_casting" => "19"
"id_modele_contrat" => "1"
],
........
]
I tries many solutions but it stills the same problem n it takes only the first row in consideration and not all the additional input fields.
I am stuck in this point for a week and do not know what to do yet.
what i know is the problem is in my html or jquery code but i don't know exactly what is triggering this problem.
please help
UPDATE
migration files :
public function up()
{
Schema::create('projets', function (Blueprint $table) {
$table->increments('id_projet');
$table->string('numero_projet',10);
}
public function up()
{
Schema::create('projets_castings', function (Blueprint $table) {
$table->increments('id_projet_casting');
$table->integer('id_projet')->nullable()->unsigned();
$table->integer('id_casting')->nullable()->unsigned();
$table->integer('id_contrat')->nullable()->unsigned();
$table->integer('actif')->default('1');
$table->timestamps();
$table->foreign('id_projet')->references('id_projet')->on('projets');
$table->foreign('id_casting')->references('id_casting')->on('castings');
$table->foreign('id_contrat')->references('id_contrat')->on('contrats');
});
}

Answer 1

maybe that can help someone else
I solved my problem by changing my html to
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<form method="POST" id="projetform" class="myForms" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="row">
<div class="col-12">
<div class="card mb-4">
<div class="card-body">
<h5 class="mb-4">Projet</h5>
<!-- <form id="projetform" method="post" action="ajout_projet" class="myForms" enctype="multipart/form-data"> -->
<input type="hidden" id="id_projet" name="id_projet" />
<div class="form-group">
<label for="inputAddress">Numéro de projet</label>
<input type="text" class="form-control" id="numero_projet" name="numero_projet" placeholder="Description">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-12 col-xl-8 col-left">
<div class="card mb-4">
<div class="card-body">
<button type="button" class="btn btn-outline-primary mb-1 add_new_frm_field_btn">Ajouter un nouveau casting</button>
</br>
</br>
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row outer" data-index="1">
<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 class="form-control" name="rows[1][id_casting]" id="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="rows[1][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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<button type="submit" name="submit" id="submit" class="btn btn-primary mb-1">Add</button>
</div>