Tema: On load/valida combobox/ JScript/ Cambiar Imagenes dentro d textbox Css con JS
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/04/2011, 21:07
Avatar de Hs_Jeldres
Hs_Jeldres
 
Fecha de Ingreso: marzo-2011
Mensajes: 25
Antigüedad: 13 años, 8 meses
Puntos: 0
Información On load/valida combobox/ JScript/ Cambiar Imagenes dentro d textbox Css con JS
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
  1. <html>
  2. <head>
  3. <title>tutorial varios</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <link rel="stylesheet" href="simbolos/clase.css"  type="text/css" />
  6. </head>
  7. <body onLoad="cambiar()">
  8. <script language="javascript">
  9. function cambiar()
  10. {
  11.     if((parseInt(document.getElementById('r1').value)>=0) && (parseInt(document.getElementById('r1').value)<=3))
  12.     {
  13.         document.getElementById("r1").className ="foto1";
  14.     }
  15.     else if((parseInt(document.getElementById('r1').value)>=4) && (parseInt(document.getElementById('r1').value)<=5))
  16.     {
  17.         document.getElementById("r1").className ="foto2";
  18.     }
  19.     else if(parseInt(document.getElementById('r1').value)>=6)
  20.     {
  21.         document.getElementById("r1").className ="foto3";
  22.     }
  23. }
  24. </script>
  25. <script language="javascript">
  26. function valida_mes()
  27. {
  28.     var Combo = document.getElementById('m1').value;
  29.     if(Combo=="Seleccione Mes")
  30.     {
  31.         document.getElementById("envia").disabled = true;
  32.         alert('La seleccion del Mes es Obligatoria');
  33.     }
  34.     else
  35.     {
  36.         Combo== document.getElementById('m1').value;
  37.         document.getElementById("envia").disabled = false;
  38.     }
  39. }
  40. </script>
  41.  
  42. <form name="form" action="tutorial.php" method="post">
  43. <select  name="mes_" id="m1"  onchange="valida_mes()">
  44. <option>Seleccione Mes</option>
  45. <?php
  46. include("conexion4.php");
  47. $link=Conectarse();
  48. $result = mysql_query("SELECT id_mes FROM pagina_mes ");
  49. while ($row = mysql_fetch_array($result, MYSQL_ASSOC))
  50. {
  51.     echo '<option>'.$row["id_mes"].'</option>';
  52. }
  53. mysql_free_result($result);?> </select>         
  54.  
  55. <input name="Submit" type="submit" id="envia" value="Enviar" disabled="true" onClick="valida_mes()">  
  56. </form>
  57. <input type=text name=r_pas size="10" maxlength="16"  id="r1" value="    <?php
  58. include("conexion2.php");
  59. $ato=$_POST["ato"];
  60. $nego=$_POST["nego"];
  61. $opera=$_POST["opera"];
  62. $mes_=$_POST["mes_"];
  63. $query = "CALL sp_cal_pax('".$ato."','".$nego."','".$opera."','".$mes_."')";
  64. mysqli_multi_query($link, $query);
  65. $result = mysqli_store_result($link);
  66. while ($row = mysqli_fetch_row($result))
  67. {
  68. echo "$row[0]";
  69. }
  70. ?>">
  71. </body>
  72. </html>

envio el archivo clase.css con el cual se asignan las imagenes (simbolos al fondo del textbox)
Código CSS: 
Ver original
  1. /* CSS Document */
  2. .foto1 {
  3. size:10;
  4. background-image:url(nocumplio.jpg);
  5. background-repeat:no-repeat;
  6. }
  7. .foto2 {
  8. size:10;
  9. background-image:url(maoma.jpg);
  10. background-repeat:no-repeat;
  11. }
  12. .foto3 {
  13. size:10;
  14. background-image:url(bkn.jpg);
  15. background-repeat:no-repeat;
  16. }


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