I know this might sound strange at first but let me explain.
I have a system in which I can upload a project (I have a table project) and each project has multiple activities.
For this reason I created another table called activity_project and link the tables with a foreign key in the table activity_project that has the project id.
Up to here everything's good. I divided those fields in two forms, the first one captures the general info about the project and through ajax I send the data like this:
const datosProy = new FormData();
datosProy.append("lider", liderProy);
datosProy.append("folio", folioProy);
datosProy.append("nombre_proyecto", nombreProy);
datosProy.append("nombre_cliente", nombreClienteProy);
datosProy.append("id_laboratorio", idLabProy);
datosProy.append("tipo_proy", idTipoProy);
datosProy.append("fecha_entrega", fechaEntrega);
datosProy.append("archivo", archivo);
datosProy.append("comentarios", comentarios);
$.ajax({
url:"ajax-load/proyecto.ajax.php",
method: "POST",
data: datosProy,
cache: false,
contentType: false,
processData: false,
success: function(respuesta) {
if (respuesta == "error") {
// Show error
} else {
// Say everything's fine
// Show activities div
}
}
I can post the project, and after the data is passed next I show the div with the other form and the inputs so the user can explain what the activities are.
The thing is, as I thought about it (you can give me a better way if you know there), each input will represent a row in my activity_project table. So I thought about doing this with ajax and for each input that has some text, I'll call the ajax function and upload the data to my table
Here's how I put the inputs in my form:
<?php
for ($i=4; $i < 13; $i++) {
echo '
<div id="actividadMedical'.$i.'" class="input-group mb-2 mr-sm-2 divActivOculo">
<div class="input-group mb-3">
<div class="input-group-prepend">
<label for="actividadMedical'.$i.'" class="input-group-text">'.$i.'</label>
</div>
<input id_area="'.$idMedical.'" id="actividadMedical'.$i.'" name="actividadMedical'.$i.'" type="text" class="form-control text-center autocompleteMedical" placeholder="Descripción de actividad">
</div>
</div>
';
}
?>
As you can tell, I give the users several inputs so they divide their activities (and hopefully ideas). That's how the system was requested but I know not always are all the inputs going to be filled.
The things I'm not quite clear about are getting the last project id registered (as that would be the project I'm linking the activities to) right when the activities are submitted and if I should say, there are all this new activities, iterate and check if all of them have some text or check that individually but then the ajax function would be called every time and I don't know if that's the optimal solution.
//////////////////////////////
UPDATE
//////////////////////////////
I modified a little bit my ajax call, so when I post a project, I will get back that last id. So the moment there's a new project, it receives that id and there won't be any confusion about the project id when doing a POST to activity_project, so it is now like this:
success: function(respuesta) {
if (respuesta == "error") {
// Show error
} else {
// Say everything's fine
// Show activities div
lastId = respuesta;
}
}