Foros del Web » Programando para Internet » Javascript »

Ayuda para formulario con selects dinamicos..

Estas en el tema de Ayuda para formulario con selects dinamicos.. en el foro de Javascript en Foros del Web. Buenas colegas... a ver si me pueden ayudar con esto... estoy haciendo un formulario y necesito que al hacer click en un boton, se generen ...
  #1 (permalink)  
Antiguo 18/01/2011, 14:16
Avatar de Heiroon  
Fecha de Ingreso: junio-2010
Ubicación: Caracas, Venezuela - Por ahora...
Mensajes: 495
Antigüedad: 12 años, 8 meses
Puntos: 63
Pregunta Ayuda para formulario con selects dinamicos..

Buenas colegas... a ver si me pueden ayudar con esto... estoy haciendo un formulario y necesito que al hacer click en un boton, se generen varios selects...
estoy intentando con la funcion document.createElement() he logrado generar los selects pero me salen vacios...

cabe destacar que tengo que llenarlos con data de la bd...

alguna idea?? de antemano gracias!
__________________
Gmail : [email protected]
Twitter: @heiroon

I'm back!
  #2 (permalink)  
Antiguo 19/01/2011, 06:58
Avatar de Heiroon  
Fecha de Ingreso: junio-2010
Ubicación: Caracas, Venezuela - Por ahora...
Mensajes: 495
Antigüedad: 12 años, 8 meses
Puntos: 63
Exclamación Respuesta: Ayuda para formulario con selects dinamicos..

gente, ya he logrado generar selects con sus opciones y sus grupos desde base de datos... lo que para mi es bastante! ahora... lo que me falta es meter cada opcion en su respectivo grupo... Auxilio! aca les dejo el codigo tal cual va hasta ahora:

Código Javascript:
Ver original
  1. function newProd(){
  2.  
  3.     var container = document.getElementById('funebre');
  4.     var cont = (++numero);
  5.    
  6.       var nDiv = document.createElement('div');
  7.           nDiv.className = 'contentProducto';
  8.           nDiv.id = 'Campo' + cont;
  9.       var nCampo = document.createElement('input');
  10.           nCampo.name = 'campos[]';
  11.           nCampo.type = 'text';
  12.           nCampo.className = "amount";
  13.           nCampo.id = 'cantidad'+cont;
  14.       var a = document.createElement('a');
  15.           a.name = nDiv.id;
  16.           a.href = '#';
  17.           a.className = 'eraser';
  18.           a.onclick = elimCamp;
  19.           a.innerHTML = 'Eliminar';
  20.          
  21.       var prod = document.createElement('select');
  22.           prod.name = 'prod[]';
  23.           prod.id = 'prod' + cont;
  24.           prod.className = "prodSelector";
  25.        
  26.       <? $tesla = 1;
  27.          $nombrar = mysql_query("SELECT * FROM categorias WHERE status_categoria = '0'")or die(mysql_error());
  28.          while($etiquetas = mysql_fetch_row($nombrar)){ ?>
  29.       var grupo<?=$tesla?>= document.createElement('optgroup');
  30.           grupo<?=$tesla?>.label="<?=utf8_encode($etiquetas[1])?>";
  31.      
  32.             prod.appendChild(grupo<?=$tesla?>);
  33.      <? $tesla++;  } ?>  
  34.          
  35.       var opt = document.createElement('option');
  36.           opt.value=0;
  37.           opt.innerHTML="Seleccione...";
  38.          
  39.           prod.appendChild(opt<?=$enum?>);
  40.          
  41.          
  42.     <?  $enum = 1;
  43.         $sql = "SELECT id_producto, productos.id_categoria, titulo_prod, categorias.id_categoria FROM productos INNER JOIN categorias ON productos.id_categoria = categorias.id_categoria WHERE status_prod = '0'";
  44.         $peste = mysql_query($sql);
  45.         $total = mysql_num_rows($peste);
  46.         while($noire = mysql_fetch_row($peste)){ ?>
  47.        
  48.       var opt<?=$enum?> = document.createElement('option');
  49.           opt<?=$enum?>.value="<?=$noire[0]?>";
  50.           opt<?=$enum?>.innerHTML="<?=$noire[2]?>";
  51.           alert("<?=$noire[3]?>,<?=$noire[1]?>");
  52.           <? if($noire[3]==$noire[1]){?>
  53.           prod.appendChild(opt<?=$enum?>);
  54.          
  55.     <?  } $enum++;  } ?>   
  56.          
  57.          
  58.           nDiv.appendChild(prod);
  59.           nDiv.appendChild(nCampo);
  60.           nDiv.appendChild(a);
  61.           container.appendChild(nDiv);
  62. }

este es el html que se necesita para que trabaje:

Código HTML:
Ver original
  1. <div id="funebre">
  2.                    
  3.                         <div class="contentProducto" id="Campo1">
  4.                             <select name="prod[]" id="prod1" class="prodSelector">
  5.                                 <option value="0">Seleccione...</option>
  6.                                
  7.                         <?  $sql = "SELECT * FROM productos WHERE status_prod='0'";
  8.                             $peste = mysql_query($sql);
  9.                             while($noire = mysql_fetch_row($peste)){ ?>
  10.                                 <option value="<?=$noire[0]?>"><?=$noire[2]?></option>
  11.                             <? } ?>
  12.                             </select><input type="text" name="campos[]" onkeydown="numbers(this)" onkeyup="numbers(this)" class="amount" id="cantidad1">
  13.                         </div>
  14.                    
  15.                     </div>
__________________
Gmail : [email protected]
Twitter: @heiroon

I'm back!
  #3 (permalink)  
Antiguo 19/01/2011, 10:34
Avatar de Heiroon  
Fecha de Ingreso: junio-2010
Ubicación: Caracas, Venezuela - Por ahora...
Mensajes: 495
Antigüedad: 12 años, 8 meses
Puntos: 63
De acuerdo Respuesta: Ayuda para formulario con selects dinamicos..

solucionado! esta es la funcion por si alguien la necesita alguna vez...


Código Javascript:
Ver original
  1. function Objeto(cod,tex,grupo){
  2.     this.cod=cod;
  3.     this.tex=tex;
  4.     this.grupo=grupo;
  5. }
  6.  
  7. function newProd(){
  8.  
  9.  
  10.     var container = document.getElementById('funebre');
  11.     var cont = (++numero);
  12.    
  13.       var nDiv = document.createElement('div');
  14.           nDiv.className = 'contentProducto';
  15.           nDiv.id = 'Campo' + cont;
  16.       var nCampo = document.createElement('input');
  17.           nCampo.name = 'campos[]';
  18.           nCampo.type = 'text';
  19.           nCampo.className = "amount";
  20.           nCampo.id = 'cantidad'+cont;
  21.       var a = document.createElement('a');
  22.           a.name = nDiv.id;
  23.           a.href = '#';
  24.           a.className = 'eraser';
  25.           a.onclick = elimCamp;
  26.           a.innerHTML = 'Eliminar';
  27.          
  28.       var prod = document.createElement('select');
  29.           prod.name = 'prod[]';
  30.           prod.id = 'prod' + cont;
  31.           prod.className = "prodSelector";
  32.        
  33.       var opt = document.createElement('option');
  34.           opt.value=0;
  35.           opt.innerHTML="Seleccione...";
  36.           opt.selected = true;
  37.           prod.appendChild(opt);
  38.            
  39. var array_options; 
  40. var grupo_anterior="";
  41. var grupo;
  42. var opcion;
  43.      
  44.       //var selector = document.getElementById('prod2');
  45.       //alert(selector);
  46.  
  47.   var array_options = new Array();
  48.   <? $n=1;
  49.      $sql = "SELECT id_producto, productos.id_categoria, titulo_prod, categorias.id_categoria, categorias.nombre_categoria FROM productos INNER JOIN categorias ON productos.id_categoria = categorias.id_categoria WHERE status_prod = '0'";
  50.      $con = mysql_query($sql)or die(mysql_error());
  51.      while($repeat = mysql_fetch_array($con)){
  52.      extract($repeat); ?>
  53.   array_options["<?=$n?>"] = new Objeto("<?=$n?>","<?=utf8_encode($titulo_prod)?>","<?=utf8_encode($nombre_categoria)?>");
  54.   <? $n++; } ?>
  55.  
  56.   var grupo_anterior="";
  57.   var grupo;
  58.   var opcion;
  59.  
  60.   for (var j in array_options){
  61.  
  62.   if(grupo_anterior!=array_options[j].grupo){  
  63.             grupo          = document.createElement('OPTGROUP');
  64.             grupo.label    = array_options[j].grupo;
  65.                   grupo_anterior = array_options[j].grupo;
  66.                         prod.appendChild(grupo);
  67.                             }
  68.                                 opcion = document.createElement("OPTION");
  69.                                     opcion.setAttribute("value",array_options[j].cod);
  70.                                         opcion.innerHTML = array_options[j].tex;
  71.                                             prod.appendChild(opcion);
  72.                                               }
  73.          
  74.          
  75.           nDiv.appendChild(prod);
  76.           nDiv.appendChild(nCampo);
  77.           nDiv.appendChild(a);
  78.           container.appendChild(nDiv);
  79. }
__________________
Gmail : [email protected]
Twitter: @heiroon

I'm back!

Etiquetas: dinamicos, selects, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:42.