Foros del Web » Programando para Internet » Javascript »

Ocultar campo

 Estas en el tema de Ocultar campo en el foro de Javascript en Foros del Web. Hola a todos espero que estén bien. tengo una pequeña duda, tengo este codigo @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < tr >     ...
  #1 (permalink)  
Antiguo 24/01/2012, 16:14
Avatar de mexbale  
Fecha de Ingreso: septiembre-2010
Ubicación: Iztapalapa
Mensajes: 146
Antigüedad: 13 años, 7 meses
Puntos: 1
Ocultar campo
Hola a todos espero que estén bien.

tengo una pequeña duda, tengo este codigo

Código HTML: 
Ver original
  1. <tr>
  2.       <td>PROCEDIMIENTO PARA LA EXPULSIÓN O EXTRACCIÓN</td>
  3.       <td><div align="right">
  4.         <select name="PROCE" id="PROCE">
  5.                 <option selected="selected">
  6.                 <option value="Cesaria">Cesaria</option>
  7.                 <option value="Forceps">Forceps</option>
  8.                 <option value="Legrado">Legrado</option>
  9.                 <option value="Otro">Otro</option>
  10.                 <option value="Ninguno">Ninguno</option>
  11.                 <option value="Se ignora">Se ignora</option>
  12.             </select>
  13.       </div></td>
  14.     </tr>
  15.     <tr>
  16.       <td colspan="2"><div align="right">ESPECIFIQUE
  17.           <input name="PROCE_ESP" type="text" id="PROCE_ESP" onkeypress="return letrasynumeros(event)" onkeyup = "this.value=this.value.toUpperCase();if (this.value.length == this.getAttribute('maxlength')){tabulador(this.form,this)}" size="70" maxlength="100" />
  18.       </div>
  19.       <div align="right"></div></td>
  20.     </tr>

y quisiera que cuando seleccionaran la opción 'OTRO' apareciera el campo llamado PROCE_ESP y cuando seleccionen otra opción que no sea 'OTRO' que se ocultara el campo de PROCE_ESP

espero que me puedan ayudar con esta pequeña duda

de ante mano les doy las gracias buena tarde
  #2 (permalink)  
Antiguo 24/01/2012, 17:10
 
Fecha de Ingreso: febrero-2010
Mensajes: 60
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: Ocultar campo
Bueno lo que sugeriría es que con el evento change detectes cuando cambia el select; y obtengas el valor. SI el valor es Otro que ocultes el campo Proce_esp.

Lo podrías hacer muy rápido y fácil con Jquery.
  #3 (permalink)  
Antiguo 24/01/2012, 21:13
 
Fecha de Ingreso: octubre-2010
Mensajes: 107
Antigüedad: 13 años, 6 meses
Puntos: 14
Respuesta: Ocultar campo
seria algo asi, como lo dice clarkpler:

Código Javascript: 
Ver original
  1. window.onload=function(){ document.getElementById("PROCE").addEventListener("change",function(){
  2.  
  3. if(document.getElementById("PROCE").value=="Otro") {
  4.     document.getElementById("PROCE_ESP").style.display="block";}
  5. else document.getElementById("PROCE_ESP").style.display="none";
  6.  
  7. },false)}


tienes que agregarle la propiedad style="display:none;" a el input para que este oculto por defecto y solo se muestre al seleccionar "otro" en el select.
  #4 (permalink)  
Antiguo 25/01/2012, 12:35
Avatar de mexbale  
Fecha de Ingreso: septiembre-2010
Ubicación: Iztapalapa
Mensajes: 146
Antigüedad: 13 años, 7 meses
Puntos: 1
Respuesta: Ocultar campo
hola gracias por la ayuda, ya lo oculta pero cuando le doy otro no lo habilita quedo así el código:

Código Javascript: 
Ver original
  1. <script>
  2. window.onload=function(){ document.getElementById("PROCE").addEventListener("change",function(){
  3. *
  4. if(document.getElementById("PROCE").value=="Otro") {
  5. * * document.getElementById("PROCE_ESP").style.display="block";}
  6. else document.getElementById("PROCE_ESP").style.display="none";
  7. *
  8. },false)}
  9. </script>

y el input queda asi:

Código HTML: 
Ver original
  1. <input name="PROCE_ESP" type="text" id="PROCE_ESP" onkeypress="return letrasynumeros(event)" onkeyup="this.value=this.value.toUpperCase();if (this.value.length == this.getAttribute('maxlength')){tabulador(this.form,this)}" value="" size="70" style="display:none" />

pero cuando lo pruebo no me da la función no se si me pueden decir en que estoy mal

de antemano les doy las gracias buena tarde
  #5 (permalink)  
Antiguo 26/01/2012, 06:43
 
Fecha de Ingreso: octubre-2010
Mensajes: 107
Antigüedad: 13 años, 6 meses
Puntos: 14
Respuesta: Ocultar campo
ya lo acabo de probar otra vez y ese mismo codigo(sin los asteriscos) me funciona, lo prove en firefox, chrome, opera, safari e iexplorer y funciona bien en todos.
  #6 (permalink)  
Antiguo 26/01/2012, 10:53
Avatar de mexbale  
Fecha de Ingreso: septiembre-2010
Ubicación: Iztapalapa
Mensajes: 146
Antigüedad: 13 años, 7 meses
Puntos: 1
Respuesta: Ocultar campo
hola MARCASTELEON espero que estés bien.

Ami no me me funciona no se si puedas poner tu código para ver como lo hiciste tu

de antemano te doy las gracias fuerte en tu dia
  #7 (permalink)  
Antiguo 28/01/2012, 16:19
 
Fecha de Ingreso: octubre-2010
Mensajes: 107
Antigüedad: 13 años, 6 meses
Puntos: 14
Respuesta: Ocultar campo
hola,
este es el codigo(igual al que ya puse) que he provado:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin título</title>
  6.  
  7. <script>
  8.  
  9. window.onload=function(){ document.getElementById("PROCE").addEventListener("change",function(){
  10.  
  11. if(document.getElementById("PROCE").value=="Otro") {
  12.    document.getElementById("PROCE_ESP").style.display="block";}
  13. else document.getElementById("PROCE_ESP").style.display="none";
  14. },false)}
  15.  
  16.  
  17. </script>
  18.  
  19.  
  20. </head>
  21.  
  22. <body>
  23.  
  24.  
  25.  
  26. <tr>
  27.           <td>PROCEDIMIENTO PARA LA EXPULSIÓN O EXTRACCIÓN</td>
  28.           <td><div align="right">
  29.             <select name="PROCE" id="PROCE" >
  30.                     <option selected="selected">
  31.                     <option value="Cesaria">Cesaria</option>
  32.                     <option value="Forceps">Forceps</option>
  33.                     <option value="Legrado">Legrado</option>
  34.                     <option value="Otro">Otro</option>
  35.                     <option value="Ninguno">Ninguno</option>
  36.                     <option value="Se ignora">Se ignora</option>
  37.                 </select>
  38.           </div></td>
  39.         </tr>
  40.         <tr>
  41.           <td colspan="2"><div align="right">ESPECIFIQUE
  42.               <input name="PROCE_ESP" type="text" id="PROCE_ESP" onkeypress="return letrasynumeros(event)" onkeyup="this.value=this.value.toUpperCase();if (this.value.length == this.getAttribute('maxlength')){tabulador(this.form,this)}" value="" size="70" style="display:none" />
  43.           </div>
  44.           </td>
  45.         </tr> 
  46. </body>
  47. </html>
  #8 (permalink)  
Antiguo 28/02/2012, 14:52
Avatar de mexbale  
Fecha de Ingreso: septiembre-2010
Ubicación: Iztapalapa
Mensajes: 146
Antigüedad: 13 años, 7 meses
Puntos: 1
Respuesta: Ocultar campo
estimado MARCASTELEON ya lo provee y me jala bien en chrome pero lo pruebo en el iexplorer y no me jala por que sera esto este es mi codigo:


Código HTML: 
Ver original
  1. <script>
  2. function validar(){
  3.    if(document.getElementById("folio").value==""){
  4.       alert("por favor inserte el folio.");
  5. * * * document.getElementById("folio").focus();
  6. * * * return false;
  7.    }
  8.    if(document.getElementById("cve_med").value==""){
  9.       alert("por favor inserte clave de medicion.");
  10. * * * document.getElementById("cve_med").focus();
  11. * * * return false;
  12.    }
  13.    if(document.getElementById("id").value==""){
  14.       alert("por favor inserte el numero de identificación.");
  15. * * * document.getElementById("id").focus();
  16. * * * return false;
  17.    }
  18.    if(document.getElementById("folio_cer").value==""){
  19.       alert("por favor inserte el folio de certificado.");
  20. * * * document.getElementById("folio_cer").focus();
  21. * * * return false;
  22.    }
  23.    document.getElementById("formulario").submit();
  24. }
  25. </script>
  26. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  27. <html xmlns="http://www.w3.org/1999/xhtml">
  28. <head>
  29. <script type="text/javascript">
  30. function mostrarTab(obj) {
  31.     rolling=obj.scrollTop;
  32.     if(typeof obj.selectionStart == 'number') {
  33.         // Resto de navegadores
  34.         var start = obj.selectionStart;
  35.         var end = obj.selectionEnd;
  36.         obj.value = obj.value.substring(0, start)+"\t";
  37.         obj.value+= obj.value.substring(start, obj.value.length);
  38.         obj.focus();
  39.         obj.selectionStart =  obj.selectionEnd= end + 2;
  40.     } 
  41.     else if(document.selection) {
  42.         // Internet Explorer
  43.         obj.focus();
  44.         var range = document.selection.createRange();
  45.         if(range.parentElement() != obj) return false;
  46.         if (range.text != "") {
  47.             if(typeof range.text == 'string'){
  48.                 document.selection.createRange().text ="\t"+range.text;
  49.             }
  50.             else obj.value += "\t";
  51.         }
  52.         else
  53.             obj.value += "\t";
  54.     }
  55.     obj.scrollTop=rolling;
  56. }
  57. function tabulador(form,field)
  58. {
  59. var next=0, found=false
  60. var f=form
  61. //if(event.keyCode!=13) return;
  62. for(var i=0;i<f.length;i++) {
  63.     if(field.name==f.item(i).name){
  64.         next=i+1;
  65.         found=true
  66.         break;
  67.     }
  68. }
  69. //MODIFICACION A LA FUNCION &&  f.item(next).style.display!='none'
  70. while(found){
  71.     if( f.item(next).disabled==false &&  f.item(next).type!='hidden' &&  f.item(next).style.display!='none'){
  72.         f.item(next).focus();
  73.         break;
  74.     }
  75.     else{
  76.         if(next<f.length-1)
  77.             next=next+1;
  78.         else
  79.             break;
  80.     }
  81. }
  82. }
  83. </script>
  84. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  85. <title>pruebas</title>
  86. <script>
  87. *
  88. window.onload=function(){ document.getElementById("PROCE").addEventListener("change",function(){
  89. *
  90. if(document.getElementById("PROCE").value=="4") {
  91. * *document.getElementById("PROCE_ESP").style.display="block";}
  92. else document.getElementById("PROCE_ESP").style.display="none";
  93. },false)}
  94.  
  95.  
  96. </script>
  97.  
  98. </head>
  99. <body onkeypress="return pulsar(event)" bgcolor="#CC99FF" >
  100. <form name="formulario" id="formulario" action="<?=$_SERVER['PHP_SELF']?>" method="post" onSubmit="return validar()">
  101. <table width="850" border="1" align="center">
  102.   <tr>
  103.     <td><div align="center">*Folio</div></td>
  104.     <td><div align="center">
  105.       <input type="text" id="FOLIO" name="FOLIO" size="8" maxlength="8" onkeyup = "this.value=this.value.toUpperCase();if (this.value.length == this.getAttribute('maxlength')){tabulador(this.form,this)}"/>
  106.     </div></td>
  107.   </tr>
  108.   <tr>
  109.     <td><div align="center">*Clave Medicion</div></td>
  110.     <td><div align="center">
  111.       <input type="text" id="CVE_MED" name="CVE_MED" size="2" maxlength="2" onkeyup = "this.value=this.value.toUpperCase();if (this.value.length == this.getAttribute('maxlength')){tabulador(this.form,this)}"/>
  112.     </div></td>
  113.   </tr>
  114.   <tr>
  115.     <td><div align="center">Nombre</div></td>
  116.     <td><div align="center">
  117.       <input type="text" id="NOMBRE" name="NOMBRE" onkeyup = "this.value=this.value.toUpperCase();if (this.value.length == this.getAttribute('maxlength')){tabulador(this.form,this)}"/>
  118.     </div></td>
  119.   </tr>
  120.   <tr>
  121.     <td><div align="center">*ID</div></td>
  122.     <td><div align="center">
  123.       <input type="text" id="ID" name="ID" size="2" maxlength="2" onkeyup = "this.value=this.value.toUpperCase();if (this.value.length == this.getAttribute('maxlength')){tabulador(this.form,this)}"/>
  124.     </div></td>
  125.   </tr>
  126.   <tr>
  127.     <td><div align="center">*Folio de Certificado</div></td>
  128.     <td><div align="center">
  129.       <input type="text" id="FOLIO_CER" name="FOLIO_CER" size="9" maxlength="9" onkeyup = "this.value=this.value.toUpperCase();if (this.value.length == this.getAttribute('maxlength')){tabulador(this.form,this)}"/>
  130.     </div></td>
  131.   </tr>
  132.   <tr>
  133.       <td>PROCEDIMIENTO PARA LA EXPULSIÓN O EXTRACCIÓN</td>
  134.       <td>
  135.         <div align="center">
  136.           <select name="PROCE" id="PROCE">
  137.             <option selected="selected">
  138.             <option value="1">Cesaria</option>
  139.             <option value="2">Forceps</option>
  140.             <option value="3">Legrado</option>
  141.             <option value="4">Otro</option>
  142.             <option value="5">Ninguno</option>
  143.             <option value="6">Se ignora</option>
  144.           </select>
  145.           </div></td></tr>
  146.     <tr>
  147. * * * * * <td colspan="2"><div align="right">ESPECIFIQUE
  148. * * * * * * * <input name="PROCE_ESP" type="text" id="PROCE_ESP" onKeyPress="return letrasynumeros(event)" onKeyUp="this.value=this.value.toUpperCase();if (this.value.length == this.getAttribute('maxlength')){tabulador(this.form,this)}" value="" size="70" style="display:none" /></div>
  149. * * * * * </td>
  150.     </tr>
  151.   <tr>
  152.     <td colspan="2">
  153.       <div align="center">
  154.         <input type="submit" name="Guardar" value="Guardar" />
  155.         </div></td>
  156.   </tr>
  157. </table>
  158. <label><div align="center">los campos marcados con un * son obligatorios</div></label>
  159. </form>
  160. </body>
  161. </html>

lo raro es que dices tu que en iexplorer si te jala y yo lo pruebo y no me jala cual crees que sea el error

de ante mano te doy las gracias
suerte
Última edición por mexbale; 28/02/2012 a las 14:57

Etiquetas: input, campos
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


« Tema Anterior | Próximo Tema »


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