On load/valida combobox/ JScript/ Cambiar Imagenes dentro d textbox Css con JS

Hs_Jeldres · #1 (**permalink**) 06/04/2011, 21:07

He preguntado arto y agradesco sus comentarios en mis preguntas novatas dentro del foro, ahora es hora de devolver un poco la mano con mi primer aporte donde vemos de todo un poquito.

usamos 4 combobox en ejemplo solo puse 1 para capturar distintas selecciones tomar los valores para pasarlos a un procedimiento almacenado validando que el campo mes sea obligatorio y alertando y desactivando el boton enviar( Consulta ) en caso de que este no este seleccionado,

el resultado de la MySqli_query lo ponemos en un campo de texto, y con la funcion onload del body y un java script llamado cambiar() que asigna una imagen al backgrund del textbox dependiendo del valor de este
ej de

0 a 3 simbolo nocumplio
4 a 5 simbolo maoma
6 a 7 simbolo bkn

Código HTML:

Ver original<html>
<head>
<title>tutorial varios</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="simbolos/clase.css"  type="text/css" />
</head>
<body onLoad="cambiar()">
<script language="javascript">
function cambiar()
{
    if((parseInt(document.getElementById('r1').value)>=0) && (parseInt(document.getElementById('r1').value)<=3))
    {
        document.getElementById("r1").className ="foto1";
    }
    else if((parseInt(document.getElementById('r1').value)>=4) && (parseInt(document.getElementById('r1').value)<=5))
    {
        document.getElementById("r1").className ="foto2";
    }
    else if(parseInt(document.getElementById('r1').value)>=6)
    {
        document.getElementById("r1").className ="foto3";
    }
}
</script>
<script language="javascript">
function valida_mes()
{
    var Combo = document.getElementById('m1').value;
    if(Combo=="Seleccione Mes")
    {
        document.getElementById("envia").disabled = true;
        alert('La seleccion del Mes es Obligatoria');
    }
    else
    {
        Combo== document.getElementById('m1').value;
        document.getElementById("envia").disabled = false;
    }
}
</script>
 
<form name="form" action="tutorial.php" method="post">
<select  name="mes_" id="m1"  onchange="valida_mes()">
<option>Seleccione Mes</option>
<?php
include("conexion4.php");
$link=Conectarse();
$result = mysql_query("SELECT id_mes FROM pagina_mes ");
while ($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
    echo '<option>'.$row["id_mes"].'</option>';
}
mysql_free_result($result);?> </select>         
 
<input name="Submit" type="submit" id="envia" value="Enviar" disabled="true" onClick="valida_mes()">  
</form>
<input type=text name=r_pas size="10" maxlength="16"  id="r1" value="    <?php
include("conexion2.php");
$ato=$_POST["ato"];
$nego=$_POST["nego"];
$opera=$_POST["opera"];
$mes_=$_POST["mes_"];
$query = "CALL sp_cal_pax('".$ato."','".$nego."','".$opera."','".$mes_."')";
mysqli_multi_query($link, $query);
$result = mysqli_store_result($link);
while ($row = mysqli_fetch_row($result))
{
echo "$row[0]";
}
?>">
</body>
</html>

envio el archivo clase.css con el cual se asignan las imagenes (simbolos al fondo del textbox)

Código CSS:

Ver original/* CSS Document */
.foto1 {
size:10;
background-image:url(nocumplio.jpg);
background-repeat:no-repeat;
}
.foto2 {
size:10;
background-image:url(maoma.jpg);
background-repeat:no-repeat;
}
.foto3 {
size:10;
background-image:url(bkn.jpg);
background-repeat:no-repeat;
}

espero sea de utilidad, y denuevo gracias por ayudar y comentar, porque es la motivacion para seguir aprendiendo, saludos .

GatorV · #2 (**permalink**) 06/04/2011, 21:55

Tema movido desde PHP a Javascript