[SOLUCIONADO] Consulta Jquery para agregar campos a formulario

lisi1986 · #1 (**permalink**) 09/03/2014, 11:56

Hola a todos! les cuento que es lo que estoy intentando hacer, tengo un formulario donde quiero agregar articulos clickeando en un boton. Con Jquery logre realizar esto que les digo, cada vez que clickeo en el boton, se agrega una fila con los campos que debo completar.

Lo que se me esta complicando ahora, es como hacer para que a la hora de pasar a la siguiente pagina mediante POST pueda levantar las variables de todas las filas, se me ocurrio crear una variable que fuera incrementandose +1 cada vez que hago click y agregar este numero al final del nombre de cada campo, pero no se como hacerlo... Les copio el codigo para ver si pueden ayudarme. Espero que me hayan entendido... Muchas gracias a todos!!

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pagina de Busqueda</title>
<link href="estilo/estilo.css" media="screen" rel="StyleSheet" type="text/css">
    <script src="funciones/jquery.min.js"></script>
    <script type="text/javascript">
	        $(function()
		{ var i = 0
	    $("#agregarconcepto").click(function()
			{
				i = i +1;
				$("#filaarticulo").append("<tr><td>Articulo: <select><option>Flete Terrestre</option><option>Flete Maritimo</option></select></td><td colspan=3>Concepto  <input type='text'  name='txtconcepto' id='txtconcepto' /> </td><td>Cantidad  <input type='text' size=3  name='txtcantidad' id='txtcantidad' /> </td><td>Px. Unitario  <input type='text' size=10  name='txtpxunitario' id='txtpxunitario' /> </td><td>Px. Total  <input type='text' size=10  name='txtpxtotal' id='txtpxtotal' /> </td></tr>");
			});
		});
    </script>

</head>
      <body>

	    <div class="contenedor">
		  <form id="" name="" method="post" action="vervariables.php">
			<table width=100% border=1  id="filaarticulo">
			     <tr>
				    <td>
					    Articulo:
					  <select>
						<option>Flete Terrestre</option>
						<option>Flete Maritimo</option>	
					  </select>
				    </td>
				    <td colspan=3>
					  Concepto  <input type="text"  name="txtconcepto[]" id="txtconcepto[]" /> 
				    </td>
				    <td>
					  Cantidad  <input type="text" size=3  name="txtcantidad" id="txtcantidad" /> 
				    </td>
				    <td>
					  Px. Unitario  <input type="text" size=10  name="txtpxunitario" id="txtpxunitario" /> 
				    </td>
				    <td>
					  Px. Total  <input type="text" size=10  name="txtpxtotal" id="txtpxtotal" /> 
				    </td>
				    
			     </tr>
			</table>
			<table width=100% border=1>
			     <tr>
				    <td>
					  <input type="button" id="agregarconcepto" name="agregarconcepto" />
				    </td>
			     </tr>
			</table>
			<input type="submit">
		  </form>

	    </div>
      </body>
</html>

lisi1986 · #2 (**permalink**) 10/03/2014, 07:17

Algun alma caritativa? Se agradece!

hackjose · #3 (**permalink**) 10/03/2014, 09:03

Código Javascript:

Ver original$(function()
        { var i = 0;
        $("#agregarconcepto").click(function()
            {
                i = i +1;
                $("#filaarticulo").append("<tr><td>Articulo: <select name='select"+i+"'><option>Flete Terrestre</option><option>Flete Maritimo</option></select></td><td colspan=3>Concepto  <input type='text'  name='txtconcepto"+i+"' id='txtconcepto' /> </td><td>Cantidad  <input type='text' size=3  name='txtcantidad"+i+"' id='txtcantidad' /> </td><td>Px. Unitario  <input type='text' size=10  name='txtpxunitario"+i+"' id='txtpxunitario' /> </td><td>Px. Total  <input type='text' size=10  name='txtpxtotal"+i+"' id='txtpxtotal' /> </td></tr>");
            });
        });

Ya se van enumerando

Y como los elementos tr agregados estan dentro del form, pues se envian solo clickeando en submit

Ya solo en PHP recorres el arreglo $_POST

saludos

lisi1986 · #4 (**permalink**) 10/03/2014, 10:19

Mira que en ninguna parte concateno el nombre del elemento con la variable "i", se autonumeran por defecto armando un array?

Gracias!

hackjose · #5 (**permalink**) 10/03/2014, 10:45

Tienes que usar una variable i para acceder por nombre con $_POST

En javascript no es necesario, ya que puedes acceder con la matriz form.elements, pero en ese caso usarias ajax

saludos

lisi1986 · #6 (**permalink**) 10/03/2014, 11:11

Esa es mi consulta inicial @hackjose, como hago para concatenar al nombre de los campos el valor de la variable i en el codigo jquery para que al pasar por POST a la siguiente pagina lleguen con nombre diferentes (cambiado el numero final de cada nombre)

Gracias!

hackjose · #7 (**permalink**) 10/03/2014, 12:43

se concatenan con el operador de concatenacion +

El ejemplo que te puse ya concatena la variable i
Y los elementos que vas agregando van teniendo un nombre diferente

usalo y ve el codigo fuente para que veas que en efecto los nombres ya son diferentes

lisi1986 · #8 (**permalink**) 10/03/2014, 13:48

Excelente!! no habia visto que habias corregido mi codigo original!

Muchas gracias por la ayuda!!