selecionar opcion

carriofamily · #1 (**permalink**) 01/07/2012, 07:03

hola
necesito saber como puedo hacer q cuando este selcecionada una opcion de una lista desplegable de un formulario en html, se que se tiene q hacer con javascript pero nose q tengo q poner onclick onmousover....

gracias

IsaBelM · #2 (**permalink**) 01/07/2012, 07:21

desarrolla de nuevo tu exposición y esta vez haz una pregunta

carriofamily · #3 (**permalink**) 01/07/2012, 07:58

Buenas
estoy haciendo una paguina web y tengo un lista desplegable(un menu select) y con javascript he conseguido q al seleccionar una ocion (porcentaje me aparezca un % al lado, pero esto solo sucede en firefox mi pregunta es ¿como ago q funcione en google chrome o safari?

el codigo es;

Código HTML:

<table width="389">
      <tr>
        <td  class="num"width="87"><center><input type="text" name='num' id="textfield" size="10" value="<?php echo $num; ?>" /></center></td>
        <td class="basic" width="120"><select name="basic" >
          <option value="suma">+ Sumar</option>
          <option value="resta">- Restar</option>
          <option value="multi">X 2Multiplicar</option>
          <option value="div">/ Dividir</option>
          <option value="cuadrado">x2</option>
          <option value="bicuadrado">x4</option>
          <option value="porcent" onclick="document.getElementById('porcien').style.visibility='visible';">% Porcentaje</option>
        </select>
        </td>
        <td class="num2" width="118"><center><input type="text" name="num2" size="10" value="<?php echo $num2; ?>"/><b style="
	visibility:hidden;" id="porcien"> %</b></center></td>
        <td width="38" class="igual"><center><input type="submit" name="button" id="button" value="=" /></center></td>
        
      </tr>

esto es parte del codigo

NSD · #4 (**permalink**) 01/07/2012, 09:24

hola acabo de hacer este codigo en chrome y creo que anda en cualquier otro navegador aunque no lo he probado te lo dejo a ver si te sirve (esta de mas decir que lo modificaras y adaptaras a tus nesesidades)

Código HTML:

Ver original<head>
<script type="text/javascript">
    function cargarcuenta(){ //Funcion que actualizara los datos
        lacuenta=Formulario.num.value; //Tomo el valor del primer numero por defecto
        switch (Formulario.basic.value) { //Segun que operacion este en el select pongo el simbolo adecuado
        case 'suma':
          lacuenta=lacuenta+' + '+Formulario.num2.value; //Le concateno tambien el segundo numero y que es nesesario
        break;
 
        case 'resta':
          lacuenta=lacuenta+' - '+Formulario.num2.value; //Le concateno tambien el segundo numero y que es nesesario
        break;
 
        case 'multi':
          lacuenta=lacuenta+' * '+Formulario.num2.value; //Le concateno tambien el segundo numero y que es nesesario
        break;
 
        case 'div':
          lacuenta=lacuenta+' / '+Formulario.num2.value; //Le concateno tambien el segundo numero y que es nesesario
        break;
 
        case 'cuadrado':
          lacuenta=lacuenta+' ^2 '; //No le pongo el segundo numero
          Formulario.num2.value=''; //Borro el segundo numero para mayor claridad
        break;
 
        case 'bicuadrado':
          lacuenta=lacuenta+' ^4 '; //No le pongo el segundo numero
          Formulario.num2.value=''; //Borro el segundo numero para mayor claridad
        break;
 
        case 'porcent':
          lacuenta=lacuenta+' % '+Formulario.num2.value; //Le concateno tambien el segundo numero y que es nesesario
        break;
          
        default:
          lacuenta="Error ID=1074"; //En caso de que se ingrese alguna opcion nueva e ivalida al select pongo un error convencional
        }
        Formulario.operacion.value=lacuenta; //Muestro la operacion abajo
    }
</script>
</head>
<body>
    <form id="Formulario" name="Formulario" >
        <table width="389">
              <tr>
                <td  class="num"width="87">
                    <center>
                        <input type="text" name='num' id="num" size="10" value="<?php echo $num; ?>" onblur="cargarcuenta();" />
                    </center>
                </td>
                <td class="basic" width="120">
                    <select name="basic" id="basic" onchange="cargarcuenta();">
                      <option value="suma">+ Sumar</option>
                      <option value="resta">- Restar</option>
                      <option value="multi">X 2Multiplicar</option>
                      <option value="div">/ Dividir</option>
                      <option value="cuadrado">x2</option>
                      <option value="bicuadrado">x4</option>
                      <option value="porcent">% Porcentaje</option>
                    </select>
                </td>
                <td class="num2" width="118">
                    <center>
                        <input type="text" name="num2" id="num2" size="10" value="<?php echo $num2; ?>" onblur="cargarcuenta()";/>
                    </center>
                </td>
                <td width="38" class="igual">
                    <center>
                        <input type="submit" name="button" id="button" value="=" />
                    </center>
                </td> 
                <td class="num2" width="118">
                    <center>
                        <input type="text" name="resultado" id="resultado" size="10" value="" />
                    </center>
                </td>   
              </tr> 
        </table>
        <input type="text" name="operacion" id="operacion" size="10" value="" readOnly />
    </form>
</body>

PD: Si solo quieres poner un simbolo al lado del resultado y la cuenta la haces en php puedes concatenar $resultados.='%'; y listo si lo haces por javacript basate en mi codigo y podras con un poco de maña lograrlo saludos

carriofamily · #5 (**permalink**) 01/07/2012, 10:01

muchas gracias por tu respuesta tan rapida pero lo que yo queria era que al seleccionar la opcion porcentage al lado del input num2 me saliera un porcien(%) y yo ya lo habia conseguido y funciona perfectamente en firefox pero cuando ago lo mismo en crhome no funciona,

pd: ahora he añadido q cuando seleciones cuadrado o bicuadrado quite el input num2

pongo el codigo de la paguina entera es un poco lioso perdon esque acabo de empezar

Código HTML:

<?php


session_start();

	
if($_SESSION['user']=="")
{
header("location: index.php");

}
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>

<style type="text/css">
.num {
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-right-style: solid;
	border-top-color: #F00;
	border-right-color: #F00;
	border-bottom-color: #F00;
	border-left-color: #F00;
}
.abajo {
	background-color: #FC7208;
	margin: auto;
	width: 682px;
	padding-top: 15px;
	padding-bottom: 15px;
	bottom: 100px;
}
footer {
	font-size: xx-large;
	color: #CCC;
	background-color: #FC7208;
	margin: auto;
	width: 682px;
	padding-top: 25px;
	padding-bottom: 25px;
	border-radius: 0px 0px 30px 30px;
	text-align: center;
	font-family: "Lucida Console", Monaco, monospace;
}

.basic {
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-right-style: none;
	border-top-color: #F00;
	border-right-color: #F00;
	border-bottom-color: #F00;
	border-left-color: #F00;
}
body {
	background-image: url(http://us.cdn4.123rf.com/168nwm/kentoh/kentoh1002/kentoh100200114/6372054-arte-de-fondo-de-patron-de-madera-como-elemento-de-diseno.jpg);
	background-repeat: repeat;
}
.num2 {
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #F00;
	border-right-color: #F00;
	border-bottom-color: #F00;
	border-left-color: #F00;
}
table {
	border: medium solid #666;
	height: auto;
	width: auto;
}
.igual {
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-left-style: solid;
	border-top-color: #F00;
	border-right-color: #F00;
	border-bottom-color: #F00;
	border-left-color: #F00;
}
.result {
	color: #000;
	font-family: Digital-7;
	font-size: 100px;
	text-align: center;
	font-style: oblique;
	margin: auto;
	position: relative;
	top: 95px;
}
#button {
	margin: 0px;
	height: 40px;
}
.bajoigu {
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-left-style: solid;
	border-top-color: #F00;
	border-right-color: #F00;
	border-bottom-color: #F00;
	border-left-color: #F00;
	border-top-style: none;
	border-right-style: none;
}
.calcup {
	background-image: url(imagenes/XAMPP%20Control.png);
	background-repeat: repeat-x;
	height: 230px;
	width: 500px;
	margin: auto;
}
.laterales {
	background-image: url(imagenes/laterales.png);
	background-repeat: no-repeat;
	margin: auto;
	width: 682px;
	border-radius: 30px 30px 0px 0px;
	height: 230px;
}
.borde {
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-right-style: solid;
	border-top-color: #F00;
	border-right-color: #F00;
	border-bottom-color: #F00;
	border-left-color: #F00;
}
footer a {
	font-family: "Lucida Console", Monaco, monospace;
	font-size: 36px;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	text-align: center;

	
}

</style>
</head>

<body><div class="laterales"><div class="calcup">
<div class="result"><?php 
	
$num=$_POST['num'];
$num2=$_POST['num2'];
$basic=$_POST['basic'];


if($basic=='suma'){
	$ok= $num + $num2;
}elseif($basic=='resta'){
	$ok= $num - $num2;
}elseif($basic=='multi'){
	$ok= $num * $num2;
}elseif($basic=='div'){
	$ok= $num / $num2;
}elseif($basic=='cuadrado'){
	$ok= $num * $num;
}elseif($basic=='bicuadrado'){
	$ok=$num * $num * $num * $num;
}
elseif($basic=='porcent'){
	$ok=($num2 / 100) * $num;

}
echo $ok;?></div>
</div></div><div class="abajo">
<form action="calculator.php" method="post"><center><table width="423">
      <tr>
        <td  class="num"width="120"><center><input type="text" name='num' id="textfield" size="10" value="<?php echo $num; ?>" /></center></td>
        <td class="basic" width="112"><center><select name="basic" >
          <option value="suma" onclick="document.getElementById('num2').style.display='table-cell';   document.getElementById('porcien').style.display='none';">+ Sumar</option>
          <option value="resta" onclick="document.getElementById('num2').style.display='table-cell';   document.getElementById('porcien').style.display='none';">- Restar</option>
          <option value="multi" onclick="document.getElementById('num2').style.display='table-cell';   document.getElementById('porcien').style.display='none';">X Multiplicar</option>
          <option value="div" onclick="document.getElementById('num2').style.display='table-cell';   document.getElementById('porcien').style.display='none';">/ Dividir</option>
          <option value="cuadrado" onclick="document.getElementById('num2').style.display='none';     document.getElementById('porcien').style.display='none';">x2</option>
          <option value="bicuadrado" onclick="document.getElementById('num2').style.display='none'; document.getElementById('porcien').style.display='none';">x4</option>
          <option value="porcent" onclick="document.getElementById('porcien').style.display='inline'; document.getElementById('num2').style.display='table-cell';">% Porcentaje</option>
        </select></center>
        </td>
        <td id="num2" width="127" class="num2" ><center><input type="text" name="num2" size="10" value="<?php echo $num2; ?>"/><b style="display:none" id="porcien"> %</b></center></td>
        <td width="38" class="igual"><center><input type="submit" name="button" id="button" value="=" /></center></td>
        
      </tr>
      <div class="borde"> </div>
  </table></center></form>
</div><footer><a href="usuario.php">Regresar</a>/<a href="salir.php">salir</a></footer>
</body>
</html>

NSD · #6 (**permalink**) 01/07/2012, 12:31

Bien acabo de fijarme y para empezar te doy algunos consejos y pautas generales:

1_Intenta razonar antes de preguntar ten en cuenta que estas aprendiendo y la pregunta es solo el ultimo recurso.

2_IDENTA EL CODIGO!!! es muy dificil de leerlo asi como esta

3_Trata de no repetir codigo para funciones similares, esto solo hara que tu pagina engorde y se haga mas pesada pero no que cresca.

4_Algun comentario cada tanto no esta de mas, piensa que tu no eres el unico que la va a leer o piensa en ti mismo dentro de 3 meses ¿Crees que en 3 meses tu entenderas tu propio codigo asi desprolijo? recuerda: "Comentar un codigo es como limpiar el baño, nadie quiere hacerlo pero a la larga tu y tus visitas lo agradeceran"

5_A las unidades agregales el 'px' al final, el numero solo puede que algunos navegadores no lo tomen bien sobre todo el cancerigeno IE

6_Los estilos css y el javascrit ponlo en archivos externos y llamalos de esta manera tu pagina pesara menos y se cargara un poco mas rapido, aunque asta que no se cargue por completa el visitante vera la pantalla en blanco.

7_No uses etiquetas repetidamente de forma innesesaria, en ves de usar un "<center>" dentro de cada "<td>" usa el atributo css:"td { text-align:center }" de esta manera logras el mismo efecto con menos codigo y ademas para eso esta CSS.

8_El css esta bien pero podria ser mas breve, en lugar de poner el color de cada uno de los bordes (teniendo en cuenta que es el mismo) pones uno solo general.

no es a modo de critica sino a modo de sugerencia personal despues de todo no soy nadie para criticarte.

Volviendo al tema aqui te paso tu codigo IDENTADO y COMENTADO para que lo entiendas, si algo no te queda claro pregunta y te lo explicare espero te sirva saludos.

Código HTML:

Ver original<?php
    //Valido al visitante, si esta logueado lo dejo ver sino lo mando al index.php
    session_start();
    
    if($_SESSION['user']=="") {
        header("location: index.php");
    }
?>
<!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">
    <head>
    <!--INFORMACION DE LA PAGINA-->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Documento sin título</title>
    <!--JAVASCRIPT-->
        <script type="text/javascript">
            function cargar_texto(id,texto){ //Recibe un ID del div donde pondra un texto y un TEXTO que pondra en ese div, puedes usarla fuera de esto para otras utilidades ;)
                var contenedor = document.getElementById(id); //Define al Div con ese ID
                contenedor.innerHTML = texto; //Le pone el texo que le ayas dicho o lo limpia si el texto es vacio ('')
            }
            function mostrarporcentaje() //La que desidira que mostrar segun la opcion
            {
                switch (Formulario.basic.value) { //Segun que operacion este en el select pongo el simbolo adecuado, para quitar alguno borra la linea que aparece comentada pero no el case, o bien remplaza todo el swich por esto:
                
                    //if (Formulario.basic.value=='porcent') {
                    //  cargar_texto('icono','%'); //Le pongo el simbolo de la operacion
                    //} else {
                    //  cargar_texto('icono','%'); //Le pongo el simbolo de la operacion
                    //}
                    //Si remplazas el switch por esto la funcion no sera reutilizable y solo servira para este caso puntual, no lo recomiendo pero queda en ti desidir eso
                    
                    case 'suma':
                      cargar_texto('icono','+'); //Le pongo el simbolo de la operacion
                    break;
 
                    case 'resta':
                      cargar_texto('icono','-'); //Le pongo el simbolo de la operacion
                    break;
 
                    case 'multi':
                      cargar_texto('icono','*'); //Le pongo el simbolo de la operacion
                    break;
 
                    case 'div':
                      cargar_texto('icono','/'); //Le pongo el simbolo de la operacion
                    break;
 
                    case 'cuadrado':
                      cargar_texto('icono','^2'); //Le pongo el simbolo de la operacion
                      Formulario.num2.value=''; //Borro el segundo numero para mayor claridad
                    break;
 
                    case 'bicuadrado':
                      cargar_texto('icono','^4'); //Le pongo el simbolo de la operacion
                      Formulario.num2.value=''; //Borro el segundo numero para mayor claridad
                    break;
 
                    case 'porcent':
                      cargar_texto('icono','%'); //Le pongo el simbolo de la operacion
                    break;
 
                    default:
                      lacuenta="Error ID=1074"; //En caso de que se ingrese alguna opcion nueva e ivalida al select pongo un error convencional
                }
            }
        </script>
    <!--ESTILO CSS-->
        <style type="text/css">
        footer a {
            font-family: "Lucida Console", Monaco, monospace;
            font-size: 36px;
            font-weight: bold;
            color: #000;
            text-decoration: none;
            text-align: center;
        }
        td{
            text-align:center;
        }
        #icono{
            font-weight:bold;
            float:right;
        }
        </style>
    </head>
 
    <body>
 
        <div class="laterales">
            <div class="calcup">
                <!--Esto nose que funcion tiene pero estaria bueno aclararlo-->
                <div class="result">
                    <?php
 
                        $num=$_POST['num'];
                        $num2=$_POST['num2'];
                        $basic=$_POST['basic'];
 
                        if($basic=='suma'){
                            $ok= $num + $num2;
                        } elseif($basic=='resta') {
                            $ok= $num - $num2;
                        } elseif($basic=='multi') {
                            $ok= $num * $num2;
                        } elseif($basic=='div') {
                            $ok= $num / $num2;
                        } elseif($basic=='cuadrado') {
                            $ok= $num * $num;
                        } elseif($basic=='bicuadrado') {
                            $ok=$num * $num * $num * $num;
                        } elseif($basic=='porcent') {
                            $ok=($num2 / 100) * $num;
                        }
 
                        echo $ok;
 
                    ?>
                </div>
            </div>
        </div>
 
        <div class="abajo">
            <form action="calculator.php" method="post" ID="Formulario" Name="Formulario">
                <center>
                    <table width="423px">
                        <tr>
                            <td class="num"width="120px">
                                <!--Primer numero a operar-->
                                <input type="text" name='num' id="textfield" size="10px" value="<?php echo $num; ?>" />
                            </td>
                            <td class="basic" width="112px">
                                <!--Operaciones posibles-->
                                <select name="basic" id="basic" onchange="mostrarporcentaje();">
                                    <option value="suma">+ Sumar</option>
                                    <option value="resta">- Restar</option>
                                    <option value="multi">X Multiplicar</option>
                                    <option value="div">/ Dividir</option>
                                    <option value="cuadrado">x2</option>
                                    <option value="bicuadrado">x4</option>
                                    <option value="porcent">% Porcentaje</option>
                                </select>
                            </td>
                            <td id="num2" width="127px" class="num2" >
                                <!--Segundo numero a operar-->
                                <input type="text" name="num2" size="10px" value="<?php echo $num2; ?>" />                          
                                <!--Muestro icono segun la operacion-->
                                <div id="icono" name="icono"></div>
                            </td>
                            <td width="38px" class="igual">
                                <!--Boton para calcular-->
                                <input type="submit" name="button" id="button" value="=" />
                            </td>
                        </tr>           
                    </table>
                    <div class="borde"></div>
                </center>
            </form>
        </div>
        <footer>
            <a href="usuario.php">Regresar</a>/<a href="salir.php">salir</a>
        </footer>
    </body>
</html>

PD: Me llevo tiempo hacerlo asi que espero que lo valores y lo utilices para mejorar tus codigos en el futuro.

PD2: Faltan las primeras lineas de CSS ya que sino el mensaje es muy largo para postearlo "El texto que has ingresado es muy largo (10587 caracteres). Por favor acórtalo a 10000 caracteres de largo."

carriofamily · #7 (**permalink**) 01/07/2012, 16:39

Muchas gracias por tu ayuda y tomo nota de tus suguerencia, y lo de que pongo muchas veces el color del borede es porq uso dreamweaver y al ponerlos desde un panel los pone asi automaticamente y las etiquetas center eran para centrar los campos de texto q con css no funcionaba.

tengo otra pequeña duda, nose porq y solo me sucede en esta paguina q la div del es el resultado, la posiciono relativamente a 95px del top y en google chrome esta situada en su sitio, pero en firefox sale desplazado bastante mas abajo, para q encage tengo q poner 65px, y solo sucede con esa paguina porque en otras tambn e usado posicionamiento relativo y me sale exactamente igual en uno q en otro. es el codigo de antes ya lo he intentado tdo lo que se me ha ocurrido y nose como solucionarlos ¿alguien sabe solucionarlo?

pd: tambien si con css al boton enviar le pongo una det. altura en chrome no me sale y firefox si.

NSD · #8 (**permalink**) 02/07/2012, 06:38

mmm esas son las pequeñas diferencias entre los navegadores, me temo que nunca podras lograr que se vea exactamente igual en todos siempre, prueba con position:absolute y juega con los margenes a ver si se puede, cualquier cosa puedes revisar el foro CSS talvez alguien ya tubo un problema parecido o iniciar un nuevo tema ahi si no encuentras respuesta.