Foros del Web » Programando para Internet » Javascript » Frameworks JS »

texbox dependientes

Estas en el tema de texbox dependientes en el foro de Frameworks JS en Foros del Web. estoy haciendo un formulario paar una aplicacion pero me surgio un problema ya que quiero que ala poner un dato en el primer textbox se ...
  #1 (permalink)  
Antiguo 21/07/2010, 07:50
 
Fecha de Ingreso: octubre-2007
Mensajes: 7
Antigüedad: 17 años, 1 mes
Puntos: 0
texbox dependientes

estoy haciendo un formulario paar una aplicacion pero me surgio un problema ya que quiero que ala poner un dato en el primer textbox se llenen los demas tomando los datos de una tabla en una base de datos, alguien sabe como hacer esto que me puedan dar un ejemplo para partir de ahi y solucionar mi duda gracias.
  #2 (permalink)  
Antiguo 21/07/2010, 07:55
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.734
Antigüedad: 15 años, 5 meses
Puntos: 1517
Respuesta: texbox dependientes

Eso lo podrías lograr con AJAX sin que se recargue la página y con el evento onblur que es al salir del campo haga la petición. Te recomiendo que leas sobre el tema para que lo puedas lograr.
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #3 (permalink)  
Antiguo 21/07/2010, 08:53
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años, 5 meses
Puntos: 2135
Tema movido desde PHP a AJAX
  #4 (permalink)  
Antiguo 21/07/2010, 16:54
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 10 meses
Puntos: 126
Respuesta: texbox dependientes

Hola

Prueba con esto
Código Javascript:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
  3. <head>
  4. <meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
  5. <script type="text/javascript">
  6.  var ns4 = (document.layers)? true:false
  7. var ie4 = (document.all)? true:false
  8. var ns6 = (document.getElementById)? true:false
  9.  
  10. function captura_objeto(idnombre) {
  11.     if (ns6)
  12.     {
  13.     return document.getElementById(idnombre);
  14.     }
  15.     else if (ie4)
  16.     {
  17.     return document.all[idnombre];
  18.     }
  19.     else if (ns4)
  20.     {
  21.     return document.layers[idnombre];
  22.     }
  23.     else
  24.     {
  25.     return null;
  26.     }
  27. }
  28.  
  29.  
  30. function creaAjax(){
  31.     var ajaxs = ["Msxml2.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLH TTP.5.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];
  32.     var ajax = false;
  33.     for(var i=0 ; !ajax && i<ajaxs.length ; i++){
  34.         try{
  35.             ajax = new ActiveXObject(ajaxs[i]);   // Internet Explorer
  36.         }
  37.         catch(e) {
  38.             ajax = false;
  39.         }
  40.     }
  41.     if(!ajax && typeof XMLHttpRequest!='undefined') {
  42.         ajax = new XMLHttpRequest();  // Firefox, Opera 8.0+, Safari
  43.     }
  44.     return ajax;
  45. }
  46.  
  47.  
  48. function MuestraDatos(id) {
  49. var url = "usuario_ajax.php"
  50. var ajax=creaAjax();
  51. var objetosel1 = captura_objeto("nombre");
  52. var objetosel2 = captura_objeto("privilegio");
  53. ajax.open('POST',url,true);
  54. ajax.onreadystatechange = function() {
  55.  
  56.         if (ajax==null){
  57.         alert ("Tu navegador web no soporta AJAX!");
  58.         return;
  59.     }
  60.  
  61.         if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3) {
  62.                                           objetosel1.value= "";
  63.              }
  64.  
  65.                  else if (ajax.readyState==4){
  66.                        if(ajax.status==200){          
  67.             var valores = unescape(ajax.responseText);    
  68.             objetosel1.value = valores.split(",")[0];
  69.             objetosel2.value = valores.split(",")[1];
  70.  
  71.                    }
  72.                        else if (ajax.status==404)
  73.                                              {
  74.  
  75.                                     objetosel1.value = "La dirección no existe";
  76.                                              }
  77.                                      else
  78.                                              {
  79.                                     objetosel1.value = "Se ha producido un error";
  80.                                              }
  81.                                     }
  82.                   }
  83.    
  84.     ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  85.              ajax.setRequestHeader('Content-Length', id.length);    
  86.     ajax.send(id);
  87.             return
  88. }
  89.  
  90.  
  91. function Evento() {
  92. var elemento = document.getElementById('usu');
  93. var nomevento = "change";
  94. var funcion = function() {
  95. MuestraDatos('idusuario='+document.getElementById('usu').options[document.getElementById('usu').selectedIndex].value);
  96. }
  97.       if (elemento.attachEvent)
  98.   {
  99.       var f=function(){
  100.         funcion.call(elemento,window.event);
  101.     }
  102.     elemento.attachEvent('on'+nomevento,f);
  103.     return true;
  104.   }
  105.   else  
  106.     if (elemento.addEventListener)
  107.     {
  108.       elemento.addEventListener(nomevento,funcion,false);
  109.       return true;
  110.     }
  111.     else
  112.       return false;
  113. }
  114.  
  115.  
  116. window.onload = Evento;
  117. </script>
  118. </head>
  119. <body>
  120. <form>
  121. Usuario <select name="usu" id="usu">
  122. <option value="">Selecciona Usuario</option>
  123. <option value="1">1</option>
  124. <option value="2">2</option>
  125. <option value="3">3</option>
  126. <option value="4">4</option>
  127. </select>
  128. <br /><br /><br />
  129. Nombre: <input type="text" id="nombre" name="nombre" value="" readonly /><br />
  130. Privilegios: <input type="text" id="privilegio" name="privilegio" value="" readonly />
  131.  
  132. </form>
  133. </body>
  134. </html>

usuario_ajax.php
Código PHP:
Ver original
  1. <?php
  2. $idusuario = $_POST["idusuario"];
  3.  
  4. include($_SERVER["DOCUMENT_ROOT"]."/ink_utiles/ink_comunesbd.inc.php");  
  5. $bd = new ClassConexionBD('database');
  6. $bd->ConexionBD();
  7.  
  8. $sql = $bd->consulta("SELECT nombre, privilegio FROM Usuarios WHERE Id = '".$idusuario."'");
  9.  
  10. if($bd->RS($sql)>0){  
  11.     while($registros = $bd->arreglo($sql)){  
  12.         echo $registros["nombre"]. ","  .$registros["privilegio"];
  13.     }
  14. }
  15. $bd->limparRS($sql);
  16. $bd->limpiarCon();
  17. ?>
Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #5 (permalink)  
Antiguo 27/07/2010, 12:18
 
Fecha de Ingreso: octubre-2007
Mensajes: 7
Antigüedad: 17 años, 1 mes
Puntos: 0
Respuesta: texbox dependientes

muchas gracias adler tu codigo me sirvio de maravilla hasta pronto

Etiquetas: dependientes, 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 07:20.