crear campos de formulario de forma dinamica

SirZoX · #1 (**permalink**) 11/03/2008, 13:50

Bueno, finalmente lo que quise hacer en php lo consegui haciendolo en javascript, el caso es que ni aun asi consigo que funcione.

El problema que tengo ahora es el siguiente, cuando programo que al pulsar un boton se añadan campos nuevos, el script funciona y los agrega, el problema llega cuando uno de los campos es un campo desplegable que tiene que sacar las opciones de una consulta sql (que yo tengo hecha en php), por lo que parece, el codigo javascript cuando llega ahi, falla, y no añade linea, en embargo, si retiro el codigo php y dejo solo el java, funciona perfectamente y añade.

Alguien podria entonces darme alguna idea de como puedo solucionarlo?

os dejo el codigo completo para que lo veais mas claro.

Código:

<html>
<head>
<?

	mysql_connect('localhost','root','root') or die(mysql_error());
	mysql_select_db ('inelux');
	
	//Insertamos los diferentes registros del formulario
	if (isset($_POST["enviar"])){
		 foreach ($_POST["cantidad"] as $indice => $cantidad) {  
			   $cant=$_POST["cantidad"][$indice];
			   $prod=$_POST["producto"][$indice];
			   $prec=$_POST["precio"][$indice];
			   $query="INSERT INTO albaranes ('','','',now(),'','$cant','$prec','')";
			   mysql_query($query);          
		  }   
	}

	function mostrarProductos () {
		while ($res = mysql_fetch_array($c)) { ?>		
			<option value ='<? echo $res['producto']; ?>'><? echo $res['producto']; ?></option> <?
		}
	}


	$c = mysql_query ('select producto from almacen where 1 order by producto desc') or die(mysql_error());
?>

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

<title>Ejemplo formulario</title>
<script language="javascript" type="text/javascript">
var indiceFilaFormulario=1;
	function addLine(){
	
		 myNewRow = document.getElementById("tablaFormulario").insertRow(-1);
		 myNewRow.id=indiceFilaFormulario;
		 
		 myNewCell=myNewRow.insertCell(-1);
		 myNewCell.innerHTML="<td><input type='text' name='cantidad["+indiceFilaFormulario+"]' ></td>";
		 
		 myNewCell=myNewRow.insertCell(-1);
		 myNewCell.innerHTML="<td><select name='producto["+indiceFilaFormulario+"]'><? mostrarProductos(); ?></select></td>";
		
		 myNewCell=myNewRow.insertCell(-1);
		 myNewCell.innerHTML="<td><input  type='text' name='precio["+indiceFilaFormulario+"]'></td>";
		 
		 myNewCell=myNewRow.insertCell(-1);
		 myNewCell.innerHTML="<td><input type='button'  value='Eliminar' onclick='removeLine(this)'></td>";
		 
		 indiceFilaFormulario++;
	}
	 
	function removeLine(obj){
		 var oTr = obj;
		 while(oTr.nodeName.toLowerCase()!='tr'){
			  oTr=oTr.parentNode;
		 }
		 var root = oTr.parentNode;
		 root.removeChild(oTr);
	}
</script>
</head>
<body>
 <form action="<? echo $PHP_SELF; ?>" name="formulario" method="post">
<table cellpadding="0" cellspacing="0" >
      <tr>
        <td align="center">&nbsp;</td>
      </tr>
      <tr>
        <td><table cellpadding='3' cellspacing='3' style='border:#999999' id="tablaFormulario">
            <tr bgColor='#CCCCCC'>
              <td width="175">Cantidad</td>
              <td width="175">Producto</td>
              <td width="175">Precio</td>
              <td width="100">Eliminar</td>
            </tr>
          </table></td>
      </tr>
      <tr>
        <td align="right"><input type="button" onClick="addLine()" value="A&ntilde;adir l&iacute;nea" ></td>
      </tr>
      <tr>
      <td align="center"><input type="submit" name="enviar" value=":: A&ntilde;adir albar&aacute;n :: "></td>
      </tr>
    </table>
    </form>
</body>
</html>

darioc · #2 (**permalink**) 11/03/2008, 14:15

hola SirZoX,
hay varias cosas que no estás haciendo adecuadamente.

1.
lo primero que debes recordar es que javascript se ejecuta en el cliente y php en el servidor, por lo que javascript nunca puede ejecutar código php (a menos que uses ajax, pero eso se hace de manera distinta).

2.
por otra parte, la función addLine() aunque tiene sentido argumental, tiene errores de sintaxis que debes arreglar.

Código:

myNewRow = document.getElementById("tablaFormulario").insertRow(index);
myNewRow.rowIndex=indiceFilaFormulario; //ya lo tenías con index
		 
myNewCell=myNewRow.insertCell(index);
myNewCell.innerHTML="<input type='text' name='cantidad["+indiceFilaFormulario+"]' >";

refiriéndose index como el número consecutivo o siguiente. para el caso de inserción de fila o <tr>, puedes obtener la próxima fila con:

Código:

document.getElementById("tablaFormulario").rows.length

aunque para el caso de las columnas o <td> es básico porque lo colocas tú.

3.
tercero, no coloques la etiqueta <td> en el innerHTML de la columna, porque estarás haciendo un doble <td>, debe quedar así:

Código:

myNewCell.innerHTML="<input  type='text' name='precio["+indiceFilaFormulario+"]'>";

4.
finalmente, la función de llenado del <select> debe devolver un string:

Código PHP:

  function mostrarProductos ()  
{ 
   while ($res = mysql_fetch_array($c))  
   {  
   $select.= "<option value ='".$res['producto']."'>".=$res['producto'] ."</option>";  
   } 
   return $select; 
}

toma la direccion de esta pagina que me sirvió mucho al comienzo:
http://www.w3schools.com/htmldom/dom_obj_tablerow.asp

y saludos!

SirZoX · #3 (**permalink**) 11/03/2008, 16:31

Hola darioc, gracias por el esfuerzo en explicar los cambios necesarios y por las aclaraciones entre php y javascript.

he estado probando con las variaciones que me has comentado, pero sigue sin funcionarme, sigue sin añadir lineas, aparte que sigue saliendo error de php al insertar con el foreach, pero eso ya lo arreglare mas adelante, por ahora necesito que me muestre las nuevas lineas al pulsar.

te vuelvo a pegar el codigo tal y como lo he dejado despues de probar con tus cambios y a ver si tu o alguien que se deje caer por aqui puede arrojarme algo mas de luz.

Código:

<html>
<head>
<?

	mysql_connect('localhost','root','root') or die(mysql_error());
	mysql_select_db ('inelux');
	
	//Insertamos los diferentes registros del formulario
	if (isset($_POST["enviar"])){
		 foreach ($_POST["cantidad"] as $indice => $cantidad) {  
			   $cant=$_POST["cantidad"][$indice];
			   $prod=$_POST["producto"][$indice];
			   $prec=$_POST["precio"][$indice];
			   $query="INSERT INTO albaranes ('','','',now(),'','$cant','$prec','')";
			   mysql_query($query);          
		  }   
	}

	function mostrarProductos () {
	   while ($res = mysql_fetch_array($c)) { 
		   $select = "<option value ='".$res['producto']."'>".$res['producto'] ."</option>"; 
	   }
	   return $select;
	}

	$c = mysql_query ('select producto from almacen where 1 order by producto desc') or die(mysql_error());
?>

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

<title>Ejemplo formulario</title>
<script language="javascript" type="text/javascript">
var indiceFilaFormulario=1;
	function addLine(){
	
		 myNewRow = document.getElementById("tablaFormulario").insertRow(index);
		 myNewRow.rowIndex=indiceFilaFormulario; //ya lo tenías con index		 
		 
		 myNewCell=myNewRow.insertCell(index);
		 myNewCell.innerHTML="<input type='text' name='cantidad["+indiceFilaFormulario+"]' >";
		 
		 myNewCell=myNewRow.insertCell(index);
		 myNewCell.innerHTML="<select name='producto["+indiceFilaFormulario+"]'><? mostrarProductos(); ?></select>";
		
		 myNewCell=myNewRow.insertCell(index);
		 myNewCell.innerHTML="<input  type='text' name='precio["+indiceFilaFormulario+"]'>";
		 
		 myNewCell=myNewRow.insertCell(index);
		 myNewCell.innerHTML="<input type='button'  value='Eliminar' onclick='removeLine(this)'>";
		 
		 indiceFilaFormulario++;
	}
	 
	function removeLine(obj){
		 var oTr = obj;
		 while(oTr.nodeName.toLowerCase()!='tr'){
			  oTr=oTr.parentNode;
		 }
		 var root = oTr.parentNode;
		 root.removeChild(oTr);
	}
</script>
</head>
<body>
 <form action="<? echo $PHP_SELF; ?>" name="formulario" method="post">
<table cellpadding="0" cellspacing="0" >
      <tr>
        <td align="center">&nbsp;</td>
      </tr>
      <tr>
        <td><table cellpadding='3' cellspacing='3' style='border:#999999' id="tablaFormulario">
            <tr bgColor='#CCCCCC'>
              <td width="175">Cantidad</td>
              <td width="175">Producto</td>
              <td width="175">Precio</td>
              <td width="100">Eliminar</td>
            </tr>
          </table></td>
      </tr>
      <tr>
        <td align="right"><input type="button" onClick="addLine()" value="A&ntilde;adir l&iacute;nea" ></td>
      </tr>
      <tr>
      <td align="center"><input type="submit" name="enviar" value=":: A&ntilde;adir albar&aacute;n :: "></td>
      </tr>
    </table>
    </form>
</body>
</html>