doble evento OnChange??

oscarbt · #1 (**permalink**) 27/09/2010, 14:59

Buenas a todos, tengo un formulario donde solicito a un usuario q me seleccione el tipo de numero e ingresar (entero, fraccionario o radical) .

He validado q en el momento que me seleccione tipo de numero entero, me aparezca una caja de texto para el ingreso de ese numero, lo que deseo es que en el momento que seleccione fraccionario, me aparezcan dos cajas de texto (para el numerador y para el denominador), como podria hacer eso?...se trata de un otro evento Onchange?..como lo aplico si ya tengo uno?

Aca el código

Código HTML:

Ver original<form>
<select onchange = "entero.style.visibility = (this.selectedIndex==0) ? 'hidden' : 'visible'">
<option>Seleccione tipo de numero</option>
<option>Entero</option>
<option>Fraccionario</option>
</select>
<input type="text" name="entero" style = "visibility:hidden" />
 
 
</form>

Como hago para q aparezcan dos cajas de texto al selecionar fraccionario???

Agradezco me puedan colaborar..Muchas Gracias

Milen · #2 (**permalink**) 27/09/2010, 18:55

Eso se logra con Ajax, y si, debes en el evento onChange llamar una función ajax q reciba el value del select, para q haga un request a otro archivo en el q se dibujen 1 o 2 cjas de texto segun la opcion q hayas elegido.

emprear · #3 (**permalink**) 28/09/2010, 14:07

oscarbt:

No es necesario recurrir a ajax, con esta script lo podés hacer

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
<head>
<title>Ocultar/mostrar inputs onchange</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="x" />
<meta name="keywords" content="x" />
<meta http-equiv="Content-Language" content="ES" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="copyright" content="&copy; 2006, Guillermo Gianello" xml:lang="es" lang="es" />
<meta name="author" content="http://emprear.com"  xml:lang="es" lang="es" />
 
<style type="text/css">
/*<![CDATA[*/
 
input#entero, input#frac {
display: none;
border: solid 2px #000;
}
 
/*]]>*/
</style>
 
<script type="text/javascript">
//<![CDATA[
 
function generar_inputs(){
 
  var valor = document.numeros.tipo.options[document.numeros.tipo.selectedIndex].value;
  var campo_entero = document.getElementById('entero'); 
  var campo_frac = document.getElementById('frac'); 
 
  var dis_e = campo_entero.style;
  var dis_f = campo_frac.style;
  alert(valor);
 
if(valor =='entero'){
 dis_e.display = 'block';
 dis_f.display = 'none';
}else if(valor =='frac'){
 dis_e.display = 'block';
 dis_f.display = 'block';
}else{
 dis_e.display = 'none';
 dis_f.display = 'none';
}
 
}
 
//]]>
</script>
</head>
<body>
<div>
<form name="numeros" method="post" action="#">
<select name="tipo" onchange="generar_inputs();">
<option selected="selected" value="">Seleccione tipo de número</option>
<option value="entero">Entero</option>
<option value="frac">Fraccionario</option>
</select>
<input type="text" id="entero" name="entero" value="1000" size="4" />
<input type="text" id="frac" name="frac" value="005" size="3" />
</form>
</div>
<!-- ©2000 Emprear.com -->
</body>
</html>

una demo en
http://foros.emprear.com/jsdemo/comb..._campo_oc.html

Saludos