Foros del Web » Programando para Internet » Javascript »

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

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

Etiquetas: combobox, css, imagenes, js, jscript, php, textbox
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




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