Agregar Fila de campos al cliquear boton

[chalchis]

yo tomo como referencia a unos de los campos
$size_lista=count($_POST['modelo'])

despues de hacer submit en la pagina donde recibe
ya empiezo a recorrer
//digamos que esos son tus campos

for ($i=0;$i<$size_lista;$i++)
{
echo $_POST['cant']."<br>";
echo $_POST['tipo']."<br>";
echo $_POST['modelo']."<br>";
}

pero como dije recuerda poner en los names de los objetos
name="nombre[]"

[Tarecito]

yo hago lo mismo pero para asp, cómo seria el código para enviar los datos en la página de grabación??

[chalchis]

for ($i=0;$i<$size_lista;$i++)
{
//pones tu codigo de insertar

}

[Lybanny]

hola!

Bueno yo estoy tratando de hacer algo similar a la propuesta original, de por medio de javascript agregar filas dinamicas a una tabla por medio de un botón y me funciona muy bien (grax a Javier B y adaptaciones de k-seraph)... yo lo estoy manejando por medio de "textarea" ...me gustaría además hacer otras cosas como por ejemplo centrar el boton de agregar... ya que inicialmente lo tengo alineado pero cuando el numero de filas crece se desplaza el boton a la derecha perdiendo su alineacion.
Además me gustaría pasar los valores a un campo oculto ... ya que deseo manipularlos en otro formulario.php por medio del método POST ...

muchas gracias de antemano.. XD

aqui esta mi codigo:

en java script

<script language="javascript" type="text/javascript">
<!--
var n = 0
function add() {
act_apr = document.getElementById('tabla')
n++
fila = document.createElement('tr')
celda = document.createElement('td')
fila.appendChild(celda)
txt_a = document.createElement('textarea')
txt_a.cols='34'
txt_a.name='act_fac'+n
celda.appendChild(txt_a)

celda = document.createElement('td')
fila.appendChild(celda)
txt_a = document.createElement('textarea')
txt_a.cols = '34'
txt_a.name = 'act_par' + n
celda.appendChild(txt_a)

celda = document.createElement('td')
fila.appendChild(celda)
txt_a = document.createElement('textarea')
txt_a.name = 'prod_ap'+n
txt_a.cols = '34'
celda.appendChild(txt_a)

act_apr.appendChild(fila)
}
-->
</script>

en php

<form>
<div align="center">
<input name="agregar" type="button" value="Agregar Actividad" onclick="add()" />
</div>
</form>

[Lybanny]

Hola! me respondo yo solita! :P
ya puede mandar los datos a otro formulario.php
lo hice de la siguiente forma
...
en el formulario donde tengo la súper tabla dinámica va lo siguiente en el form:

<form action="instrumentacion_didactica2.php"method="pos t" name="actividades_aprendizaje" id="actividades_aprendizaje" onSubmit="return valida('<?php echo $accion;?>')">

puse un boton "Registrar Datos" con el siguiente código:

<input type="submit" name="aceptar" value="Registrar Datos" class="boton" onclick="document.actividades_aprendizaje.submit() ;" />

y luego en javascript la funcion es la siguiente:

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

function valida(accion)
{
f = document.actividades_aprendizaje
enviar('instrumentacion_didactica_bd.php', 'actividades_aprendizaje')
}
-->

PD... sigo batallando con la alineación ... Agradecería su ayuda-

[chalchis]

Iniciado por miglos

Cierto, pense que aqui venia lo del envio de los datos, pero claro, su nombre lo dice validar!!
Lo que queria era ver como tomabas los valores seleccionados, lo que yo estoy haciendo es seleccionar los valores de 2 selects y un textbox, donde indico la cantidad de cada producto

ejemplo
======
[cant]---[tipo]--------[modelo] [+] (el boton "+" me agrega una nueva fila)
---3 ----pin pad-------SC552
---2-----POS ---------SP152
---1-----printer -------P-350

luego, al hacer submit, deseo guardar esos valores a una base de datos.
Entonces me falta guardar los valores ingresados.
Te agradezco nuevamente!!!

mm recuerda que cuando creas esos campos de manera dinamica
esos datos cada uno ya lleva un index de un posible array que vayas a crear
es decir:

---3 ----pin pad-------SC552

aqui en esta fila ya se genera un indice del input text donde ingresaste el 3
y luego se genera el indice del campo tipo(supongo que ahi es un select), y tambien se genera el array del csmpo modelo(supongo que ahi es un select) osea de esos objetos ya tienes el indice 0 de cada uno, al ir agregando se incrementa el arrar de cada uno

como se veria de manera imaginaria
asi:
indice[0]----indice[0]---indice[0]
indice[1]----indice[1]---indice[1]
indice[2]----indice[2]---indice[3]

---2-----POS ---------SP152
---1-----printer -------P-350


como los recibes bueno yo lo hice asi:

por cada fila que se agregaba puse un input oculto el cual indica la posion del array es decir la fila 1 pertenece solo a los array del indice cero y asi sucesivamente

ok bueno hice un ciclo
$size_lista=count($_POST['posicion']);//es el campo oculto esto me indica cuantos registros se ingresaron

for ($i=0;$i<$size_lista;$i++)
{
//aqui vas accediendo a cada registro empezemos con los indices 0
echo trim($_POST['cant'][$i]);
echo trim($_POST['tipo'][$i]);
echo trim($_POST['modelo'][$i]);

}


espero me explique ya que escribirlo se me dificulta jeje
saludos

[pcarvajal]

Hola,
Estuve mirando el codigo he tratado de adaptarlo un poquito según mis necesidades. En vez de un segundo input he puesto un botón para eliminar la fila correspondiente, aunque no me funciona este es mi codigo :

<script>
var n=0;
function add() {
pepe = document.getElementById('tabla');
n++;
fila = document.createElement('tr');

celda = document.createElement('td');
fila.appendChild(celda);
code=document.createElement('input');
code.type='text';
code.name='cod_'+n;
code.size='50';
code.maxlength='100';
celda.appendChild(code);

celda = document.createElement('td');
fila.appendChild(celda);
cant=document.createElement('input');
cant.type='button';
cant.value='X'
cant.name='borrafila_'+n;
cant['onclick'] = function() {return del(cant.name)};
celda.appendChild(cant);
pepe.appendChild(fila);
}

function del(name){
alert (cant.name);
document.all.tabla.deleteRow(name);
}
</script>

He logrado eliminar filas, pero solo lo hace siempre con la primera, como podría hacerlo para borrar la fila correspondiente?

[chalchis]

Iniciado por pcarvajal

Hola,
Estuve mirando el codigo he tratado de adaptarlo un poquito según mis necesidades. En vez de un segundo input he puesto un botón para eliminar la fila correspondiente, aunque no me funciona este es mi codigo :



He logrado eliminar filas, pero solo lo hace siempre con la primera, como podría hacerlo para borrar la fila correspondiente?

mm habria que ver donde lo pones porque mira
en cada contenedor que es la tabla que se crea dinamicamente creo un id para cada una de ellas

var tabla = document.createElement("table");
tabla.border="0";
tabla.width="434";
tabla.cellPadding="1";
tabla.cellSpacing="0";
tabla.id="borrado"+c; //id de la tabla

esta la funcion para borrar

function borraNodo(id)
{
//alert(id);
yo=document.getElementById(id);
yo.parentNode.removeChild(yo);

}

http://chalchis.webcindario.com/Scripts/formulario.htm

[pcarvajal]

uf, al fin, despues de tanto intentarlo, finalmente dí con el código. Aquí se los dejo por si a alguien le puede servir:
(crea una tabla dinamica que contiene un input y además un botón de borrar el elemento creado)

Código:

<script> 
var n=0; 
function add() { 
  n++;  
  pepe = document.getElementById('tabla');  
  fila = document.createElement('tr');    
  fila.id='contenedor'+n;  
  celda = document.createElement('td'); 
  fila.appendChild(celda); 
  
  code=document.createElement('input'); 
  code.type='text'; 
  code.name='alternativa_'+n; 
  code.id='alternativa_'+n;   
  code.size='50'; 
  code.maxlength='100';
  celda.appendChild(code); 
   
  celda = document.createElement('td'); 
  fila.appendChild(celda);       
  cant=document.createElement('input'); 
  cant.type='button'; 
  cant.value='X';
  cant.onclick = function() {del(this.parentNode.parentNode.rowIndex)};    
  celda.appendChild(cant); 
  pepe.appendChild(fila); 

  document.getElementById('cuantos').value = n;
} 

function del(obj){
    document.getElementById('tabla').deleteRow(obj)
    n--;
    document.getElementById('cuantos').value = (document.getElementById('cuantos').value-1);        
}
</script> 

<input type="text" name="cuantos" value="0" size="3" readonly>&nbsp;<input type="button" value=" AGREGAR+ " onclick="add()">
<table border="1"> 
<tbody id="tabla"> 
</tbody> 
</table>

Saludos!

[chalchis]

felicidades

[leophp]

funciona bine todo, pero como le doy formato a la tabla ?

lo hice de esta forma pero no me toma

pepe.border='0';
pepe.cellspacing='2';
pepe.cellpadding='2';

[Alex0520]

Hola, revivo este foro, ya que m surgio un problema con el codigo, usando el codigo aqui expuesto, tengo un boton que me agrega una fila de campos, al hacer el submit, en IE me envia todos los campos, pero en firefox, es como si nunk los hubiera agregado...

A que se debe esto? ojala m puedan ayudar...

[pcarvajal]

Tarde pero no importa...

leo, el estilo se hace directamente en la etqueta html, vale decir:

Código HTML:

<table border="1" style="aqui_le_das_los_estilos"> 

o bien en un css, ahi tu ves.

Alex, podrías postear el codigo que usas para verlo?

Saludos!

[Alex0520]

Hola, este es el codigo de la función add()

Código Javascript:

function add() { 
  tabla = document.getElementById('productos'); 
  n++; 
  document.getElementById('numfilas').value=n;
  document.getElementById('aceptar').style.display="block";
  fila = document.createElement('tr'); 
  
var actual=n;
  celda = document.createElement('td'); 
  fila.appendChild(celda); 
  code=document.createElement('input'); 
  code.type='text'; 
  code.name='cod_'+n;
  code.id='cod_'+n;
  code.size='5';
  code.maxLength='4';
  //code.onchange = function() {MostrarConsultaProducto('consulta2.php?id='+document.getElementById('cod_'+actual).value,'desc_'+actual,"emb_"+actual,"vund_"+actual,actual);};
  //code.onkeydown = function() {key('consulta2.php','cod_'+actual,'desc_'+actual,"emb_"+actual,"vund_"+actual,actual);};
  funcion='return key(event,"consulta2.php","cod_'+actual+'","desc_'+actual+'","emb_'+actual+'","vund_'+actual+'",'+actual+');';
  code.setAttribute('onKeyDown', funcion); 
 
  //code.onkeyup = function() {key('consulta2.php','cod_'+actual,'desc_'+actual);pasarEnter(this.id);};
  celda.appendChild(code); 
   
  celda = document.createElement('td'); 
  fila.appendChild(celda);       
  desc=document.createElement('input'); 
  desc.type='text'; 
  desc.name='desc_'+n;
  desc.id='desc_'+n;
  desc.readOnly=true;
  desc.setAttribute('onKeyDown', 'return pasarEnter(this.id,event);');
  //desc.onkeypress =  function() {return pasarEnter(this.id,event);};
  celda.appendChild(desc); 
  
  celda = document.createElement('td'); 
  fila.appendChild(celda);       
  emb=document.createElement('input'); 
  emb.type='text'; 
  emb.name='emb_'+n;
  emb.id='emb_'+n;  
  emb.readOnly=true;
  emb.size='6';
  emb.maxLength='5';
  emb.setAttribute('onKeyDown', 'return pasarEnter(this.id,event);');
  celda.appendChild(emb); 
  
  celda = document.createElement('td'); 
  fila.appendChild(celda);       
  caj=document.createElement('input'); 
  caj.type='text'; 
  caj.name='caj_'+n;
  caj.id='caj_'+n;
  caj.size='4';
  caj.maxLength='4';
  //caj.onchange = function() {calculo(this.id,actual)};
  caj.setAttribute('onKeyDown', 'if(esValido(event)){calculo(this.id,'+actual+')};')
  //caj.onkeyup =  function() {if(esValido(event)){calculo(this.id,actual)};};
  celda.appendChild(caj); 
  
  celda = document.createElement('td'); 
  fila.appendChild(celda);       
  und=document.createElement('input'); 
  und.type='text'; 
  und.name='und_'+n;
  und.id='und_'+n; 
  und.size='5';
  und.maxLength='3';
  //und.onchange = function() {calculo(this.id,actual)};
  und.setAttribute('onKeyDown', 'if(esValido(event)){calculo(this.id,'+actual+')};')
  celda.appendChild(und);
  
  celda = document.createElement('td'); 
  fila.appendChild(celda);       
  vund=document.createElement('input'); 
  vund.type='text'; 
  vund.name='vund_'+n; 
  vund.id='vund_'+n;
  vund.size='7';
  vund.readOnly=true;
  vund.setAttribute('onKeyDown', 'if(esValido(event)){calculo(this.id,'+actual+')};') 
  celda.appendChild(vund);  
  
  celda = document.createElement('td'); 
  fila.appendChild(celda);       
  des=document.createElement('input'); 
  des.type='text'; 
  des.name='des_'+n; 
  des.id='des_'+n;
  des.size='4';
  des.maxLength='2';
  //des.onchange = function() {calculo(this.id,actual)};
  des.setAttribute('onKeyDown', 'if(esValido(event)){calculo(this.id,'+actual+')};');
  //des.setAttribute('onBlur', 'calculo(this.id,'+actual+');');
  //des.onblur=  function() {if(window.event){tecla = event.keyCode;}else if(event.which){tecla = event.which;}if(tecla=='13'){calculo(this.id,actual)};}; 
  celda.appendChild(des); 
  
  celda = document.createElement('td'); 
  fila.appendChild(celda);       
  des2=document.createElement('input'); 
  des2.type='text'; 
  des2.name='des2_'+n;
  des2.id='des2_'+n; 
  des2.size='4';
  des2.maxlength='2';
  //des2.onchange = function() {calculo(this.id,actual)};
  des2.setAttribute('onKeyDown', 'if(esValido(event)){calculo(this.id,'+actual+')};') 
  celda.appendChild(des2); 
  
  celda = document.createElement('td'); 
  fila.appendChild(celda);       
  iva=document.createElement('input'); 
  iva.type='text'; 
  iva.name='iva_'+n; 
  iva.id='iva_'+n;
  iva.size='4';
  iva.maxLength='2';
  //iva.onchange = function() {calculo(this.id,actual)};
  iva.setAttribute('onKeyDown', 'if(esValido(event)){calculo(this.id,'+actual+')};') 
  celda.appendChild(iva);
  
  celda = document.createElement('td'); 
  fila.appendChild(celda);       
  total=document.createElement('input'); 
  total.type='text'; 
  total.name='total_'+n;
  total.id='total_'+n;
  total.readOnly=true;
  total.size='11';
  total.setAttribute('style', 'text-align: right;');
  celda.appendChild(total);  
  
  tabla.appendChild(fila); 
  document.getElementById("cod_"+n).focus();
}
 

Con ella agrego los campos, pero en firefox es como si no los agregara, ya que al hacer el submit, los valores ingresados en esos campos no son enviados...

[chalchis]

solo como nota con jquery puede que ya sea mas sencillo amigos
eh aqui un ejmplo saludos

http://www.miguelmanchego.com/2009/a...o-ajax-jquery/

saludos

[chalchis]

otro ejemplo usando jquery

http://www.miguelmanchego.com/2010/a...-ajax-parte-2/

saludos

[Alex0520]

Si, pss obviamente es mas facil, el problema es q en micaso agrego 10 campos a la vez cada uno con funciones especificas, es muy complicado...

[Alex0520]

Alguien me podria ayudar¿¿

[gcombariza]

Hola tengo soy nuevo en php y no digamos en javascript el asunto es que tengo una tabla dinamica dentro de un formulario html; que añade varios campos al dar click en el botón utilizando javascript. Ahorá bien quiero enviar esas filas generadas con sus datos a traves de email; utilizando email.php externo.

El problema es que cuando envio el mensaje llega en blanco al correo receptor, necesito ayuda porfavor para saber como se hace para enviar los datos de la tabla generados porfavor.....

pleaseeee



Envio el código:

///codigo html///

<html>
<head>
<title>Inscripción</title>
<script type="text/javascript">

function AddRow ()
{
var o_txt0 = document.createTextNode (document.getElementById ("01Bno").value);
var o_txt1 = document.createTextNode (document.getElementById ("01Type").value);
var o_txt2 = document.createTextNode (document.getElementById ("01Class").value);
var o_txt3 = document.createTextNode (document.getElementById ("01area").value);

var o_button = document.createElement ("input");
o_button.type = "button";
o_button.value = "Remove";
o_button.onclick = RemoveRow;
var o_td0 = document.createElement ("td");
var o_td1 = document.createElement ("td");
var o_td2 = document.createElement ("td");
var o_td3 = document.createElement ("td");
var o_td4 = document.createElement ("td");

var o_tr = document.createElement ("tr");
var o_body = document.getElementById ("dynamic_table_body");

o_td0.appendChild (o_txt0);
o_td1.appendChild (o_txt1);
o_td2.appendChild (o_txt2);
o_td3.appendChild (o_txt3);
o_td4.appendChild (o_button);

o_tr.appendChild (o_td0);
o_tr.appendChild (o_td1);
o_tr.appendChild (o_td2);
o_tr.appendChild (o_td3);
o_tr.appendChild (o_td4);

// document.form1.01Bno.value = document.form1.01Bno.value + 1;

o_body.appendChild (o_tr);
}
function RemoveRow ()
{
var dinosaur = this.parentNode.parentNode;
dinosaur.parentNode.removeChild (dinosaur); //
}
</script></head>
<body style="font-family: Arial">
<form id="form1" name="form1" method="post" action="email.php">
</p>
<br>
<table border="1" cellpadding="0" cellspacing="0">
<tbody id="dynamic_table_body"><tr>
<td width="107" height="102"><div align="center"><strong>Nombre</strong></div></td>
<td width="83"><div align="center"><strong>Teléfono</strong></div></td>
<td width="87"><div align="center"><strong>e-mail</strong></div></td>
<td width="129"><div align="center"><strong>&Aacute;rea a Inscribir</strong></div></td>
<td width="295">
<table width="295" cellpadding="0">
<tr>
<td width="134">Nombre y Apellido</td>
<td width="153"><input name="01Bno" type="text" id="01Bno" size="19"></td>
</tr>
<tr>
<td>Tel&eacute;fono</td>
<td><input name="01Type" type="text" id="01Type" size="19"></td>
</tr>
<tr>
<td>e-mail</td>
<td><input name="01Class" type="text" id="01Class" size="25"> </td>
</tr>
<tr>
<td>&Aacute;rea a Inscribir</td>
<td><select name="01area" id="01area">
<option name= "01area[]" value="Congreso" selected>Congreso</option>
<option name= "01area[]" value="Damas">Damas</option>
<option name= "01area[]" value="Congresito">Congresito</option>
</select></td>
</tr>
<tr>
<td colspan="2"><button type="button" onClick="AddRow ();">A&ntilde;adir Inscripci&oacute;n</button></td>
</tr>
</table> </td>
</tr>
</tbody>
</table>
<p>
<label>
<input type="reset" name="clear" id="clear" value="Clear" />
<input type="submit" name="create" id="create" value="Submit" />
</label>
</p>
</form>
</body>
</html>

////php///

///tiene algunas variables y de checkbox que no funcionan ni aplican porque había hecho otro formulario que tampoco me funcionó.

<?php
if(isset($_POST['submit'])) {
echo "Has elegido:<br/>";
foreach($_POST['01area'] as $salida) {
echo "$salida<br>";
}
}
else echo "<p>No haz Elegido ninguna Opción</p>";


if($_POST['01area'])
{
echo array_sum($_POST['01area']);
};
?>
<strong>Total </strong>
<p></p>
<?php
if(isset($_POST['submit'])) {


$to = "[email protected]";
$subject = "Informacion Congreso";
$name = $_POST['01Bno'];
$email = $_POST['01Type'];
$phone = $_POST['01Class'];
$area = $_POST['01area'];
$message .= "

De: $name
E-Mail: $email
Telefono: $phone
Area Inscrita: $area

____________________________________


";


foreach($_POST['01area'] as $value) {

$check_msg .= "Costo: $value\n";

}

$body = "From: $name\n $area\n E-Mail: $email\n Message:\n $message\n $check_msg";

echo $message2 .= "

Gracias por enviar el mensaje: $sub.\n

Para tu referencia, se han realizado las inscripciónes respectivas.\n

Tu Inscripcion es de:

$check_msg



";
mail($to, $subject, $body);


} else {

echo "blarg!";

}


?>


<div id="contactform">
<table width="635" border="0" align="left">
<tr>
<td width="519"> <h2 class="Estilo1">Bendiciones!</h2></td>
<td width="100"><div align="right">
<p align="center" class="Estilo1" style='text-align:justify'>&nbsp;</p>
</div></td>
</tr>
<tr>
<td><p>Bienvenido al Congreso Mundial, Tu dirección de Correo para confirmación es: </p>
<p><?php print $email; ?></p>

<p>Si no es correcto,

<script type='text/javascript'>

document.write('<a href="javascript:history.go(-1);">vuelve atras</a>');

</script>

<noscript>vuelve atras</noscript> y envialo de nuevo</p>
<p>
<script type='text/javascript'>

document.write('<a href="javascript:history.go(-1);">Click Aquí para volver atras</a>');

</script>
<span class="Estilo1">
<noscript>
<strong>Click Aquí</strong>
</noscript>
</span></p>
<script type='text/javascript'>

document.write('<p class="details"><a href="http://www.ileselshaddai.org">Volver a la página de inicio.</a></p>');

</script>

<script type='text/javascript'>

setTimeout('history.go(-2)', 9000);

</script>

<noscript>


</noscript>

<?php

$message = stripslashes($message);

$message2 = stripslashes($message2);

$message = strip_tags ($message);

$message2 = strip_tags ($message2);

// DIRECCION DE CORREO

mail("[email protected]", $sub, $message);

mail($email, $sub2, $message2, $headers2);

?></td>
<td>&nbsp;</td>
</tr>
</table>


<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


</div>

</body>

</html>



porfa ayuda!!!!!!!!

Tanks!!!

[chalchis]

has trato de mostrar en pantalla lo que deseas envia si es asi el problema no
es el proceso de que seleccionaste si probablemente en el proceso de envio del mail
tambien trata de ver el mail en dintintos clientes de mail igual en uno si llega y en otro
no llega bien


saludos