Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Difurlan

inserir nova linha no form.

Por , em Javascript

Recommended Posts

Difurlan    0

Difurlan
Postado

Boa tarde amigos,

 

Estou fazendo um formulário simples, onde preciso cadastrar tres campos text: código, descrição e valor.

 

Estes campos estão dentro de uma table, para melhor organização.

 

Só que eu preciso viabilizar o cadastro de 'n' códigos, descrições e valores; de acordo com a necessidade do usuário, claro.

 

Eu pensei em um botão (button) onde o usuário possa clicar para aparecer uma nova linha na tabela, onde contenha novos campos (vazios) de código, descrição e valor.

 

E tantas vezes que o usuário clicar, será a quantidade de linhas novas inseridas nesta tabela.

 

Alguém tem algo semi-pronto ou alguma idéia de como fazer?

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Difurlan    0

Difurlan
Postado

Amigos, encontrei uma dica aqui no fórum que parece ser boa, estou tentando adaptar ao meu código, que ficou assim:

 

nota: O código precisa apenas inserir outras linhas abaixo da primeiro que já existe. E precisa ser um array, assim como a primeira está definida, pois preciso resgatar todos estes campos depois.

OBRIGADO!

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>::Protocolo</title>

<style type="text/css">
<!--
body {
 background-image: url(imgs/fundo.gif);
}
-->
</style></head>
<script language="javascript" type="text/javascript">

function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);

// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'txtRow' + iteration);
el.setAttribute('id', 'txtRow' + iteration);
el.setAttribute('size', '30');
el.onkeypress = keyPressTest;
cellRight.appendChild(el);

var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'txtRow' + iteration);
el.setAttribute('id', 'txtRow' + iteration);
el.setAttribute('size', '30');
el.onkeypress = keyPressTest;
cellRight.appendChild(el);

var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'txtRow' + iteration);
el.setAttribute('id', 'txtRow' + iteration);
el.setAttribute('size', '30');
el.onkeypress = keyPressTest;
cellRight.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('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
function openInNewWindow(frm)
{
// open a blank window
var aWindow = window.open('', 'TableAddRowNewWindow',
'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');

// set the target to the blank window
frm.target = 'TableAddRowNewWindow';

// submit
frm.submit();
}

</script>

<body>
<?
require("conect.php");

 
?>
<form name="form1" method="post" action="cadastro.php">
<table width="60%" border="1" cellspacing="0" cellpadding="0" align="center">
  <tr>
	<td width="10%">Pasta: </td>
	<td width="90%"><input name="tpasta" type="text" id="tpasta" size="7" maxlength="7"></td>
  </tr>
  <tr>
	<td colspan="2"><input type="submit" name="Ok" value="Pesquisar"> </td>
  </tr>  
</table>

</form> 

<?

if ($_POST)
{

require("conect.php");

$pasta=$_POST['tpasta'];
$sql = "select Cliente, ProtocoloInicial, NomeNat, Contrario, NomeCidade from FullProcesso where Codigo = '$pasta'";

$rsa = mssql_query($sql);

if ($rs=mssql_fetch_array($rsa))
{

?>

<table width="80%" border="1" cellspacing="0" cellpadding="0" align="center">
  <tr><td colspan="2" bgcolor="#000031"><div align="center"><img src="imgs/logotipo_beta2.jpg" width="595" height="112"></div></td>
  </tr>

  <tr bgcolor="#000039"><td colspan="2"><strong><font color="#FFFFFF">Dados da Pasta <? echo $pasta; ?></font></strong></td>
  </tr>
  <tr>
	<td width="14%">Cliente </td>
	<td width="86%"><input name="tcliente" type="text"  disabled="disabled" id="tcliente" value="<? echo $rs["Cliente"];?>" size="60"> </td>
  </tr>
  <tr>
	<td width="14%">Processo: </td>
	<td width="86%"><input name="tprocesso" type="text" disabled="disabled" id="tprocesso" value="<? echo $rs["ProtocoloInicial"]; ?>" size="24"></td>
  </tr>
  <tr>
	<td width="14%">Parte Contrária: </td>
	<td width="86%"><input name="tptecontraria" type="text" disabled="disabled" id="tptecontraria" value="<? echo $rs["Contrario"]; ?>" size="60"></td>
  </tr>

</table>
<br>
<table width="80%" border="1" cellspacing="0" cellpadding="0" align="center">
  <tr>
	<td>1 - Autenticações</td>
	<td>5 - Distância em KM</td>
	<td>9 - Hospedagem</td>
	<td>13 - Mat. Escritório</td>
  </tr>
  <tr>
	<td>2 - Firmas</td>
	<td>6 - Pedágio</td>
	<td>10 - Refeições</td>
	<td>14 - Certidão / Protesto</td>
  </tr>
  <tr>
	<td>3 - Custas</td>
	<td>7 - Condução</td>
	<td>11 - Correio</td>
	<td>15 - Estacionamento</td>
  </tr>
  <tr>
	<td>4 - Cópias</td>
	<td>8 - Passagens</td>
	<td>12 - Telefone</td>
	<td>16 - Outros</td>
  </tr>
</table> 
 <br>
<form name="form2" method="post" action="cadastro.php">
 
<table width="80%" border="1" cellspacing="0" cellpadding="0" align="center" id="tblSample">
  <tr>
   <td width="4%">Código</td>
   <td width="88%">Histórico</td>
   <td width="8%">Valor R$</td>
  </tr>
  <tr><td colspan="4" bgcolor="#000033" height="10"></td></tr>
   <tr>
   <td ><div align="center">
	 <input name="tcod[]" type="text" size="5" maxlength="2">
   </div></td>
   <td ><div align="center">
	 <input name="thistorico[]" type="text" size="71">
   </div></td>
   <td ><div align="left">
	 <input name="tvalor[]" type="text" size="9">
   </div></td>
  </tr> 
</table>

<table width="80%" border="1" cellspacing="0" cellpadding="0" align="center">
  <tr>
  <td>
   <input type="button" value="Adicionar" onclick="addRowToTable();" />
   <input type="button" value="Remover" onclick="removeRowFromTable();" /> 
  </td>
  </tr>
</table>
</form>

<?
}
else
{

}
?>

<br>


<?
}
?> 
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Difurlan    0

Difurlan
Postado

Fico muito agradecido com quem visitou a dúvida postada.

 

Descobri como fazer funcionar esse código em meu projeto. O que eu não estou conseguindo é resgatar um valor numérico, como por exemplo "13,40", através de um $_POST.

 

O código em Javascript é o seguinte:

 

-------

 

<script language="javascript" type="text/javascript">

function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);

// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'tcod[]' + iteration);
el.setAttribute('id', 'txtRow' + iteration);
el.setAttribute('size', '3');
el.onkeypress = keyPressTest;
cellRight.appendChild(el);

var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'thistorico[]' + iteration);
el.setAttribute('id', 'txtRow' + iteration);
el.setAttribute('size', '90');
el.onkeypress = keyPressTest;
cellRight.appendChild(el);

var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'tvalor[]' + iteration);
el.setAttribute('id', 'txtRow' + iteration);
el.setAttribute('size', '7');
el.onkeypress = keyPressTest;
cellRight.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('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2)
 tbl.deleteRow(lastRow - 1);
}
function openInNewWindow(frm)
{
// open a blank window
var aWindow = window.open('', 'TableAddRowNewWindow',
'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');

// set the target to the blank window
frm.target = 'TableAddRowNewWindow';

// submit
frm.submit();
}

</script>

-------

 

 

Repararam que o código gera tres campos text, um dele é o campo que recebe o valor.

 

ao invés de me retornar os '13,80' ou '13.80', ele me retorna '14'.

 

Agradeço a atenção.

 

Diogo.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito