Load data into a div table within a form

Asked

Viewed 288 times

2

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 in the variable or in the table, but I need these values in the variables to update the stock table, because I need these variables in the update 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 in the stock table:

$sql1 = "UPDATE StockLuvas SET Quantidade = Quantidade -" . $quantidade . " WHERE StockLuvas.IdTipoLuvas =" . $tipoluva AND "StockLuvas.IdTamanho =" . $tamanho;
php mysql sql-update

  • It’s not working because you’re creating the select without the attribute name.

  • When you say Select, refers to this part of the code <p><h5><strong>Tipo de Luvas</strong></h5> <div id="terceiro_dd_div"></div></p></br>? I already added the name of the table field and the variable is without the form completion value

  • When you define the select thus var html_str = '<select>';, you to assign a "name" to it: var html_str = '<select name="Funcao">';. Only in this way the PHP will recognize the field and you can update the database. The select must have different names.

  • Thank you... Solved..

  • I want to create two Select like this var html_str = '<select name="Funcao">'; to insert into the table and assign value to the variable, but I want the <p><h5><strong>Tipo de Luvas</strong></h5> <div id="terceiro_dd_div"></div></p></br> is invisible in the user form.

1 answer

0

You don’t need to use js to store several equal values and then create the select. You can simply create a select and keep it hidden.

Here’s an example of how to do:

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

  • The problem is that I the way I’ve been raised with js when selecting the employee, immediately assigns the correct function, the type of gloves he wears and the size and in the example you presented this does not happen, but it is possible?,

  • I created a new question to better explain what I need with the title: Hide two div from the php form

  • @Desc changed my answer, check if that’s right. I added the variables funcoesPorFuncionarios, tamanhoPorFuncionarios and tipoLuvaPorFuncionarios following the order of select Funcionario

  • My problem is that this way, I can’t do the update in the table of the stockgloves, since I do not have the variables of the $idTipoLuvas nor $IdTamanho to filter in the WHEREof UPDATE. For example imagine now those 4 SELECT it still keep the variable and do theINSERT in the table, but the user does not see it, for example the SELECT of the Glove Type stay hidden and do not appear on the form. That’s what I need

Browser other questions tagged php mysql sql-update

You are not signed in. Login or sign up in order to post.