Ayuda filas añadidas con Javascript

[javierito10]

Hola amig@s del foro, tengo el siguiente problemita, resulta que tengo un form donde se generan filas con opciones select al presionar un botón, bueno en la primera fila las opciones del select las jalo de una BD, hasta ahí todo bien, el problema es que cuando genero una nueva fila ya no puedo hacer que en esa fila tambien me muestre las opciones del select jaladas de la Bd, es decir que cuando haga clic en el select de la fila generada me despliegue las opciones jaladas de la BD, cuando genere otra fila tambien me despliegue las opciones jaladas de la BD, y asi sucesivamente.

Bueno no se si pude explicarme bien pero tambien les posteo el form donde genero las filas:

Código PHP:

 <form name="form1" method="post" action="enviar.php">
  <select name="campo[][campo1]" id="campo[][campo1]">
  <?php 
  require_once('Conecctions/coneccion.php');
  $q=mysql_query("select * from familia");
  do{   echo "<option value='$f[cod]'>$f[cod]</option>";
    }while($f=mysql_fetch_array($q))
  ?>
  </select>
  <select name="campo[][campo2]" id="campo[][campo2]">
  <?php 
  require_once('Conecctions/coneccion.php');
  $q=mysql_query("select * from familia");
  do{   echo "<option value='$f[cod]'>$f[cod]</option>";
    }while($f=mysql_fetch_array($q))
  ?>
  </select>
  <select name="campo[][campo3]" id="campo[][campo3]">
  <?php 
  require_once('Conecctions/coneccion.php');
  $q=mysql_query("select * from familia");
  do{   echo "<option value='$f[cod]'>$f[cod]</option>";
    }while($f=mysql_fetch_array($q))
  ?>
  </select>
  <select name="campo[][campo4]" id="campo[][campo4]">
  <?php 
  require_once('Conecctions/coneccion.php');
  $q=mysql_query("select * from familia");
  do{   echo "<option value='$f[cod]'>$f[cod]</option>";
    }while($f=mysql_fetch_array($q))
  ?>
  </select>
  <select name="campo[][campo5]" id="campo[][campo5]">
  <?php 
  require_once('Conecctions/coneccion.php');
  $q=mysql_query("select * from familia");
  do{   echo "<option value='$f[cod]'>$f[cod]</option>";
    }while($f=mysql_fetch_array($q))
  ?>
  </select>
  <input type="button" name="button" id="button" value="Crear otra fila" onclick="addFileInput()"/>
<div id="moreUploads"></div>  
  
<p>
  <label>
  <input type="submit" name="Submit" value="Enviar" />
  </label>
</p>
</form>  

Aqui esta la función Javascript que hace generar las filas:

Código PHP:

  <script language="javascript" type="text/javascript">
var upload_number=1;
    function addFileInput() {
    var i=0;
     var d = document.createElement("div");
    var file = document.createElement("select");
     file.setAttribute("name", "campo[][campo1]");
    d.appendChild(file);
    var file2 = document.createElement("select");
     file2.setAttribute("name", "campo[][campo2]");
     d.appendChild(file2);
    var file3 = document.createElement("select");
     file3.setAttribute("name", "campo[][campo3]");
    d.appendChild(file3);
    var file4 = document.createElement("select");
     file4.setAttribute("name", "campo[][campo4]");
     d.appendChild(file4);
    var file5 = document.createElement("select");
     file5.setAttribute("name", "campo[][campo5]");
     d.appendChild(file5);
     document.getElementById("moreUploads").appendChild(d);
     upload_number++;
}
</script> 
  

Bueno espero que puedan ayudarme desde ya muchas gracias por su interés.

[javierito10]

Una ayudita porfa

[derkenuke]

Hola javierito10:

Si te he entendido bien tú lo que quieres es crear un elemento <SELECT> mediante javascript (eso veo que ya lo tienes hecho) pero rellenarlo de <OPTION> cuyos valores los tienes en una BD.

Si no quieres volver a recargar el documento la solución es AJAX: Pides una lista de valores a la BD mediante otro documento sin que se entere el usuario y la traes a tu SELECT de manera transparente.

Pero déjame decirte que tu código son 5 SELECTs exactamente iguales, y que para esos casos es recomendable un simple bucle. También se me ocurre que como parece que los SELECT van siempre rellenos con los mismos valores (extraídos de select * from familia) no necesitas hacer la consulta 5 veces , ni siquiera utilizar AJAX para volver a hacer la misma consulta al añadir dinámicamente más campos.

Con una vez que hagas la consulta es suficiente: simplifica. Luego esos OPTION los pones en los SELECT que quieras, incluso en los generados con javascript.


Saludos

[javierito10]

Hola derkenuke gracias por tu respuesta y si efectivamente entendiste mi problema, lo que pasa es que en el post anterior donde publiqué el código era solo un ejemplo ya que los valores de los selects deben jalarse de tablas diferentes pero aqui lo posteo nuevamente y esta vez para que se entienda mejor :

Código PHP:

 <form name="form1" method="post" action="enviar.php">
  <select name="campo[][campo1]" id="campo[][campo1]">
  <?php 
  require_once('Conecctions/coneccion.php');
  $q=mysql_query("select * from familia");
  do{   echo "<option value='$f[cod]'>$f[cod]</option>";
    }while($f=mysql_fetch_array($q))
  ?>
  </select>
  <select name="campo[][campo2]" id="campo[][campo2]">
  <?php 
  require_once('Conecctions/coneccion.php');
  $q=mysql_query("select * from subfamilia");
  do{   echo "<option value='$f[descripcion]'>$f[descripcion]</option>";
    }while($f=mysql_fetch_array($q))
  ?>
  </select>
  <select name="campo[][campo3]" id="campo[][campo3]">
  <?php 
  require_once('Conecctions/coneccion.php');
  $q=mysql_query("select * from zona");
  do{   echo "<option value='$f[nom_zona]'>$f[nom_zona]</option>";
    }while($f=mysql_fetch_array($q))
  ?>
  </select>
  <select name="campo[][campo4]" id="campo[][campo4]">
  <?php 
  require_once('Conecctions/coneccion.php');
  $q=mysql_query("select * from direccion");
  do{   echo "<option value='$f[nom_direc]'>$f[nom_direc]</option>";
    }while($f=mysql_fetch_array($q))
  ?>
  </select>
  <select name="campo[][campo5]" id="campo[][campo5]">
  <?php 
  require_once('Conecctions/coneccion.php');
  $q=mysql_query("select * from trabajo where cod='$codigo' ");
  do{   echo "<option value='$f[tipo_trab]'>$f[tipo_trab]</option>";
    }while($f=mysql_fetch_array($q))
  ?>
  </select>
  <input type="button" name="button" id="button" value="Crear otra fila" onclick="addFileInput()"/>
<div id="moreUploads"></div>  
  
<p>
  <label>
  <input type="submit" name="Submit" value="Enviar" />
  </label>
</p>
</form>  

Ahora bien no se si puedes postearme algun tipo de código para que en las filas generadas tambien aparezcan las opciones jaladas de la BD, porque si probaste el funcionamiento de este form las opciones jaladas de la BD solo aparecen para la 1º fila y para las demas ya no aparecen, y yo quiero que aparezcan tanto en la 1º fila como en las filas generadas.

Desde ya muchisimas gracias.
Ahh por si quieres volver a probar el form aqui esta el javascript que genera las filas:

Código PHP:

  <script language="javascript" type="text/javascript">
var upload_number=1;
    function addFileInput() {
    var i=0;
     var d = document.createElement("div");
    var file = document.createElement("select");
     file.setAttribute("name", "campo["+upload_number+"][campo1]");
    file.setAttribute("option", "value", "hola");
    d.appendChild(file);
    var file2 = document.createElement("select");
     file2.setAttribute("name", "campo["+upload_number+"][campo2]");
     d.appendChild(file2);
    var file3 = document.createElement("select");
     file3.setAttribute("name", "campo["+upload_number+"][campo3]");
    d.appendChild(file3);
    var file4 = document.createElement("select");
     file4.setAttribute("name", "campo["+upload_number+"][campo4]");
     d.appendChild(file4);
    var file5 = document.createElement("select");
     file5.setAttribute("name", "campo["+upload_number+"][campo5]");
     d.appendChild(file5);
     document.getElementById("moreUploads").appendChild(d);
     upload_number++;
}
</script> 
  

[derkenuke]

Hola de nuevo javierito10:

¿Se trata simplemente de clonar esos 5 selects? ¿O van a ser cargados con otros datos diferentes a esos?

Si fuera a clonarlos sería muy fácil:

Código PHP:

  <select id="campo[][campo4]" name="campo[][campo4]">
    <option value="uno">uno</option>
    <option value="dos">dos</option>
    <option value="tres">tres</option>
    <option value="cuatro">cuatro</option>
</select>
<button type="button" onclick="hazmeCopia()">copia</button>
 
<script type="text/javascript">
<!--
 
var x = 5;
function hazmeCopia() {
    var copia = document.getElementById("campo[][campo4]").cloneNode(true);
    copia.id = copia.name = "campo[][campo"+x+"]";
    document.body.appendChild(copia);
    x++;
}
 
// -->
</script> 
  

Pero si no puedes usar cloneNode() porque no son copias exactas vas a necesitar AJAX, y es un poquillo más complicado que esto.


Saludos.


PD: Un código PHP que toma datos de una BD dificilmente lo podré probar si no tengo tu BD

[colote]

Fijate este ejemplo, a ver si te sirve !!!!

CLICK ACA