LOGIN
Reg&iuacute;strateLinksForosPrivadosPrivadosContacta
 
FOROS > Programación
< 1 [2] 3 4 5 > >>    Crear los campos de un formulario dinámicamente con javascr ...
07/11/2007    15:04


Registrado: 14/04/2004
Nº mensajes: 491
  Living QuotePrivado  
 

El problema es que los parentNodes del botón eliminar no son los mismos en Firefox que en Explorer  . He modificado el código en el post para que funcione en los dos navegadores. Copialo entero de nuevo y debería funcionarte.

Un saludo

  
 

El mayor placer de un hombre inteligente es aparentar ser idiota, delante de un idiota que aparenta ser inteligente.



  
07/11/2007    16:46

 
Registrado: 07/11/2007
Nº mensajes: 5
  leo_25 QuotePrivado  
 
muchas gracias Living. mira tengo el siguiente escript hice las correcciones para eliminar todo va de maravillas.

<html>
<head>
<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 addPerson(id){
 myNewRow = document.getElementById(id).insertRow(-1);
 myNewRow.id=indiceFilaFormulario;
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td><input style='width: 25px;'type='text' disabled='disabled' id='item["+indiceFilaFormulario+"]' name='item["+indiceFilaFormulario+"]' /></td>";
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td> <input style='width: 20px;' type='text' disabled id='alt["+indiceFilaFormulario+"]' name='alt["+indiceFilaFormulario+"]' /></td>";
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td><input  style='width: 20px;' type='text' id='cant["+indiceFilaFormulario+"]' name='cant["+indiceFilaFormulario+"]'/></td>";
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td><input style='width: 25px;' type='text' id='unid["+indiceFilaFormulario+"]'name='unid["+indiceFilaFormulario+"]'/></td>";
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td><textarea rows='1' cols='20'name='descripcion["+indiceFilaFormulario+"]' name='descripcion["+indiceFilaFormulario+"]' />";
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td><input style='width: 80px;' type='text' id='marca["+indiceFilaFormulario+"]' name='marca["+indiceFilaFormulario+"]'></td>";
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td><input style='width: 50px;' type='text' id='prec_unit["+indiceFilaFormulario+"]' name='prec_unit["+indiceFilaFormulario+"]'></td>";
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td><input style='width: 50px;' type='text' disabled id='costototal["+indiceFilaFormulario+"]' name='costototal["+indiceFilaFormulario+"]'></td>";
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td><input type='button'  value='Quitar' onclick='removePerson(this)'></td>";
 
 indiceFilaFormulario++;
}
function totalItem(total,cantidad,pre_unit)
{
    document.getElementById(total).value=cantidad*document.getElementById(pre_unit).value
}
function removePerson(obj){
 var oTr = obj;
 while(oTr.nodeName.toLowerCase()!='tr'){
  oTr=oTr.parentNode;
 }
 var root = oTr.parentNode;
 root.removeChild(oTr);
}
</script>
</head>
<body>

<form name="formulario" action="pruebainput.php"  method="POST">
<table cellpadding='2' cellspacing='2' >
           <!-- <tr>
                <td align="center">&nbsp;</td>
            </tr>-->
     <!-- <tr>
        <td>--><table cellpadding='3' cellspacing='3'   id="tabla">
                <tr style='background-color:#C5E3EE;font-size:10px;text-align:center;'>
                    <th>Item</th>
                    <th>Alt.</th>
                    <th>Cant</th>
                    <th>Unid</th>
                    <th>Descripción</th>
                    <th>Marca</th>
                    <th>Prec/unid</th>
                    <th>Costo Total</th>
                </tr>
                </table>
                <table id="1">
                <tr>
                <td>1</td>
                <td>0</td>
                <td>3</td>
                <td>C/U</td>
                <td>Descripcion 1.</td>
                <td>
                <input id="marca1" class="inputcotiza1" style='width: 80px;' type="text" onchange="totalItem('costo_tot1','3','prec_unit1')" name="marca1"/>
                </td>
                <td>
                <input id="prec_unit1" class="inputcotiza2" style='width: 50px;' type="text" onchange="totalItem('costo_tot1','3','prec_unit1')" name="prec_unit1"/>
                </td>
                <td>
                <input id="costo_tot1" class="inputcotiza2" style='width: 50px;' type="text" disabled="" name="costo_tot1"/>
                </td>
                <td>
                <!--<a class="" onclick="agregarItem()">
                <b>Añadir</b>
                </a>-->
                <input type="button" onClick="addPerson('1')" value="Añadir" >
                </td>
             </tr>
             </table>
             <table id="2">
             <tr>
                <td>1</td>
                <td>0</td>
                <td>3</td>
                <td>C/U</td>
                <td>Descripcion 1.</td>
                <td>
                <input id="marca1" class="inputcotiza1" style='width: 80px;' type="text" onchange="totalItem('costo_tot1','3','prec_unit1')" name="marca1"/>
                </td>
                <td>
                <input id="prec_unit1" class="inputcotiza2" style='width: 50px;' type="text" onchange="totalItem('costo_tot1','3','prec_unit1')" name="prec_unit1"/>
                </td>
                <td>
                <input id="costo_tot1" class="inputcotiza2" style='width: 50px;' type="text" disabled="" name="costo_tot1"/>
                </td>
                <td>
                <!--<a class="" onclick="agregarItem()">
                <b>Añadir</b>
                </a>-->
                <input type="button" onClick="addPerson('2')" value="Añadir" >
                </td>
             </tr>
          <!--</table></td>
      </tr>-->
   
        <tr>
        <td align="right"></td>
        </tr>
     </table>
     <table>
      <tr>
      <td align="center"><input  type="submit" name="enviar" value="Enviar"></td>
      </tr>
    </table>
    </form>
</body>
</html>

y este es es script php, y no me trae los datos del formulario me podrias dar una manito. y ademas como haria para pasar los valores de item 1 (descripcion) al nuevo input generado dinamicamente y tambien poder usar la funcion onchange="totalItem('costo_tot1','3','prec_unit1')" dentro de los inputs nuevos que genere
muchas gracias

<?

//Insertamos los diferentes registros del formulario
if (isset($_POST["item"])){
     foreach ($_POST["item"] as $indice => $item) { 
        echo "item".$item; 
         echo "alt".$alt=$_POST["alt"][$indice];
          echo "cant".$cant=$_POST["cant"][$indice];
          echo "unid".$unid=$_POST["unid"][$indice];
          echo $descripcion=$_POST["descripcion"][$indice];
          echo $marca=$_POST["marca"][$indice];
          echo $prec_unit=$_POST["prec_unit"][$indice];
          echo $query="INSERT INTO tabla (item,alt,cant,unid,desc,marca,prec_unit) VALUES ('$item','$alt','$cant','$unid','$marca','$prec_unit')";
           mysql_query($query);         
      }  
 }
?>







  
 

leotrux

 
07/11/2007    20:22


Registrado: 14/04/2004
Nº mensajes: 491
  Living QuotePrivado  
 
Me alegro mucho
 
 

El mayor placer de un hombre inteligente es aparentar ser idiota, delante de un idiota que aparenta ser inteligente.



  
12/11/2007    17:18

 
Registrado: 07/11/2007
Nº mensajes: 5
  leo_25 QuotePrivado  
 
Hola Living
una pregunta como haria para poder insertar otra fila mas para mostrar un textarea
cada vez que de haga al pie de la fila de nombre apellido y telefono deseo que al pie se agregue un textarea para una descripcion
algo asi como:
            <tr bgColor='#CCCCCC'>
              <td width="175"><input id=Nombre></td>
              <td width="175"><input id=Apellidos></td>
              <td width="175"><input id=Tel&eacute;fono></td>
              <td width="100">Eliminar</td>
            </tr>
          <tr>
           <textarea id=Descripcion>
          </tr>
sin que se deforme la tabla

  
 

leotrux

 
12/11/2007    21:42


Registrado: 14/04/2004
Nº mensajes: 491
  Living QuotePrivado  
 

El usuario leo_25 escribió:
Hola Living
una pregunta como haria para poder insertar otra fila mas para mostrar un textarea
cada vez que de haga al pie de la fila de nombre apellido y telefono deseo que al pie se agregue un textarea para una descripcion
algo asi como:
            <tr bgColor='#CCCCCC'>
              <td width="175"><input id=Nombre></td>
              <td width="175"><input id=Apellidos></td>
              <td width="175"><input id=Tel&eacute;fono></td>
              <td width="100">Eliminar</td>
            </tr>
          <tr>
           <textarea id=Descripcion>
          </tr>
sin que se deforme la tabla


No me queda muy claro lo que quieres hacer, supongo que es insertar una línea debajo con el textarea. Para eso tendrías que modificar la función addPerson (en mi ejemplo quedaría así):

function addPerson(){
 myNewRow = document.getElementById("tablaFormulario").insertRow(-1);
 myNewRow.id=indiceFilaFormulario;
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td><input type='text' name='nombre["+indiceFilaFormulario+"]' ></td>";
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td> <input type='text' name='apellidos["+indiceFilaFormulario+"]' ></td>";
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td><input  type='text' name='telefono["+indiceFilaFormulario+"]'></td>";
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td><input type='button'  value='Eliminar' onclick='removePerson(this)'></td>";
 
 indiceFilaFormulario++;
 myNewRow = document.getElementById("tablaFormulario").insertRow(-1);
 myNewRow.id=indiceFilaFormulario;
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td colspan='4'><textarea id='Descripcion'></textarea></td>";
 indiceFilaFormulario++;
}

Y la de borrar  quedaría de la siguiente manera:

function removePerson(obj){
 var oTr = obj;
 while(oTr.nodeName.toLowerCase()!='tr'){
  oTr=oTr.parentNode;
 }
 //Sacamos el tr que contiene el textarea
 var oTrTextArea=oTr.nextSibling;

 var root = oTr.parentNode;
 root.removeChild(oTr);
 root.removeChild(oTrTextArea);
}
 
 

El mayor placer de un hombre inteligente es aparentar ser idiota, delante de un idiota que aparenta ser inteligente.



  
14/11/2007    17:21

 
Registrado: 07/11/2007
Nº mensajes: 5
  leo_25 QuotePrivado  
 
De verdad Living muchas gracias por tu ayuda mira ahora me nace otra tarea te muestro el codigo

<html>
<head>
<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;
i=1;
function addPerson(iD){
 alt=document.getElementById(iD).rows.length;
 
 
 alert(alt);
 alert(i);
 myNewRow = document.getElementById(iD).insertRow(-1);
 myNewRow.id=indiceFilaFormulario;
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td><input style='width: 25px;'type='text'  type='text' name='item["+indiceFilaFormulario+"]' disabled value='"+iD+"'><input type='hidden' name='item["+indiceFilaFormulario+"]' value='"+iD+"'></td>";
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td> <input style='width: 20px;' type='text' type='text' name='alt["+indiceFilaFormulario+"]' disabled value='"+alt+"'><input style='width: 20px;' type='hidden' name='alt["+indiceFilaFormulario+"]' value='"+alt+"' ></td>";
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td><input  style='width: 20px;' type='text' id='cant["+indiceFilaFormulario+"]' name='cant["+indiceFilaFormulario+"]' ></td>";
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td><input  style='width: 25px;' type='text' id='unid["+indiceFilaFormulario+"]' name='unid["+indiceFilaFormulario+"]' onclick='validaFormcotizacion("+indiceFilaFormulario+")'></td>";
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td><textarea rows='1' cols='20' id='descripcion["+indiceFilaFormulario+"]' name='descripcion["+indiceFilaFormulario+"]' onclick='validaFormcotizacion("+indiceFilaFormulario+")'/></textarea></td>";
 
indiceFilaFormulario++;

myNewCell=myNewRow.insertCell(-1);
for(i=1;i<=alt;i++)
 {  j=i;
    alert("j"+j)
     if(i>=alt){
         myNewCell.innerHTML="<td><input type='button' disabled   value='Eliminar' onclick='removePerson('3')'></td>";
  
     }
    
     else
     break;
     myNewCell.innerHTML="<td><input type='button'  value='Eliminar' onclick='removePerson(this)'></td>";
    
    
 }

 myNewRow = document.getElementById("tablaFormulario").insertRow(-1);
 myNewRow.id=indiceFilaFormulario;
 myNewCell=myNewRow.insertCell(-1);
 myNewCell.innerHTML="<td colspan='4'><textarea id='Descripcion'></textarea></td>";
 indiceFilaFormulario++;
}
 
function removePerson(obj){
 var oTr = obj;
 while(oTr.nodeName.toLowerCase()!='tr'){
  oTr=oTr.parentNode;
 }
 var root = oTr.parentNode;
 root.removeChild(oTr);
 
}
 function validaVacio(valor) 
   { 
       if (valor.length >0)
      {
        return true;
       } 
      else
      alert("Campo Obligatorio");
      return false;
   }
  function validaNum(valor)
{  
    var expregu=/^[-]?\d+(\.\d+)?$/;
   
    if(expregu.test(valor))
     return true;
    else
     alert("Ingrese sólo números.");
     /*document.form_altaprov.valor.focus();*/
     return false;
}
function validaFormcotizacion(id)
{
    var idcantidad="cant["+id+"]";
    var iddescripcion="descripcion["+id+"]";
   /* alert(idcantidad);*/
    var valor_cant=document.getElementById(idcantidad).value;
    var valor_desc=document.getElementById(iddescripcion).value;
    if(!validaVacio(valor_cant)){document.getElementById(idcantidad).focus(); return false;}
    if(!validaNum(valor_cant)) {document.getElementById(idcantidad).focus(); return false;}
    if(!validaVacio(valor_cant)){document.getElementById(iddescripcion).focus(); return false;}
}
</script>
</head>
<body>
 <form action="<?=$_SERVER['PHP_SELF']?>" name="form_cotiza_prov" method="get">
<table cellpadding="0" cellspacing="0" >
      <tr>
        <td align="center">&nbsp;</td>
      </tr>
      <tr>
        <td><table cellpadding='3' cellspacing='3' style="background-color:#C5E3EE;font-size:10px;text-align:center;"  id="tablaFormulario">
            <tr bgColor='#C5E3EE'>
               <th>Item</th>
                    <th>Alt.</th>
                    <th>Cant</th>
                    <th>Unid</th>
                    <th>Descripción</th>
                    <th>Marca</th>
                    <th>Prec/unid</th>
                    <th>Costo Total</th>
            </tr>
          </table></td>
      </tr>
      <td>
      <table>
      <tr>
      </tr>
      </table>
    
      <tr>
      </tr>
      <tr>
      <table id="1">
      <tr>
                    <td>1</td>
                    <td>0</td>
                    <td>3</td>
                    <td>C/U</td>
                    <td>Descripcion 1.</td>
                    <td>
                    <input id="marca1" class="inputcotiza1" style='width: 80px;' type="text" onchange="totalItem('costo_tot1','3','prec_unit1')" name="marca1"/>
                    </td>
                    <td>
                    <input id="prec_unit1" class="inputcotiza2" style='width: 50px;' type="text" onchange="totalItem('costo_tot1','3','prec_unit1')" name="prec_unit1"/>
                    </td>
                    <td>
                    <input id="costo_tot1" class="inputcotiza2" style='width: 50px;' type="text" disabled="" name="costo_tot1"/>
                    </td>
                    <td align="right"><input type="button" onClick="addPerson('1')" value="Añadir" ></td>
      </tr>
      </table>
     
      <td>
      </td>
      </tr>
    
         <tr>
       
      </tr>
      <tr>
      <td align="center"><input type="submit" name="enviar" value="Enviar" ></td>
      </tr>
    </table>
    </form>
</body>
</html>
<?
include "connect.php";
print_r($_GET["item"]);
//Insertamos los diferentes registros del formulario
if (isset($_GET["item"])){
     foreach ($_GET["item"] as $indice => $item) { 
           $alt=$_GET["alt"][$indice];
           $cat=$_GET["cant"][$indice];
         echo   $query="INSERT INTO tabla (item,alt,cant) VALUES ('$item','$alt','$cat')";
          // mysql_query($query);         
      }  
 }
?>



el echo es que tod se genera bien lo que ahora se quiere que mientras no sea el ultimo
celda este el boton habilitado  si creo dos celdas por ejemplo la primera deshabilitado y a segunda habilitado  si son tres las dos primeras desabilitadas la ultima habilitada y asi cuantas celdas cree.

o en todo caso que solo muestre el boton quitar o eliminar mientras sea la ultima celda creada te agradeceria mucho tu ayuda una vez mas.
  
 

leotrux

 
16/04/2008    23:20

 
Registrado: 16/04/2008
Nº mensajes: 6
  rodpat QuotePrivado  
 
Hola Living, espero que aun se pueda pedir alguna ayuda o explicación con este fabuloso script, ...lo he utilizado y funciona a las mil, lo anexe a una tabla que me muestra datos desde la base de datos.....sin embargo, como se puede modificar para que tambien tome los datos que ya vienen para poder enviarlos y no solamente los datos que se cargar cuando creo una fila nueva, no se si me entiendes....
es decir, que me envie tanto  los datos que ya existen en la tabla como los que agrego con esta funcion...se puede hacer esto??

saludos

que estes bien.
  
 
 
17/04/2008    10:34


Registrado: 14/04/2004
Nº mensajes: 491
  Living QuotePrivado  
 
Muy sencillo rodpat. Lo único que tienes que hacer es crear campos "hidden" con los datos que ya tienes en la BBDD (eso en el caso de que no quieras modificarlos porque si los quieres modificar debes usar "input text") a los que les pondrías el mismo tipo de nombre, es decir, nombre[0], nombre[1]....nombre[n]. Lo único que tienes que tener cuidado es con la variable indiceFilaFormulario ya que tendrás que igualarla al número de filas que tengas en la BBDD más 1 (n+1).

Pero, una pregunta....por qué quieres enviar los datos que ya tienes en BBDD??
  
 

El mayor placer de un hombre inteligente es aparentar ser idiota, delante de un idiota que aparenta ser inteligente.



  
17/04/2008    15:23

 
Registrado: 16/04/2008
Nº mensajes: 6
  rodpat QuotePrivado  
 
Hola Living, muchas gracias por tu respuesta...

Lo que tengo que hacer es, consulto por un codigo, entonces si encuentro datos relacionados los imprimo en una tabla, digamos personas, imagina que para el  codigo 1 existen dos personas...mostrandome los datos de esas personas, pero ademas si quiero agregar otra persona mas o modificar alguna de las personas que ya tiene asociadas, cambiarles la direccion, etc...

Por eso cuando necesito agregar otra persona necesito tu script, pero al enviar los datos, se pierden los anteriores, osea, solo me envia tantos datos como filas nuevas vaya cerando, pero para este ejemplo, los datos de las personas anteriores no "viajan" ...  y como te digo todos los datos pueden ser modificables, ahora, me dices que si se puede, puedes ejemplificarme mas por favor?... para poder sacarlo pues estoy detenido solo en eso...y asi poder guardar todos los datos...

saludos

rodpat 
  
 
 
17/04/2008    15:58


Registrado: 14/04/2004
Nº mensajes: 491
  Living QuotePrivado  
 
Tendrías que generar las filas de esta manera y después igualar la variable indiceFilaFormulario al numero de filas + 1

<?
$result = mysql_query($query);
$numFila=1;
while ($row = mysql_fetch_assoc($result)){
?>

<tr id="<?=$numFila?>">
         <td><input type="text" name="nombre[<?=$numFila?>]"/></td>
         <td> <input type="text" name="apellidos[<?=$numFila?>]"/></td>
         <td><input type="text" name="telefono[<?=$numFila?>]"/></td>
         <td><input type="button" onclick="removePerson(this)" value="Eliminar"/></td>
</tr>

<?
$numFila++;
} ?>
<script>
       indiceFilaFormulario=<?=$numFila?>;
</script>
  
 

El mayor placer de un hombre inteligente es aparentar ser idiota, delante de un idiota que aparenta ser inteligente.



  
       < 1 [2] 3 4 5 > >>