Hide two div from php form

Question

This is the code I had:

<?php  
$servername = "xxx.xxx.x.xx";
$username = "xxxxxx";
$password = "xxxxxxxx";
$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);

$sql1 = "UPDATE StockLuvas SET StockLuvas.Quantidade = StockLuvas.Quantidade -" . $quantidade . " WHERE StockLuvas.Tamanho = {$IdTamanho} AND StockLuvas.TipoLuva= {$IdTipoLuva};";

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

$rowCount = $query->num_rows;

$conn->close();
 ?>   

The 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="Funcionario" name="Funcionario">
	
	  <option value="0">Selecione Produto</option>

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

      <option value="2">XXXXX</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="TipoLuva" name="TipoLuva"></div></p></br>
	 
	 <p><h5><strong>Tamanho</strong></h5> <div id="Tamanho" name="Tamanho"></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 Funcionario = document.getElementById('Funcionario');
      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 TipoLuva = document.getElementById('TipoLuva');
      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 Tamanho = document.getElementById('Tamanho');
      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']];

	  Funcionario.onchange = getFood;
	  

      function getFood() {

        var val = this.value;

        var html_str = '<select name="Funcao">';

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

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

        }
		

        html_str += '</select>';

        Funcao.innerHTML = html_str;
		
		
	
		
		
		var html_str = '<select name="TipoLuva">';

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

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

        }
		

        html_str += '</select>';

        TipoLuva.innerHTML = html_str;
		
		
		
		
		var html_str = '<select name="Tamanho">';

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

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

        }
		

        html_str += '</select>';

        Tamanho.innerHTML = html_str;

      }
	 

    </script>

But I couldn’t do the update in the table Stockgloves with the fields: Id, Idgloves, Tipoluvas, Idsize, Size and Quantity, because in the part of the where of update did not have the variables of $IdLuvas nor the $IdTamanho on the form and by the names could not.

So I added the following variables to the code and changed the update:

$IdTipoLuva = $_POST['IdTipoLuva'];   
$IdTamanho = $_POST['IdTamanho'];

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

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

$sql1 = "UPDATE StockLuvas SET StockLuvas.Quantidade = StockLuvas.Quantidade -" . $quantidade . " WHERE StockLuvas.IdTamanho = {$IdTamanho} AND StockLuvas.IdLuvas = {$IdTipoLuva};";

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

And I added two new select to the form to get the variables I created above:

<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="Funcionario" name="Funcionario">
	
	  <option value="0">Selecione Produto</option>

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

      <option value="2">xxxxx</option>

      <option value="3">xxxxxx</option>
	  
    </select>
	</br>
	</br>

     <p><h5><strong>Função</strong></h5> <div id="Funcao" name="Funcao"></div></p></br>
	 
	 <p><h5><strong>Código de Luvas</strong></h5> <div id="IdTipoLuva" name="IdTipoLuva"></div></p></br>
	 
	 <p><h5><strong>Tipo de Luvas</strong></h5> <div id="TipoLuva" name="TipoLuva"></div></p></br>
	 
	 <p><h5><strong>Código do Tamanho</strong></h5> <div id="IdTamanho" name="IdTamanho"></div></p></br>
	 
	 <p><h5><strong>Tamanho</strong></h5> <div id="Tamanho" name="Tamanho"></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 Funcionario = document.getElementById('Funcionario');
      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 IdTipoLuva = document.getElementById('IdTipoLuva');
      var food3 = [[''], ['1'], ['1'], ['5'], ['1'], ['1'], ['1'], ['1'], ['1'], ['5'], ['1'], ['1'], ['1'], ['1'], ['5'], ['1'], ['1'], ['1'], ['1'], ['1'], ['1'], ['5'], ['5'], ['1'], ['5'], ['1'], ['5'], ['5'], ['1'], ['5'], ['1'], ['5'], ['5'], ['1'], ['5']];
	  var TipoLuva = document.getElementById('TipoLuva');
      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 IdTamanho = document.getElementById('IdTamanho');
      var food4 = [[''], ['2'], ['3'], ['3'], ['3'], ['2'], ['2'], ['2'], ['1'], ['2'], ['2'], ['2'], ['2'], ['2'], ['2'], ['3'], ['2'], ['2'], ['2'], ['2'], ['2'], ['3'], ['2'], ['2'], ['3'], ['3'], ['2'], ['2'], ['3'], ['2'], ['1'], ['2'], ['2'], ['2'], ['3']];
	  var Tamanho = document.getElementById('Tamanho');
      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']];

	  Funcionario.onchange = getFood;
	  

      function getFood() {

        var val = this.value;

        var html_str = '<select name="Funcao">';

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

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

        }
		

        html_str += '</select>';

        Funcao.innerHTML = html_str;
		
		
		var html_str = '<select name="IdTipoLuva">';

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

          html_str += '<option>' + food3[val][i]  + '</option>';
		  

        }
		

        html_str += '</select>';

        IdTipoLuva.innerHTML = html_str;
		
		
		var html_str = '<select name="TipoLuva">';

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

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

        }
		

        html_str += '</select>';

        TipoLuva.innerHTML = html_str;
		
		
		var html_str = '<select name="IdTamanho">';

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

          html_str += '<option>' + food4[val][i]  + '</option>';
		  

        }
		

        html_str += '</select>';

        IdTamanho.innerHTML = html_str;
		
		
		var html_str = '<select name="Tamanho">';

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

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

        }
		

        html_str += '</select>';

        Tamanho.innerHTML = html_str;

      }
	 

    </script>

But now when I select the employee those select also appear, where are not needed for the user who will fill the form, only need to do the updatein the stock table and inserir in the table of Regsaidaluvas, how can I hide these two select of the Gloves code and the size code in the form for the user not to see them? By selecting the employee the attributes that appear in the select are according to what the employee uses, both in function, type of gloves and size.

Answer 1

Dude, put the Idtipoluva and Idsize fields in inputs of type Hidden, which will not be displayed to the user (it will still be able to view in the source code).

Otherwise, there can’t be two elements with the same ID in HTML, so don’t use Idtipoluva and Idsize ID for its input and DIV container, try using different names.