Tema: Evento DOM en formulario dinamico
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 10/11/2013, 09:36
danikene
 
Fecha de Ingreso: marzo-2007
Mensajes: 59
Antigüedad: 17 años, 9 meses
Puntos: 1
Respuesta: Evento DOM en formulario dinamico
Fíjate que limpiando el código para enviarte solo el html del formulario sin querer logre que trabajara la función tal como lo necesito, lo único es que no sé como pasarle por parámetros el id del select y la cantidad del mismo.
Te coloco a continuación el código de todas formas de como genero el formulario .

Gracias de nuevo
Código Javascript: 
Ver original
  1. <script type="text/JavaScript">
  2. function nenos(){
  3.     alert("si");
  4. }
  5.  
  6. function agregar(op) {
  7.     restar()
  8.     if(op < 10){
  9.         for(i=1;i<=op;i++ ){
  10.  
  11.             contenedor = document.getElementById('habitacion');
  12.  
  13.             hr = document.createElement('hr');
  14.  
  15.             fila_1 = document.createElement('tr');
  16.             fila_1.id='c_tr1';
  17.  
  18.             fila_2 = document.createElement('tr');
  19.             fila_2.id='c_tr2';
  20.  
  21.             fila_3 = document.createElement('tr');
  22.             fila_3.id='c_tr3';
  23.  
  24.             fila_4 = document.createElement('tr');
  25.             fila_4.id='c_tr4';
  26.  
  27.             fila_5 = document.createElement('tr');
  28.             fila_5.id='c_tr5';
  29.  
  30.             fila_6 = document.createElement('tr');
  31.             fila_6.id='c_tr6';
  32.  
  33.             celda_0 = document.createElement('td');
  34.             celda_0.id = 'cate';
  35.             celda_0.colSpan='1';
  36.             celda_0.innerHTML = "Categor&iacute;a "
  37.             celda_0.setAttribute("align","center");
  38.  
  39.             celda_1 = document.createElement('td');
  40.             celda_1.id = 'c_ti_2';
  41.             celda_1.colSpan='2';
  42.             celda_1.innerHTML = "Habitacion #"+i
  43.             celda_1.setAttribute("align","center");
  44.  
  45.             celda_2 = document.createElement('td');
  46.             celda_2.id = 'c_ti_hab';
  47.             celda_2.innerHTML = "Cant. Adultos"
  48.             celda_2.setAttribute("align","center");
  49.  
  50.             celda_3 = document.createElement('td');
  51.             celda_3.id = 'c_ti_hab2';
  52.             celda_3.innerHTML = "Cant. Ni&ntilde;os"
  53.             celda_3.setAttribute("align","center");
  54.  
  55.             celda_4 = document.createElement('td');
  56.             celda_4.id = 'c_select';
  57.             celda_4.setAttribute("align","center");
  58.  
  59.  
  60.             celda_5 = document.createElement('td');
  61.             celda_5.id = 'c_ti_eda1';
  62.             celda_5.innerHTML = "edad 1ro"
  63.             celda_5.setAttribute("align","center");
  64.  
  65.             celda_6 = document.createElement('td');
  66.             celda_6.id = 'c_select';
  67.             celda_6.setAttribute("align","center");
  68.  
  69.             celda_10 = document.createElement('td');
  70.             celda_10.id = 'c_ti_eda2';
  71.             celda_10.innerHTML = "edad 2do"
  72.             celda_10.setAttribute("align","center");
  73.  
  74.             celda_11 = document.createElement('td');
  75.             celda_11.id = 'c_select';
  76.             celda_11.setAttribute("align","center");
  77.  
  78.  
  79.  
  80.             celda_7 = document.createElement('td');
  81.             celda_7.id = 'c_select';
  82.             celda_7.setAttribute("align","center");
  83.  
  84.             celda_8 = document.createElement('td');
  85.             celda_8.id = 'c_select';
  86.             celda_8.setAttribute("align","center");
  87.  
  88.             celda_9 = document.createElement('td');
  89.             celda_9.id = 'c_ti_2';
  90.             celda_9.colSpan='3';
  91.             celda_9.setAttribute("align","center");
  92.  
  93.             seleccion_0=document.createElement('select');
  94.             seleccion_0.name='categoria'+i;
  95.             seleccion_0.id='categoria'+i;
  96.  
  97.             seleccion_1=document.createElement('select');
  98.             seleccion_1.name='cant_adultos'+i;
  99.             seleccion_1.id='cant_adultos'+i;
  100.  
  101.             seleccion_2=document.createElement('select');
  102.             seleccion_2.name='cant_nino'+i;
  103.             seleccion_2.id='cant_nino'+i;
  104.             seleccion_2.onchange=nenos;
  105.  
  106.             seleccion_3=document.createElement('select');
  107.             seleccion_3.name='edad1_'+i;
  108.             seleccion_3.id='edad1_'+i;
  109.  
  110.             seleccion_4=document.createElement('select');
  111.             seleccion_4.name='edad2_'+i;
  112.             seleccion_4.id='edad2_'+i;
  113.             seleccion_4.style.display="none";
  114.  
  115.             for(e=0;e<=3;e++ ){
  116.                 opcion_1 = document.createElement('option');
  117.                 opcion_1.innerHTML = e;
  118.                 opcion_1.value = e;
  119.                 seleccion_1.appendChild(opcion_1);
  120.             }
  121.  
  122.             for(e=0;e<=2 ;e++ ){
  123.                 opcion_2 = document.createElement('option');
  124.                 opcion_2.innerHTML = e;
  125.                 opcion_2.value = e;
  126.                 seleccion_2.appendChild(opcion_2);
  127.             }
  128.             for(e=0;e<=12 ;e++ ){
  129.                 opcion_3 = document.createElement('option');
  130.                 opcion_3.innerHTML = e;
  131.                 opcion_3.value = e;
  132.                 seleccion_3.appendChild(opcion_3);
  133.             }
  134.             for(e=0;e<=12 ;e++ ){
  135.                 opcion_4 = document.createElement('option');
  136.                 opcion_4.innerHTML = e;
  137.                 opcion_4.value = e;
  138.                 seleccion_4.appendChild(opcion_4);
  139.             }
  140.             celda_4.appendChild(seleccion_0);
  141.             celda_6.appendChild(seleccion_3);
  142.             celda_7.appendChild(seleccion_1);
  143.             celda_8.appendChild(seleccion_2);
  144.             celda_11.appendChild(seleccion_4);
  145.             celda_9.appendChild(hr);
  146.  
  147.             fila_1.appendChild(celda_1);
  148.             fila_2.appendChild(celda_0);
  149.             fila_2.appendChild(celda_2);
  150.             fila_2.appendChild(celda_3);
  151.             fila_2.appendChild(celda_5);
  152.             fila_2.appendChild(celda_10);
  153.             fila_3.appendChild(celda_4);
  154.             fila_3.appendChild(celda_7);
  155.             fila_3.appendChild(celda_8);
  156.             fila_3.appendChild(celda_6);
  157.             fila_3.appendChild(celda_11);
  158.             fila_4.appendChild(celda_9);
  159.  
  160.  
  161.             contenedor.appendChild(fila_1);
  162.             contenedor.appendChild(fila_2);
  163.             contenedor.appendChild(fila_3);
  164.             if (i != op ){
  165.                 contenedor.appendChild(fila_4);
  166.             }
  167.             var o=i;
  168.  
  169.         }
  170.     } else {
  171.         alert("+9");
  172.     }
  173. }
  174. function acero(){
  175.  
  176.     document.getElementById('habitacion').value=0;
  177.     document.getElementById('habitaciones').value=0;
  178.  
  179. }
  180. function restar(){
  181.     for(e=0;e<=40;e++ ){
  182.         try {
  183.             document.getElementById('habitacion').deleteRow(0);
  184.         }
  185.         catch (err) {}
  186.     }
  187. }
  188.  
  189. </script>


y el html
Código HTML: 
Ver original
  1. <form action="#" method="post" name="form_cot" id="form_cot">
  2.                 <div style="display:table; width: 600px"  >
  3.                     <div >
  4.                         <div style="float:left" valign="top" >
  5.  
  6.                                     <div style="display:table; width: 600px;">
  7.                                         <div style="padding-top: 11px; padding-bottom: 17px; border-bottom: 1px silver solid">
  8.                                             <div style="float:left; width:32%" align="center">
  9.                                                 <select onChange="agregar(this.options[selectedIndex].value)" name="habitaciones" id="habitaciones">
  10.                                                     <option value="0" selected="selected">0</option>
  11.                                                     <option value="1">1</option>
  12.                                                     <option value="2">2</option>
  13.                                                     <option value="3">3</option>
  14.                                                     <option value="4">4</option>
  15.  
  16.                                                 </select>
  17.                                             </div >
  18.                                         </div>
  19.                                     </div>
  20.                                 </div>
  21.                                 <div >
  22.                                     <div style="float:left" width="7" height="0" >&nbsp;</div >
  23.                                     <div style="float:left" width="310" height="0" align="center" >
  24.  
  25.                                         <table style="width: 600px"  border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
  26.                                             <tbody id="habitacion">
  27.                                             </tbody>
  28.                                         </table>
  29.                                     </div >
  30.                                 </div>
  31.                             </div>
  32.                         </div>
  33.                     </div >
  34.                 </div>
  35.             </form>