How can I loop to insert data into a table in my form and then send it to my database?

Question

//Part of the form to which I want to apply the loop

        <div class="form-row">
          <div class="form-group col-md-6">
            <label>Curso</label>
            <input name="cursolivre" id="cursolivre" class="form-control" type="text" value="">
          </div>
          <div class="form-group col-md-6">
            <label>Segmento</label>
            <select class="form-control" name="segmento" id="segmento">
              <option value="Administrativo">Administrivo</option>
              <option value = "Tecnologico">Tecnológico</option>
              <option value="Tecnico">Técnico</option>
              <option Value="Livre">Livre</option>
            </select>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col-md-3">
            <label>Inicio</label>
            <input name="iniciol" id="iniciol" class="form-control" type="date" value="">
          </div>
          <div class="form-group col-md-3">
            <label>Termino</label>
            <input name="termino" id="termino" class="form-control" type="date" value="">
          </div>
          <div class="form-group col-md-2">
            <label>Carga Horário</label>
            <input name="cargahorario" id="cargahorario" class="form-control" type="number" value="">
          </div>
        </div>
        <button class="btn btn-default btn-adicionar-curso-livre" onclick="inserirTabela()" type="button"><span></span><img src="{{ asset('imagens/plus.png')}}" width="20px" alt="">  <strong>Nova Atividade</strong></button>
        <div class="form-row">
          <div class="form-group col-md-12">
            <table class="table table-striped">
              <thead class="table-light">
                <tr>
                  <th scope="col">Curso</th>
                  <th scope="col">Segmento</th>
                  <th scope="col">Inicio</th>
                  <th scope="col">Termino</th>
                  <th scope="col">Carga Horário</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th id="dado1"></th>
                  <th id="dado2"></th>
                  <th id="dado3"></th>
                  <th id="dado4"></th>
                  <th id="dado5"></th>
                </tr>
              </tbody>
            </table>
          </div>

//Insertion code

function inserirTabela(){
  var curso = document.form1.cursolivre.value;
  var segmento = document.form1.segmento.value;
  var inicio = document.form1.iniciol.value;
  var termino = document.form1.termino.value;
  var cargahorario = document.form1.cargahorario.value;

  document.getElementById("dado1").innerHTML = curso;
  document.getElementById("dado2").innerHTML = segmento;
  document.getElementById("dado3").innerHTML = inicio;
  document.getElementById("dado4").innerHTML = termino;
  document.getElementById("dado5").innerHTML = cargahorario;
}

When I click on new activity, I need to insert it in a new line below the first activity, save in an array to send to my bank.

Answer 1

Allan, basically what you need is to work with a javascript object. I’ll call this object an activity.

Model class

function atividade() {
    this.curso: undefined,
    this.segmento: undefined,
    this.inicio: undefined,
    this.termino: undefined,
    this.cargahorario: undefined  
}

I initialize the properties of the object with Undefined, for a preference of mine, but you can start with null, ``, the way you understand it is most convenient to you according to the scope of your project.

Event click the new activity button

Well, now that we have the object, in the new activity button click event, you should map the activity object with the form values.

var novaAtividade = new atividade();

novaAtividade.curso = document.form1.cursolivre.value;
novaAtividade.segmento = document.form1.segmento.value;
novaAtividade.inicio = document.form1.iniciol.value;
novaAtividade.termino = document.form1.termino.value;
novaAtividade.cargahorario = document.form1.cargahorario.value;

atividades.push(novaAividade);

The variable atividades, is an array that must be created in a global scope of the file that controls the screen with its form, its declaration must be made as follows:

var atividades = [];

[] says that the activity variable will receive an empty array, thus the method push() becomes possible to be executed.

push() will make the inclusion of the object novaAtividade at the end of the array.

This way the user can include amounts activities want. For this answer I will take the approach of going through the array atividades, and go to the server for each record. For the approach of persisting the array, it already has to be on the server, but I imagine the idea in php, be the same as I will be with JS.

Persist

As I do not know, its function, I will only describe idaAoServer(activity), to identify the moment the entity persists.

Basically, on the button that will have the event save the data typed by the user, you must include the following block:

for (atividade in atividades){
    idaAoServer(atividade);
}

References

Objects with javascript builder

Push method

for in Objects javascript