How to make two rows insert with one button Laravel using ajax - php

Question

i want to make two inserts in same table.
The table is based on this fields (locale, project_id(foreign key), title, caption).
And the controller looks like here:
public function storeTranslation(Request $request)
{
$projecttranslation = new ProjectTranslation();
$projecttranslation->locale = $request->input("locale");
$projecttranslation->project_id = $request->input("project");
$projecttranslation->title = $request->input("title");
$projecttranslation->caption = $request->input("caption");
$projecttranslation->save();
}
The form for the moment looks like here:
<div id="form2" style="display:none;" class="col-md-6">
<div class="col-md-">
<h3>Crear nueva traduccion</h3>
<form enctype="multipart/form-data" id="myFormTraduccion" name="myFormTraduccion"><!--FIRST FORM TO TRANSLATE -->
<input type="hidden" name="_token" value="{{ Session::token() }}">
<div class="form-group">
<label name="Language">Language:</label>
<input type="text" id="locale" name="locale" value="en" class="form-control form-control-sm">
<label name="Project">Project id:</label>
<input type="number" id="project" name="project" class="form-control form-control-sm">
<label name="Title">Title:</label>
<input type="text" id="title" name="title" class="form-control form-control-sm">
<label name="Caption">Caption:</label>
<input type="text" id="caption" name="caption" class="form-control form-control-sm"><br>
<input type="submit" value="Crear Traduccion" id="createtranslatesubmit" class="btn btn-danger btn-md">
<br><br><br>
</div>
</form> <!-- FIRST FORM TO TRANSLATE END HERE -->
<form enctype="multipart/form-data" id="myFormTraduccion2" name="myFormTraduccion2"> <!--SECOND FORM TO TRANSLATE -->
<input type="hidden" name="_token" value="{{ Session::token() }}">
<div class="form-group">
<label name="title">Language:</label>
<input type="text" id="locale" name="locale" value="es" disabled class="form-control form-control-sm">
<label name="order">Project id:</label>
<input type="number" id="project" name="project" class="form-control form-control-sm">
<label name="public">Title:</label>
<input type="text" id="title" name="title" class="form-control form-control-sm">
<label name="caption">Caption:</label>
<input type="text" id="caption" name="caption" class="form-control form-control-sm"><br>
<input type="submit" value="Crear Traduccion" id="createtranslatesubmit2" class="btn btn-danger btn-md">
<br><br><br>
</div>
</form> <!--SECOND FORM TO TRANSLATE END HERE -->
</div>
</div>
And the ajax look like this:
$("#createtranslatesubmit").click(function(){
$("#myFormTraduccion").submit();
});
$("#myFormTraduccion").submit(function(e){
e.preventDefault();
$.ajax({
url:'/admin/projects/postUploadTranslation',
type:'POST',
data:$('#myFormTraduccion').serializeArray(),
success: function(){
$("#form2").fadeOut(1000);
$("#form3").fadeIn(2000);
}
});
});
This create only with the first form, the first translation.
I think i should change the view code to this (Two same inputs for each field of database):
<div id="form2" style="display:none;" class="col-md-6">
<div class="col-md-">
<h3>Crear nueva traduccion</h3>
<form enctype="multipart/form-data" id="myFormTraduccion" name="myFormTraduccion"><!--FIRST FORM TO TRANSLATE -->
<input type="hidden" name="_token" value="{{ Session::token() }}">
<div class="form-group">
<label name="Language">Language:</label>
<input type="text" id="locale" name="locale" value="en" class="form-control form-control-sm">
<label name="Project">Project id:</label>
<input type="number" id="project" name="project" class="form-control form-control-sm">
<label name="Title">Title:</label>
<input type="text" id="title" name="title" class="form-control form-control-sm">
<label name="Caption">Caption:</label>
<input type="text" id="caption" name="caption" class="form-control form-control-sm">
<label name="title">Language:</label>
<input type="text" id="locale" name="locale" value="es" class="form-control form-control-sm">
<label name="order">Project id:</label>
<input type="number" id="project" name="project" class="form-control form-control-sm">
<label name="public">Title:</label>
<input type="text" id="title" name="title" class="form-control form-control-sm">
<label name="caption">Caption:</label>
<input type="text" id="caption" name="caption" class="form-control form-control-sm"><br>
<input type="submit" value="Crear Traduccion" id="createtranslatesubmit" class="btn btn-danger btn-md">
<br><br><br>
</div>
</form> <!-- FIRST FORM TO TRANSLATE END HERE -->
</div>
</div>
That's correct? The problem to "store" the data, i think will be a foreach in controller.
And finally, i don't have any idea, how to pass the data in the ajax, with a formdata maybe?
Thanks a lot, any help will be appreciated!

Answer 1

When you submit a form, you send to the server the data of that specific form. Your approach of using multiple forms doesn't work here, because you want to send all data with only 1 specific form submit.
So you have to only create 1 form and separate the different translations with a numeric reference.
Your HTML (note the -0 and -1 used to separate id and name of each input element) :
<form enctype="multipart/form-data" id="myFormTraduccion" name="myFormTraduccion"><!--FIRST FORM TO TRANSLATE -->
<input type="hidden" name="_token" value="{{ Session::token() }}">
<div class="form-group">
<label name="Language">Language:</label>
<input type="text" id="locale-0" name="locale-0" value="en" class="form-control form-control-sm">
<label name="Project">Project id:</label>
<input type="number" id="project-0" name="project-0" class="form-control form-control-sm">
<label name="Title">Title:</label>
<input type="text" id="title-0" name="title-0" class="form-control form-control-sm">
<label name="Caption">Caption:</label>
<input type="text" id="caption-0" name="caption-0" class="form-control form-control-sm">
<label name="title">Language:</label>
<input type="text" id="locale-1" name="locale-1" value="es" class="form-control form-control-sm">
<label name="order">Project id:</label>
<input type="number" id="project-1" name="project-1" class="form-control form-control-sm">
<label name="public">Title:</label>
<input type="text" id="title-1" name="title-1" class="form-control form-control-sm">
<label name="caption">Caption:</label>
<input type="text" id="caption-1" name="caption-1" class="form-control form-control-sm"><br>
<input type="submit" value="Crear Traduccion" id="createtranslatesubmit" class="btn btn-danger btn-md">
<br><br><br>
</div>
</form>
The controller:
public function storeTranslation(Request $request)
{
$projecttranslation0 = new ProjectTranslation();
$projecttranslation0->locale = $request->input("locale-0");
$projecttranslation0->project_id = $request->input("project-0");
$projecttranslation0->title = $request->input("title-0");
$projecttranslation0->caption = $request->input("caption-0");
$projecttranslation0->save();
$projecttranslation1 = new ProjectTranslation();
$projecttranslation1->locale = $request->input("locale-1");
$projecttranslation1->project_id = $request->input("project-1");
$projecttranslation1->title = $request->input("title-1");
$projecttranslation1->caption = $request->input("caption-1");
$projecttranslation1->save();
}
Of course, it can be easily generalized for N multiple transations and not only 2.

Answer 2

try this out:
<div id="form2" style="display:none;" class="col-md-6">
<div class="col-md-">
<h3>Crear nueva traduccion</h3>
<form enctype="multipart/form-data" id="myFormTraduccion" name="myFormTraduccion"><!--FIRST FORM TO TRANSLATE -->
<input type="hidden" name="_token" value="{{ Session::token() }}">
<div class="form-group">
<label name="Language">Language:</label>
<input type="text" id="locale" name="ProjectTranslation[0][locale]" value="en" class="form-control form-control-sm">
<label name="Project">Project id:</label>
<input type="number" id="project" name="ProjectTranslation[0][project]" class="form-control form-control-sm">
<label name="Title">Title:</label>
<input type="text" id="title" name="ProjectTranslation[0][title]" class="form-control form-control-sm">
<label name="Caption">Caption:</label>
<input type="text" id="caption" name="ProjectTranslation[0][caption]" class="form-control form-control-sm">
<label name="title">Language:</label>
<input type="text" id="locale" name="ProjectTranslation[1][locale]" value="es" class="form-control form-control-sm">
<label name="order">Project id:</label>
<input type="number" id="project" name="ProjectTranslation[1][project]" class="form-control form-control-sm">
<label name="public">Title:</label>
<input type="text" id="title" name="ProjectTranslation[1][title]" class="form-control form-control-sm">
<label name="caption">Caption:</label>
<input type="text" id="caption" name="ProjectTranslation[1][caption]" class="form-control form-control-sm"><br>
<input type="submit" value="Crear Traduccion" id="createtranslatesubmit" class="btn btn-danger btn-md">
<br><br><br>
</div>
</form> <!-- FIRST FORM TO TRANSLATE END HERE -->
</div>
So you will get array of ProjectTranslation at controller side
Now at controller side
public function storeTranslation(Request $request)
{
$form_data = $request->get('ProjectTranslation');
foreach($form_data as $form){
$projecttranslation = ProjectTranslation::create($form);
$projecttranslation->save();
}
}