Ocultar/exibir campos - Javascript

Crik · 22 de outubro de 2010

Bom dia!

Estou fazendo um formulário para entrada de dados que funciona assim:

Os representantes de rua inserem os dados de consumo para reembolso, porém ele pode inserir vários dados de várias datas em um dia, sendo que em cada dado inserido, deve-se postar o n° de nota fiscal, data de consumo e valor.

Qual a melhor forma de fazê-lo, para que não tenha que sair e voltar da mesma tela trocentas vezes? JavaScript? PHP? Outro?

Estava tentando fazer com que assim que o dado fosse inserido nos campos, os dados fossem listados abaixo do formulário, para que depois fossem todos enviados de uma só vez depois de uma mensagem de confirmação.

O script está assim:

<?php include "conecta_mysql.inc.php";?>	<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>	<html xmlns='http://www.w3.org/1999/xhtml'>	<head>    <title>.: Extranet Village - Página do Revendedor :.</title>	<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' /><link href='style.css' rel='stylesheet' type='text/css' media='screen' />        </head>        <script language="JavaScript">function habilitaCampos(par){      div = document.getElementById('teste');     if(par == 'sim')     {            div.style.display = 'block';       }     else     {             div.style.display = 'none';                                  }                  }                </script>		<body bgcolor='#FFFFFF'><div id="main"><div id='logo'>
	<?php		echo "<font color='#993366' size='4' face='arial'>";	//inicio data$semana = date("w"); $dia = date("j");$mês = date("n");$ano = date("Y");$meses = array(1 => "Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro");$semanas = array("Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado");echo "$semanas[$semana], $dia de $meses[$mês] de $ano";		//fim data	include "valida.php";	?>		</font>		</div></div>       		  <p></p><p></p>		<form action='lista_dados.php' method='POST'>	       <p align='center'><img src='images/Village_LOGO_Chapado.jpeg' alt='Village' width='300' height='83' /></p>		    <p align='center'> </p><br />		 <div align="center">          <strong><?php		  //inicio saudação  $hora = date ("H");if($hora >= 5 and $hora < 12){    print "Bom Dia, ";}elseif($hora >= 12){    print "Boa Tarde, ";}elseif($hora > 19 or $hora < 5){    print "Boa Noite, ";}echo $nome;		//fim saudação?>				</strong>        </div>
        <p align='center'><BR></p>         <div align='center'><table width='604' border='3' cellspacing='1' cellpadding='1' bordercolor='#FFE4B5' bgcolor='#F5F5DC'>             <th width="592" scope='col'>            <table width='614' border='0' bordercolor='#FFE4B5' cellpadding='0' cellspacing='0' bgcolor='#F5F5DC'>		         <tr>                 <td height='46' colspan='7' class='pageName'>                 <div align='center'>		                <p>RELATÓRIO DE DESPESAS</p>		         </div>                                  </td>                 </tr>		          <div align='center'>                  <tr>		<td height='42' colspan='7' class='bodyText'>		<p>Insira aqui seus dados, o preenchimento de todos os campos é obrigatório.</p>		                <h6> </h6>                    </td>                    </tr>              </div>		<tr>        <td width='122' height='34' class='subHeader' id='monthformat'><div align="right">Período   </div></td>		            <td width='4' class='subHeader' id='monthformat'> </td>		            <td colspan="2" class='subHeader' id='monthformat'><input name='periodo' type='text' id='periodo' size='20' /></td>		            <td width='109' class='subHeader' id='monthformat'><div align="right">Campanha   </div></td>		            <td width='157' class='subHeader' id='monthformat' align='left'><div align='left'>		              <input name='campanha' type='text' id='campanha' size='20' />		           </div></td></tr>				          <tr>                          <td height='34' class='subHeader' id='monthformat'><div align="right">Estado   				          </div>                          </td>		                    <td height='34' class='subHeader' id='monthformat'> </td>		                    <td colspan="2" class='subHeader' id='monthformat'>                            <select '10' name='estado'>                      <option value='Acre'>Acre</option>                      <option value='Alagoas'>Alagoas</option>                      <option value='Amapá'>Amapá</option>                      <option value='Amazonas'>Amazonas</option>                      <option value='Bahia'>Bahia</option>                      <option value='Ceara'>Ceará</option>                      <option value='DF'>Distrito Federal</option>                      <option value='ES'>Espírito Santo</option>                      <option value='Goias'>Goiás</option>                      <option value='Maranhão'>Maranhão</option>                      <option value='MT'>Mato Grosso</option>                      <option value='MS'>Mato Grosso do Sul</option>                      <option value='MG'>Minas Gerais</option>                      <option value='Para'>Pará</option>                      <option value='Paraiba'>Paraíba</option>                      <option value='Parana'>Paraná</option>                      <option value='Pernambuco'>Pernambuco</option>                      <option value='Piaui'>Piauí</option>                      <option value='RJ'>Rio de Janeiro</option>                      <option value='RN'>Rio Gr. do Norte</option>                      <option value='RS'>Rio Gr. do Sul</option>                      <option value='Rondonia'>Rondonia</option>                      <option value='Roraima'>Roraima</option>                      <option value='SC'>Santa Catarina</option>                      <option value='SP'>São Paulo</option>                      <option value='Sergipe'>Sergipe</option>                      <option value='Tocantins'>Tocantins</option>                    </select>                    </td>		            <td width='109' class='subHeader' id='monthformat'><div align="right">Cidade   </div></td>		            <td width='157' class='subHeader' id='monthformat' align='left'><div align='left'>		              <input name='cidade' type='text' id='cidade' size='20' />		            </div></td></tr></table>                    <table width='612' border='0' bordercolor='#FFE4B5' cellpadding='0' cellspacing='0' bgcolor='#F5F5DC'>                      <tr>                        <td height='46' colspan="5" class='subHeader' id='monthformat2'>                        <div align='center'>                            <p>ITENS</p>                        </div>                            <div align='left'>                              <div align="center"></div>                            </div></td>                      </tr>                      <tr>                        <td width="150" height='54' class='subHeader' id='monthformat2'><p align="center">Item</p>                            <p align="center">                              <label>                              <select name="item" id="item">                                <option value="alimentacao">Alimentação</option>                                <option value="combustivel">Combustível</option>                                <option value="estacionamento">Estacionamento</option>                                <option value="materiald">Mat. Degustativo</option>                                <option value="materiale">Mat. de Escritório</option>                                <option value="pedagio">Pedágio</option>                                <option value="outros">Outros</option>                              </select>                              </label>                          </p>                          </td>                        <td width="135" height='54' class='subHeader' id='monthformat2'><p align="center">Valor </p>                            <p align="center">                              <input name='valor' type='text' size='20' value="R$" />                          </p></td>                        <td width="136" height='54' class='subHeader' id='monthformat2'><p align="center">Data da NF</p>                            <p align="center">                              <input name='datanf' type='text' size='20' />                          </p></td>                        <td width="137" class='subHeader' id='monthformat2'><p align="center">Nº da NF</p>                            <p align="center">                              <input name='nnf' type='text' size='20' />                          </p></td>                        <td width="53" class='subHeader' id='monthformat2'><div align="center">Inserir?</div>                            <input type="radio" name='opcao' value="s">                          Sim                          <input type="radio" name='opcao' value="n">                          Não </td>                      </tr>                                          <tr>                        <td colspan="5" valign='top' class='subHeader' id='monthformat4'></td>                      </tr>                      <tr>                        <td colspan="5" valign='top' class='subHeader' id='monthformat17'></td>                      </tr>                      <tr>                        <td height='17' colspan="5" class='subHeader' id='monthformat8'>
                      <tr>                        <td height='46' colspan="5" class='subHeader' id='monthformat5'><div align='center'> VISUALIZAÇÃO                         </div>                        <div id="teste" style="display: 'none';">                      <tr>					  <td height='54' class='subHeader' id='monthformat7'></td>					  <td class='subHeader' id='monthformat7'>                 </td>    					  <td height='54' class='subHeader' id='monthformat7'></td>					  <td height='54' class='subHeader' id='monthformat7'></td>					  <td height='54' class='subHeader' id='monthformat7'></td>					  <td height='54' class='subHeader' id='monthformat7'></td>                      <tr>                        <td height='16' colspan="5" class='subHeader' id='monthformat6'></td>                      </tr></div>               </table>             </table></div><p align='center'> </p><p align='center'>		  <input name='enviar' type='submit' class='botões' value='Enviar' />		   		<input name='limpar' type='reset' class='botões' value='Limpar' />		   		<input name='ver' type='submit' class='botões' value='Verificar' />		</p>        </form>        </body>             </html>

Está bem bagunçadinho porque estou no começo, tá gente... quem puder me ajudar, me dar alguma luz, ou até mesmo uma explicação, eu agradeço de coração.

Obrigada!

manzo. · 24 de outubro de 2010

Eu vou ser sincero que não todo o código (ler mais de 100 linhas de código sem comentário no domingo, não rola ;D), mas vou tentar te ajudar dizendo as soluções que utilizaria.

Normalmente eu procuro evitar carregar a página com divs que ficam aparecendo e sumindo a menos que seja uma exigência do cliente. Acho que fica muito confuso para dar manutenção e outras pessoas entenderem a dinâmica. Sem falar que javascript é a linguagem mais ilegível que eu já vi. (desabafo uauhauh)

Mas, vamos ao que interessa.O formulário continuaria da mesma forma e os botões também. Mas, o post do formulário iria para uma página php num popup que gravaria as informações em banco e se fecharia sozinho (uma mensagem de "aguarde o processamento" ficaria legal nesse popup). com as informções em banco um script ajax atualizaria a página para mostrar os novos dados guardados.

Mas, se você aachou muito complicado, você pode eliminar o popup e ajax e fazer tudo na mesma tela carrengando a página que salva as informações e depois voltando para a página do formulário passando todas as informações cadastradas por GET.

Para ser sincero a solução mais elegante ainda seria PHP com Smarty, mas ele não é muito conhecido, então nem vou entrar em detalhes.

Espero ter ajudado. Boa sorte!

Crik · 1 de novembro de 2010

Bom, a quem interessar, eu consegui!!!

<script>function AdicionaLinha(){	$("#tabelaItem").append(			$(document.createElement("tr")).append(				$(document.createElement("td")).attr({					"width": "40",					"height": "34",					"id": "monthformat5",					"class": "subHeader"				}).append(					$(document.createElement("div")).attr("align","center").append("Item:")				),
				$(document.createElement("td")).attr({					"width": "159",					"id": "monthformat5",					"class": "subHeader"				}).append(					$(document.createElement("select")).attr({						"id": "txtColuna",						"name": "estado3"					}).append(						$(document.createElement("option")).attr("value","alimentacao").append("Alimentação"),						$(document.createElement("option")).attr("value","combustivel").append("Combustível"),						$(document.createElement("option")).attr("value","materiald").append("Material Degustativo"),						$(document.createElement("option")).attr("value","materiale").append("Material de Escritório"),						$(document.createElement("option")).attr("value","pedagio").append("Pedágio"),						$(document.createElement("option")).attr("value","copia").append("Cópia"),						$(document.createElement("option")).attr("value","outros").append("Outros")					)				),
				$(document.createElement("td")).attr({					"width": "75",					"id": "monthformat5",					"class": "subHeader"				}).append(					$(document.createElement("div")).attr("align","center").append("Data:")				),
				$(document.createElement("td")).attr({					"width": "72",					"id": "monthformat5",					"class": "subHeader"				}).append(					$(document.createElement("input")).attr({						"size": "12",						"id": "txtData"					})										),				$(document.createElement("td")).attr({					"width": "61",					"id": "monthformat5",					"class": "subHeader"				}).append(					$(document.createElement("div")).attr("align","center").append("Valor:")				),				$(document.createElement("td")).attr({					"width": "72",					"id": "monthformat5",					"class": "subHeader"				}).append(					$(document.createElement("input")).attr({						"size": "12",						"id": "txtValor"					})										),				$(document.createElement("td")).attr({					"width": "63",					"id": "monthformat5",					"class": "subHeader"				}).append(					$(document.createElement("div")).attr("align","center").append("NF:")				),				$(document.createElement("td")).attr({					"width": "72",					"id": "monthformat5",					"class": "subHeader"				}).append(					$(document.createElement("input")).attr({						"size": "12",						"id": "txtNF"					})				)			)	);}</script>                         </table>
                          <p>                         <input type="button" class="botões" value="Adicionar Item" onClick="AdicionaLinha()">