Tema: Formulario Dinámico.... aparecen y desaparecen campos de acuerdo a SELECT option
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/01/2010, 17:40
benjaminvera
 
Fecha de Ingreso: junio-2008
Mensajes: 101
Antigüedad: 16 años, 6 meses
Puntos: 0
Formulario Dinámico.... aparecen y desaparecen campos de acuerdo a SELECT option
Hola Mundo.... Cómo están...????
Con muchas dudas pero con trabajo... jejejeje
Mi duda es la siguiente:
Tengo un formulario donde solo me interesa mandar datos numéricos hacia una base de datos.
Este formulario cambia de manera dinamica ya que de acuerdo a la seleccion del drop list
aparecen y desaparecen Inputs BOX....
La cuestión es que en este ejemplo solo hay 3 campos de captura y de acuerdo a la seleccion
de los Drop List puede aparecer solo 1, 2 o 3 campos de captura....
Pero mi gran duda es ver cómo puedo hacer para que mi archivo PHP/MySQL pueda cambiar de
manera dinámica el envío de datos, ya sea que sea 1, 2 o 3 datos numéricos los que envíe
de acuerdo a la selección del cliente en los Selects del Drop List...
El archivo que debe mandar los valores a la Base de datos se llama "ENVIAR_1.php"

Aquí hice un pequeño ejemplo...

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <title>Dynamic form</title>
  4. <noscript><style type="text/css">.hideIfJSdisabled{display:none;}</style></noscript>
  5. <style type="text/css">.hide{display:none;}</style>
  6. <script type="text/javascript">
  7. function mes_fChanged(e){
  8. var m=e.options[e.selectedIndex].text;
  9. //document.getElementById('maintenanceCost').style.display=(m=='January'||m=='June'||m=='December')?'':'none';       
  10. document.getElementById('maintenanceCost').className=(m=='January'||m=='June'||m=='December')?'':'hide';
  11. }
  12. function org_sub_fChanged(e){
  13. document.getElementById('productionCostPerUnit').className=(e.options[e.selectedIndex].text=='Banco 3')?'':'hide';
  14. }
  15. </script>
  16.  
  17. </head>
  18. <body bgcolor="#fcfcfc">
  19. <form method="post" action="../ENVIAR_1.php" name="FORM_1" onsubmit="return false;">
  20. <TABLE BORDER=1 cellspadding=2 bgcolor="#F5F5F5">
  21. <tr><TD><font color="#FF00FF">MES</font></TD>
  22.     <TD  align="left">
  23.         <select name="mes_f" onchange="mes_fChanged(this)">
  24.         <option selected><b>Escoger el Mes</b></option>
  25.         <optgroup label="January">
  26.         <option>January</option>
  27.         <option>February</option>
  28.         <option>March</option>
  29.         <option>April</option>
  30.         <option>May</option>
  31.         <optgroup label="June">
  32.         <option>June</option>
  33.         <option>July</option>
  34.         <option>August</option>
  35.         <option>September</option>
  36.         <option>Octuber</option>
  37.         <option>November</option>
  38.         <optgroup label="December">
  39.         <option>December</option>
  40.         </select>
  41.     </td></tr>
  42. <tr><TD>Año</TD>
  43.     <TD  align="left">
  44.         <SELECT name="anio_f">
  45.         <optgroup label="Year">
  46.         <option>2007</option>
  47.         <option>2008</option>
  48.         <option>2009</option>
  49.         <option>2010</option>
  50.         <option>2011</option>
  51.         </select>
  52.     </td></tr>
  53. <tr><TD><font color="#FF00FF">Banco</font></TD>
  54.     <TD  align="left">
  55.         <select name="mes" onchange="org_sub_fChanged(this)">
  56.         <option selected><b>Escoger el Banco</b></option>
  57.         <option>Banco 1</option>
  58.         <option>Banco 2</option>
  59.         <optgroup label="Banco 3">
  60.         <option>Banco 3</option>
  61.         <option>Banco 4</option>
  62.         </select>
  63.     </td></tr>
  64.     <tr><TD>Operacion</TD>
  65.     <TD  align="left">
  66.         <select name="pais">
  67.         <option selected><b>Escoger Operacion</b></option>
  68.         <optgroup label="Year">
  69.         <option>Deposito</option>
  70.         <option>Retiro</option>
  71.         <option>Tranferencia</option>
  72.         </select>
  73.     </td></tr>
  74. <tr><TD>Tipo de Cambio</TD>
  75.     <TD  align="left">
  76.         <select name="pais">
  77.         <option selected><b>Escoger tipo de Cambio</b></option>
  78.         <optgroup label="Year">
  79.         <option>Efectivo</option>
  80.         <option>Cheque</option>
  81.         <option>Tarjeta</option>
  82.         </select>
  83.     </td></tr>
  84. <tr><td bgcolor="#5CB3FF" align="center"><b>Negocio</b></td>
  85.  <td>
  86.         <TR id="maintenanceCost" bgcolor="#FFC0CB">
  87.            <TD><input type="hidden"  name="Det_1" value="26">Ganancia por Unidad de Venta</TD>
  88.            <TD><INPUT type=text name="VentaUnit" size="5" value="default"><b>%</b></TD>
  89.         </TR>
  90.   <TR><TD><font color="#FF4500">Costo por Unidad de Produccion</font></TD>
  91.       <TD><INPUT type=text name="ProducUnit" size="5" value="default">N&uacute;mero</TD>
  92.   </TR>
  93.   <TR id="productionCostPerUnit" bgcolor="#FFC0CB">
  94.       <TD><input type="hidden"  name="Det_14" value="47">Monto de Prestamo a pedir</TD>
  95.       <TD><INPUT type=text name="prestamo" size="5" value="default">N&uacute;mero</TD>
  96.   </TR>
  97.  </td>
  98. </tr>
  99. </table>
  100. </body>
  101. </html>
Espero me puedan ayudar y también espero que este pequeño ejemplo les pueda servir de algo...

Saludos....