[Resolvido] Resgatando campos criados dinamicamente...

Martinsrj · Abril 18, 2010

Olá pessoal, boa dia!

Possuo um formulário onde os três ultimos campos (Tipo Despesa, Descrição, Valor) poderão ser criados dinamicamente pelo usuario através do javascript.

Segue o link do formulário: http://martinsrj.com/teste/index1.php

A pergunta é, como que eu irei resgatar esses valores dinamicamente e colocar em um insert do SQL.

Segue o código completo:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>        
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Atualização de Chamado</title>

<style type="text/css">
label {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000000;
}

input:focus, select:focus, textarea:focus {
	background:#DFDFFF;
	color:white; 
}

body { 
	margin:0; 
	padding:0; 
	background:#FFFFFF;  
} 

table.tabela {   
	/*width:200;
	text-align: center;   
	margin: 0 auto; */
}
</style>

<script type="text/javascript">
function addRowToTable()
{
  var tbl = document.getElementById('AtChamado');
  var lastRow = tbl.rows.length -1;
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);
  
  var cellRightSel = row.insertCell(0);
  var textTpDespesa = document.createTextNode("Tipo Despesa");
  var fontTpDespesa = document.createElement("label");
  var quebraTpDespesa = document.createElement('BR');
  var sel = document.createElement('select');
  var quebra = document.createElement('BR');
  sel.name = 'selRow' + iteration;
  sel.options[0] = new Option('... Selecione ...', '... Selecione ...');
  sel.options[1] = new Option('Kilometragem', 'Kilometragem');
  sel.options[2] = new Option('Taxi', 'Taxi');
  sel.options[3] = new Option('Onibus', 'Onibus');
  sel.options[4] = new Option('Refeicao', 'Refeicao');
  sel.options[5] = new Option('Outros', 'Outros');

  fontTpDespesa.appendChild(textTpDespesa); 
  cellRightSel.appendChild(fontTpDespesa); 
  cellRightSel.appendChild(quebraTpDespesa);
  
  cellRightSel.appendChild(sel);
  cellRightSel.appendChild(quebra);
  
  var textDesc = document.createTextNode("Descrio");
  var fontDesc = document.createElement("label");
  
  var quebraDesc = document.createElement('BR');
  var el = document.createElement('input');
  var quebra = document.createElement('BR');
  el.type = 'text';
  el.name = 'txtDescD' + iteration;
  el.id = 'txtDescD' + iteration;
  el.size = 10;
  
  el.onkeypress = keyPressTest;

  fontDesc.appendChild(textDesc); 
  cellRightSel.appendChild(fontDesc); 
  cellRightSel.appendChild(quebraDesc);
  cellRightSel.appendChild(el);
  cellRightSel.appendChild(quebra);

  var textValor = document.createTextNode("Valor");
  var fontValor = document.createElement("label");
  var quebraValor = document.createElement('BR');	
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'txtValorD' + iteration;
  el.id = 'txtValorD' + iteration;
  el.size = 10;  
  
  el.onkeypress = keyPressTest;

  fontValor.appendChild(textValor); 
  cellRightSel.appendChild(fontValor); 
  
  cellRightSel.appendChild(quebraValor);
  cellRightSel.appendChild(el);
   
}

function keyPressTest(e, obj)
{
  var validateChkb = document.getElementById('chkValidateOnKeyPress');
  if (validateChkb.checked) {
    var displayObj = document.getElementById('spanOutput');
    var key;
    if(window.event) {
      key = window.event.keyCode; 
    }
    else if(e.which) {
      key = e.which;
    }
    var objId;
    if (obj != null) {
      objId = obj.id;
    } else {
      objId = this.id;
    }
    displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
  }
}
function removeRowFromTable()
{
  var tbl = document.getElementById('AtChamado');
  var lastRow = tbl.rows.length -1;
  if (lastRow > 13) tbl.deleteRow(lastRow - 1);
  
}

function verificaHP(obj) {  
	if (!document.layers) {  
	var txt = document.getElementById("somenteHP");  
		if (obj.value == "f_hp@ntl.com.br") {  
			txt.style.display = "inline";  
			txt.name = "optTipoChamado";  
			obj.name = "";  
		} 
		else {  
			txt.style.display = "none";  
			txt.name = "";  
			obj.name = "optTipoChamado";  
		}  
	} 
}		

</script>


</head>
<body>

<form action="formNtl.html" method="get">
<table class="tabela" id="AtChamado" align="left">
  <tr>
    <td>
	<label class="label" for="optTipoChamado">Tipo do Chamado:</label><br />
	<select name="optTipoChamado" id="optTipoChamado" onchange="verificaHP(this)">
		<option value="">... Selecione ...</option>
		<option value="f_hp@ntl.com.br">HP</option>
		<option value="f_altiris@ntl.com.br">NTL</option>
	</select>	</td>
  </tr>
  <tr>
    <td>
	<label for="txtChamadoAltiris" class="label">Chamado Altiris:</label><br />
		<input class="input" type="text" title="" maxlength="" size="" name="txtChamadoAltiris" id="txtChamadoAltiris" value="" />	</td>
  </tr>
  <tr>
    <td>
	<label for="txtChamadoHP" class="label">Chamado HP:</label><br />
		<input class="input" type="text" title="" maxlength="" size="" name="txtChamadoHP" id="txtChamadoHP" value="" />	</td>
  </tr>
  <tr>
    <td>
	<label for="txtDescServico" class="label">Descrição do Serviço:</label><br />
	<textarea title="" name="txtDescServico" id="txtDescServico" rows="5" cols="25" class="input"></textarea>	</td>
  </tr>
  <tr id="somenteHP" style="display:none;">  
    <td>
	<label for="txtPNRemovido" class="label">PN Removido:</label><br />
	<input class="input" type="text" title="" maxlength="" size="" name="txtPNRemovido" id="txtPNRemovido" value="" />	
	<br />
	<label for="txtNSRemovido" class="label">N/S Removido</label><br />
		<input class="input" type="text" title="" maxlength="" size="" name="txtNSRemovido" id="txtNSRemovido" value="" />
	<br />
	<label for="txtPNInstalado" class="label">PN Instalado:</label><br />
		<input class="input" type="text" title="" maxlength="" size="" name="txtPNInstalado" id="txtPNInstalado" value="" />
	<br />
	<label for="txtNSInstalado" class="label">N/S Instalado</label><br />
		<input class="input" type="text" title="" maxlength="" size="" name="txtNSInstalado" id="txtNSInstalado" value="" />
	
	</td>
  </tr>
  <tr>
    <td>
	<label for="txtQAssRS" class="label">Quem assinou o RS</label><br />
		<input class="input" type="text" title="" maxlength="" size="" name="txtQAssRS" id="txtQAssRS" value="" />	</td>
  </tr>
  <tr>
    <td>
	<label for="txtRS" class="label">RS</label><br />
		<input class="input" type="text" title="" maxlength="" size="" name="txtRS" id="txtRS" value="" />	</td>
  </tr>
  <tr>
    <td>
	<label for="txtDtInicio" class="label">Data Inicio</label><br />
	<input class="input" type="text" title="" maxlength="" size="" name="txtDtInicio" id="txtDtInicio" value="" />	</td>
  </tr>
  <tr>
    <td>
	<label for="txtHrInicio" class="label">Hora Inicio</label><br />
	<input class="input" type="text" title="" maxlength="" size="" name="txtHrInicio" id="txtHrInicio" value="" />	</td>
  </tr>
  <tr>
    <td>
	<label for="txtDtTermino" class="label">Data Término</label><br />
	<input class="input" type="text" title="" maxlength="" size="" name="txtDtTermino" id="txtDtTermino" value="" />	</td>
  </tr>
  <tr>
    <td>
	<label for="txtDtTermino" class="label">Hora Término<br /></label>
	<input class="input" type="text" title="" maxlength="" size="" name="txtDtTermino" value="" />	</td>
  </tr>
  <tr>
    <td>
	<label class="label" id="txtReembolso"><b>Reembolso</b></label>	</td>
  </tr>
  <tr>
    <td>
    	<label for="optTpDesp" class="label">Tipo Despesa </label>
	<br />
	<select name="optTpDesp" id="optTpDesp">
		<option value="">... Selecione ...</option>
        <option value="Kilometragem">Kilometragem</option>
        <option value="Taxi">Taxi</option>
		<option value="Onibus">Ônibus</option>
        <option value="Refeicao">Refeição</option>
        <option value="Outros">Outros</option>
     </select><br />
	 
	 <label for="txtDesc" class="label" onKeyPress="keyPressTest(event, this);">Descrição</label><br />
	<input class="input" type="text" title="" maxlength="" size="10" onKeyPress="keyPressTest(event, this);" name="txtDesc" id="txtDesc" value="" /><br />
	
	<label for="txtValor" class="label" onKeyPress="keyPressTest(event, this);">Valor</label><br />
	<input class="input" type="text" title="" maxlength="" size="10" onKeyPress="keyPressTest(event, this);" name="txtValor" id="txtValor" value="" />
		
    </td>
  </tr>
  
  <tr>
    <td align="left">
	<input type="button" value="Inserir" onclick="addRowToTable();" />
    <input type="button" value="Remover" onclick="removeRowFromTable();" /><br />
	<input name="Enviar" type="submit" id="Enviar" value="Enviar" />	
	</td>
  </tr>
</table>

</form>
</body>
</html>

AndreRO · Abril 18, 2010

Foi mal, seu código é meio grande e tô com um pouco de pressa pra olhar...

Apenas esses 3 campos podem ser criados?

Se sim, basta verificar se o valor não é nulo e, caso não seja, adicionar na query SQL

If Request.QueryString("nomeCampoDinamico1") Not "" Then          'Verifica se o nomeCampoDinamico1 não é nulo, ou seja, se o usuário enviou algum dado'

SQLQuery = SQLQuery & "," & Request.QueryString("nomeCampoDinamico1")   'Caso tenha algum dado, esse código vai adicionar uma vírgula (para separar os valores) mais o valor do campo a uma variável que armazenará sua query SQL'


End If

Agora é só criar igual para os 3 campos

Espero que tenha ficado claro... Qualquer coisa só perguntar

Martinsrj · Abril 18, 2010

Olá AndreRo, bom dia!

Apenas os campos abaixo que serão adicionado caso haja necessidade:

  <tr>
    <td>
    	<label for="optTpDesp" class="label">Tipo Despesa </label>
	<br />
	<select name="optTpDesp" id="optTpDesp">
		<option value="">... Selecione ...</option>
        <option value="Kilometragem">Kilometragem</option>
        <option value="Taxi">Taxi</option>
		<option value="Onibus">Ônibus</option>
        <option value="Refeicao">Refeição</option>
        <option value="Outros">Outros</option>
     </select><br />
	 
	 <label for="txtDesc" class="label" onKeyPress="keyPressTest(event, this);">Descrição</label><br />
	<input class="input" type="text" title="" maxlength="" size="10" onKeyPress="keyPressTest(event, this);" name="txtDesc" id="txtDesc" value="" /><br />
	
	<label for="txtValor" class="label" onKeyPress="keyPressTest(event, this);">Valor</label><br />
	<input class="input" type="text" title="" maxlength="" size="10" onKeyPress="keyPressTest(event, this);" name="txtValor" id="txtValor" value="" />
		
    </td>
  </tr>

Minha dificuldade é como resgatar os campos através do Request e depois montar a query e assim efetuar o INSERT.

Exemplo, o código abaixo irá funcionar, porem existe casos que o usuario não terá necessidade de incluir e com isso o código abaixo funciona, mas quando o usuario incluir um ou dois como que irei resgatar esses campos?

var_optTpDesp = Request.Form("optTpDesp")
var_txtDesc = Request.Form("txtDesc")
var_txtValor = Request.Form("txtValor")

sqlString = "INSERT INTO tb_exemplo"&_
"(tpDesp, descricao, valor) VALUES ( '" & var_optTpDesp  & "', '" & var_txtDesc & "', '" & var_txtValor& "')"

Conn.Execute sqlString
response.Write("Cadastro efetuado!!!")

xanburzum · Abril 18, 2010

recupera ele atraves do request e faz um loop criando um array, depois é só manipular os valores do array

Martinsrj · Abril 18, 2010

Desculpa, eu não entendi!

Teria como você fazer um exemplo?

Abraços.

recupera ele atraves do request e faz um loop criando um array, depois é só manipular os valores do array

xanburzum · Abril 20, 2010

For Each item In Request.Form

Response.Write item & ": " & Request.Form(item)

Martinsrj · Abril 20, 2010

Boa tarde Xanburzum!

Consegui numa boa dar o request e depois com o For inseri no insert.

A minha dúvida agora é outra, pois a combo: optTpDesp0 agora é alimentada pelo RecordSet ficando a combo dessa forma:

 <select name="optTpDesp0" class="optTpDesp0">
    <option selected="">... Selecione ...</option>
    <%
	Do While not rs_despesa.EOF %>
          <option value="<%=rs_despesa.Fields("codigo")%>"><%=rs_despesa.Fields("descricao")%></option>	             
     <% rs_despesa.MoveNext
    Loop
     %>
 </select>

Possuo um código javascript que antes era alimentado manualmente, mas com a combo dinamica como que eu posso modificar o meu javascript que atualmente está assim:

  sel.name = 'optTpDesp' + var_txtCont.value; 
  sel.options[0] = new Option('... Selecione ...', '... Selecione ...');
  sel.options[1] = new Option('Kilometragem', 'Kilometragem');
  sel.options[2] = new Option('Taxi', 'Taxi');
  sel.options[3] = new Option('Onibus', 'Onibus');
  sel.options[4] = new Option('Refeicao', 'Refeicao');
  sel.options[5] = new Option('Outros', 'Outros');

Aqui segue o meu código completo do formulário onde está a combo dinamica e tb o javascript:

http://pastebin.com/sCYfqeHe

For Each item In Request.Form  
Response.Write item & ": " & Request.Form(item)
Next

Martinsrj · Abril 22, 2010

Galera consegui resolver a situação!

Abraços.

xanburzum · Abril 22, 2010

parabéns, qualquer coisa posta ae....

Arquivado

[Resolvido] Resgatando campos criados dinamicamente...

Recommended Posts

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

AndreRO 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante