llenar input con ajax

[juanjofabila]

Mi pregunta es la siguiente!

Se puede llenar un text input sin actualizar la pagina, obteniendo el valor de una base de datos mysql?

La idea es llenar un primer text input y dependiendo de eso hacer la consulta y mostrarla en un segundo text input sin refrescar la pagina.

Espero que se haya entendido. Gracias de antemano.

[MARCASTELEON]

Hola,

Si se puede, mediante ajax llamas a un php y este le hace la consulta a la base de datos y le regresa la respuesta a la peticion ajax.

[juanjofabila]

Iniciado por MARCASTELEON

Hola,

Si se puede, mediante ajax llamas a un php y este le hace la consulta a la base de datos y le regresa la respuesta a la peticion ajax.

MMM esto es importante para mi trabajo, crees que me puedas ayudar? honestamente no tengo idea de como empezar, he hecho algunas aplicaciones de autocomplete con jquery y supongo que es la misma idea, pero mi cabeza no da para mas, gracias!

[MARCASTELEON]

Hola,

Si te puedo ayudar, para eso estamos, seria buenno que pongas el codigo de los text input y que me expliques mejor como es el sistema.

[juanjofabila]

Iniciado por MARCASTELEON

Hola,

Si te puedo ayudar, para eso estamos, seria buenno que pongas el codigo de los text input y que me expliques mejor como es el sistema.

OK MUCHAS GRACIAS.

Tengo el siguiente codigo, cuando escribo en el text input "buscar_Articulo" realiza la funcion de autocomplete, que busca los datos en mi base de datos, lo que quiero es que en cuanto me cambie de text input (se me ocurre que en el evento onfocus se rellene el valor del precio en el campo precio_unitario).

Espero ser lo mas claro posible. y agradezco infinitamente la ayuda.

Código HTML:

<link type="text/css" rel="stylesheet" href="style/jquery-ui-1.8.17.custom.css" />
<script type="text/javascript" src="scripts/script.js"></script>
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.17.custom.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.autocomplete.js"></script>
 
<script type="text/javascript">
    $(function(){
        $('#buscar_Articulo').autocomplete({ 
            source: 'ajax.php',         
        });
    });
</script>
 
<div>
<table>
            <tr>
                <th>Artículo</th>
                <th>Cantidad</th>
                <th>Ancho</th>
                <th>Alto</th>
                <th>Cadena</th>
                <th>Control</th>
                <th>Precio Unit.</th>
                <th>Subtotal</th>
            </tr>
            <tr>
                <td><input type="text" id="buscar_Articulo" name="buscar_Articulo" size="30" /></td>
                <td><input type="text" id="cantidad" name="cantidad" size="4" /></td>
                <td><input type="text" id="ancho" name="ancho" size="4" /></td>
                <td><input type="text" id="alto" name="alto" size="4" /></td>
                <td><select name="cadena" id="cadena">
                    <option>Plastico</option>
                    <option>Metal</option>
                </select></td>
                <td><select name="control" id="control">
                    <option>Izquierdo</option>
                    <option>Derecho</option>
                </select></td>
                <td><input type="text" id="precio_unitario" name="precio_unitario" size="4" onfocus="" /></td>
                <td><input type="text" id="subtotal" name="subtotal" size="4" onfocus="" /></td>
            </tr>    
        </table>
</div>
 

[MARCASTELEON]

Hola,

Lo primero es crear la funcion que se encargue hacer la peticion al php y este a la base de datos, asi:

Código Javascript:

function cargar(inputValue)
{
 
 
var ajax=(window.XMLHttpRequest)? new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
  
 
ajax.onreadystatechange=function()
  {
  if (ajax.readyState==4 && ajax.status==200)
    {
    document.getElementById("precio_unitario").value=ajax.responseText;
    }
  }
ajax.open("GET","consulta.php?p="+inpuValue,true);//consulta.php es el archivo php que se encargara de hacer la consulta a la base de datos
ajax.send(null);
}
 
 
//con esta funcion comprovamos que no se hagan consultas cuando el valor de input sea ""
function buscar(){
if(document.getElementById('buscar_Articulo').value!="") 
cargar(document.getElementById('buscar_Articulo').value)    
}
 

en el html, como lo decias, le puedes agregar un evento a los input para que ejecuten la funcion "buscar" y esta ejecutara "cargar"

Código HTML:

<input id="cantidad" onfocus="buscar()" />
<input id="ancho" onfocus="buscar()" />
....
...
..
.
 

"consulta.php" se encarga de mediar entre la base de datos y la paticion ajax.

ahora, tienes ya creada la base de datos?, es MySQL?