Load the data into the table of a div inside a form

Navigation
1

I have this form: 

<form name="form4" method="POST" onsubmit="return form_validation()" >
	
	<h1><center><strong>Saída de Luvas</strong></center></h1></br>
	
    <p><h5><strong>Data de Saída</strong></h5> <input id="DataSaida" type="date" name="DataSaida" required="" ></p></br>

    <label for=""><h5><strong>Funcionario</strong></h5></label>
    <select id="first_dd" name="Funcionario">
	
	  <option value="0">Selecione Produto</option>

      <option value="1">Alice</option>

      <option value="2">Ana Ferreira</option>

      <option value="3">Ana Paula</option>
	  
	  <option value="4">Anabela</option>

      <option value="5">Bernardete Moreira</option>
	  
	  <option value="6">Clarinda Fernandes</option>

      <option value="7">Conceição</option>
	  
	  <option value="8">Enfermagem</option>

      <option value="9">Eunice</option>

      <option value="10">Fátima Belchior</option>
	  
	  <option value="11">Fernanda Pereira</option>

      <option value="12">Fisioterapia</option>

      <option value="13">Florinda</option>
	  
	  <option value="14">Georgina</option>

      <option value="15">Helena Ferreirinha</option>

      <option value="16">Isabel Barge</option>
	  
	  <option value="17">Isabel Gomes</option>

      <option value="18">Joana Lopes</option>

      <option value="19">Joaquim Cunha</option>

      <option value="20">Luísa Almeida</option>

      <option value="21">Manuela Moreno </option>
	  
	  <option value="22">Maria José Pereira</option>

      <option value="23">Maria Mendes</option>

      <option value="24">Mário Ferreira</option>
	  
	  <option value="25">Mário Oliveira</option>

      <option value="26">Marisa Silva</option>

      <option value="27">Mónica</option>
	  
	  <option value="28">Mónica Susana</option>

      <option value="29">Patricia Inácio</option>

      <option value="30">Paula Barbosa</option>
	  
	  <option value="31">Paula Rodrigues</option>

      <option value="32">Paula Silva</option>

      <option value="33">Silvia Borges</option>
	  
	  <option value="34">WC Refeitório</option>
	  
    </select>
	</br>
	</br>

     <p><h5><strong>Função</strong></h5> <div id="Funcao" name="Funcao"></div></p></br>
	 
	 <p><h5><strong>Tipo de Luvas</strong></h5> <div id="terceiro_dd_div"></div></p></br>
	 
	 <p><h5><strong>Tamanho</strong></h5> <div id="quarto_dd_div"></div></p></br>
	 
	 <p><h5><strong>Quantidade</strong></h5> <input type="text" id="Quantidade" name="Quantidade" required="" size="40" /><br/></p></br>
	 
	 <p><h5><strong>Observações</strong></h5></br>
<textarea type="text" id="Observacoes" name="Observacoes" rows="2" cols="90"></textarea><br/></p></br>
	 
	<input type="submit" value="Registar"/>
</form>

    <script>

      var first_dd = document.getElementById('first_dd');
      var Funcao = document.getElementById('Funcao');
      var food = [[''], ['AAD'], ['AAD'], ['AAD'], ['AAD'], ['AAD'], ['AAD'], ['AAD'], ['Enfermagem'], ['Estágio'], ['AAD'], ['AAD'], ['Fisioterapia'], ['AAD'], ['AAD'], ['AAD'], ['AAD'], ['Pedologista'], ['AAD'], ['Estágio'], ['AAD'], ['AAD'], ['AAD'], ['AAD'], ['AAD'], ['AAD'], ['AAD'], ['AAD'], ['AAD'], ['AAD'], ['AAD'], ['AAD'], ['AAD'], ['AAD'], ['Outro']];
      var terceiro_dd_div = document.getElementById('terceiro_dd_div');
      var food1 = [[''], ['Vinil s/ pó'], ['Vinil s/ pó'], ['Nitrilo'], ['Vinil s/ pó'], ['Vinil s/ pó'], ['Vinil s/ pó'], ['Vinil s/ pó'], ['Vinil s/ pó'], ['Nitrilo'], ['Vinil s/ pó'], ['Vinil s/ pó'], ['Vinil s/ pó'], ['Vinil s/ pó'], ['Nitrilo'], ['Vinil s/ pó'], ['Vinil s/ pó'], ['Vinil s/ pó'], ['Vinil s/ pó'], ['Vinil s/ pó'], ['Vinil s/ pó'], ['Nitrilo'], ['Nitrilo'], ['Vinil s/ pó'], ['Nitrilo'], ['Vinil s/ pó'], ['Nitrilo'], ['Nitrilo'], ['Vinil s/ pó'], ['Nitrilo'], ['Vinil s/ pó'], ['Nitrilo'], ['Nitrilo'], ['Vinil s/ pó'], ['Nitrilo']];
      var quarto_dd_div = document.getElementById('quarto_dd_div');
      var food2 = [[''], ['M'], ['L'], ['L'], ['L'], ['M'], ['M'], ['M'], ['S'], ['M'], ['M'], ['M'], ['M'], ['M'], ['M'], ['L'], ['M'], ['M'], ['M'], ['M'], ['M'], ['L'], ['M'], ['M'], ['L'], ['L'], ['M'], ['M'], ['L'], ['M'], ['S'], ['M'], ['M'], ['M'], ['L']];

	  first_dd.onchange = getFood;
	  

      function getFood() {

        var val = this.value;

        var html_str = '<select>';

        for (var i = 0, len = food[val].length; i < len; i++) {

          html_str += '<option>' + food[val][i]  + '</option>';
		  html_str += '<option>' + food1[val][i]  + '</option>';
		  html_str += '<option>' + food2[val][i]  + '</option>';

        }

        html_str += '</select>';

        Funcao.innerHTML = html_str;
		
		terceiro_dd_div.innerHTML = html_str;
		
		quarto_dd_div.innerHTML = html_str;

      }
	 

    </script>

The values of the function, glove type, and size fields are not loaded into the variable or table, but I need these values in the variables to update the stock table because I need these variables in the update's where. The code I have is this: 

<?php  
$servername = "xxx.xxx.x.xx";
$username = "xxxxxx";
$password = "xxxxxxx";
$dbname = "xxxxxxxxx";

$conn = new mysqli($servername, $username, $password, $dbname);
$conn->set_charset('utf8');

$data = $_POST['DataSaida'];
$funcionario = $_POST['Funcionario'];
$funcao = $_POST['Funcao']; 
$tipoluva = $_POST['TipoLuva'];
$tamanho = $_POST['Tamanho'];
$quantidade = $_POST['Quantidade'];
$observacoes = $_POST['Observacoes'];

$sql = "INSERT INTO RegSaidaLuvas ('DataSaida','Funcionario','Funcao','TipoLuva','Tamanho','Quantidade','Observacoes') 'VALUES ('$data','$funcionario','$funcao','$tipoluva','$tamanho','$quantidade','$observacoes')";'

if ($conn->query($sql) === TRUE);

 $rowCount = $query->num_rows;

$conn->close();
 ?>

I need to do this update on the stock table: 

$sql1 = "UPDATE StockLuvas SET Quantidade = Quantidade -" . $quantidade . " WHERE StockLuvas.IdTipoLuvas =" . $tipoluva AND "StockLuvas.IdTamanho =" . $tamanho;
    
asked by anonymous 03.01.2018 / 10:19

1 answer

0

You do not need to use js to store multiple equal values and then create select . You can simply create a select and leave it hidden.

Here is an example of how to do it: 

// Captura o "select" com a lista de funcionários
var listaFuncionarios = document.querySelector("select[name=\"Funcionario\"]");

// Captura a "div" com as listas de funções, tamanhos e tipos de luva
var listaFuncoes = document.querySelector("#lista-funcoes");
var listaTamanhos = document.querySelector("#lista-tamanhos");
var listaTipoLuvas = document.querySelector("#lista-tipo-luvas");

/* Só irá funcionar para os 6 primeiros, afinal é apenas um exemplo. */
var funcoesPorFuncionarios = ["AAD","Enfermagem","Enfermagem","Pedologista","Outro","Estágio"];
var tamanhoPorFuncionarios = ["L","L","L","M","M","L"];
var tipoLuvaPorFuncionarios = ["Nitrilo","Nitrilo","Vinil s/ pó","Vinil s/ pó","Nitrilo","Nitrilo"];

// Adiciona um evento no "select" da lista de funcionários. Quando o "select" sofrer alterações no valor, o evento será disparado.
listaFuncionarios.addEventListener("change", function() {

  /* Remove a classe "display", responsável por exibir os campos */
  listaFuncoes.classList.remove("display");
  listaTamanhos.classList.remove("display");
  listaTipoLuvas.classList.remove("display");

  if (this.value > 0) {
    /* Adiciona a classe "display", responsável por exibir os campos */
    listaFuncoes.classList.add("display");
    listaTamanhos.classList.add("display");
    listaTipoLuvas.classList.add("display");
    
    /* Preenche os "select" de forma automática */
    listaFuncoes.querySelector("select").value = funcoesPorFuncionarios[this.value];
    listaTamanhos.querySelector("select").value = tamanhoPorFuncionarios[this.value];
    listaTipoLuvas.querySelector("select").value = tipoLuvaPorFuncionarios[this.value];
  }
});
#lista-funcoes,
#lista-tamanhos,
#lista-tipo-luvas {
  display: none
}

.display {
  display: block !important;
  animation: fadein 2s
}

@keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
<form name="form4" method="POST" onsubmit="return form_validation()">
  <h1>
    <center><strong>Saída de Luvas</strong></center>
  </h1>
  <br />

  <h5><strong>Data de Saída</strong></h5>
  <input id="DataSaida" type="date" name="DataSaida" required="">
  <br />

  <label for="">
		<h5><strong>Funcionario</strong></h5>
	</label>

  <select id="first_dd" name="Funcionario">
		<option value="0">Selecione o funcionário</option>
		<option value="1">Alice</option>
		<option value="2">Ana Ferreira</option>
		<option value="3">Ana Paula</option>
		<option value="4">Anabela</option>
		<option value="5">Bernardete Moreira</option>
		<option value="6">Clarinda Fernandes</option>
		<option value="7">Conceição</option>
		<option value="8">Enfermagem</option>
		<option value="9">Eunice</option>
		<option value="10">Fátima Belchior</option>
		<option value="11">Fernanda Pereira</option>
		<option value="12">Fisioterapia</option>
		<option value="13">Florinda</option>
		<option value="14">Georgina</option>
		<option value="15">Helena Ferreirinha</option>
		<option value="16">Isabel Barge</option>
		<option value="17">Isabel Gomes</option>
		<option value="18">Joana Lopes</option>
		<option value="19">Joaquim Cunha</option>
		<option value="20">Luísa Almeida</option>
		<option value="21">Manuela Moreno </option>
		<option value="22">Maria José Pereira</option>
		<option value="23">Maria Mendes</option>
		<option value="24">Mário Ferreira</option>
		<option value="25">Mário Oliveira</option>
		<option value="26">Marisa Silva</option>
		<option value="27">Mónica</option>
		<option value="28">Mónica Susana</option>
		<option value="29">Patricia Inácio</option>
		<option value="30">Paula Barbosa</option>
		<option value="31">Paula Rodrigues</option>
		<option value="32">Paula Silva</option>
		<option value="33">Silvia Borges</option>
		<option value="34">WC Refeitório</option>
	</select>

  <div id="lista-funcoes">
    <h5><strong>Função</strong></h5>
    <select name="Funcao">
      <option value="AAD">AAD</option>
      <option value="Enfermagem">Enfermagem</option>
      <option value="Estágio">Estágio</option>
      <option value="Fisioterapia">Fisioterapia</option>
      <option value="Pedologista">Pedologista</option>
      <option value="Outro">Outro</option>
    </select>
  </div>

  <div id="lista-tipo-luvas">
    <h5><strong>Tipo de Luvas</strong></h5>
    <select name="TipoLuva">
      <option value="Vinil s/ pó">Vinil s/ pó</option>
      <option value="Nitrilo">Nitrilo</option>
    </select>
  </div>

  <div id="lista-tamanhos">
    <h5><strong>Tamanho</strong></h5>
    <select name="Tamanho">
      <option value="L">L</option>
      <option value="M">M</option>
    </select>
  </div>

  <h5><strong>Quantidade</strong></h5>
  <input type="text" id="Quantidade" name="Quantidade" required="" size="40" /><br/>

  <h5><strong>Observações</strong></h5>
  <br/>
  <textarea type="text" id="Observacoes" name="Observacoes" rows="2" cols="90"></textarea>
  <br/>
  <br/>
  <input type="submit" value="Registar" />
</form>
    
03.01.2018 / 22:02
Insert item titles on the side carousel bootstrap Put flag at bash shell command line