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

Navigation
0

// 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>

// Insert 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 it in an array to send it to my bank.

    
asked by anonymous 28.04.2018 / 20:21

1 answer

0

Allan, basically what you need is to work with a javascript object. I will call this object of activity.

Class model 

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

, ', I want to start the properties of the object with undefined , for my preference, but you can start with null , that you understand that is most convenient to you according to the scope of your project.

Click event of the new activity button

Well, now that we have the object, in the click event of the new activity button, you must map the activity object to the values of the form. 

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 your form, your declaration should be done as follows: 

var atividades = [];

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

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

In this way the user can include activities he wants. For this answer I will take the approach of traversing the array atividades , and going to the server for each record. For the persisting array approach, it already has to be on the server, but I imagine the idea in php, is the same as I will in JS .

Persist

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

Basically, in the button that will have the event of saving the data entered by the user, you must include the following block: 

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

References

Objects with constructor in javascript

Push method

for in javascript objects

    
28.04.2018 / 21:25
FIFO with STRUCT does not work Password in a Datagridview