AJAX - completar un campo mediante una consulta al servidor ocupando el dato de otro campo en el formulario

completar un campo mediante una consulta al servidor ocupando el dato de otro campo en el formulario

Publicado por Debie (6 intervenciones) el 24/02/2014 21:16:36

Hola Amigos.

Les cuento. Estoy trabajando con un formulario donde tengo un input que completa el usuario, que es el valor X. Luego, en el mismo formulario tengo otro campo input que debo completar buscado la opción en el servidor. Por ejemplo,

tengo un campo Nombre y un campo Dirección. El usuario, en este caso, completa el campo Nombre. Luego la aplicación debe tomar el dato Nombre y buscar la opción en el servidor y completar de forma automática el campo dirección

Estoy trabajando con html, y trato de implementarlo con ajax, pero hasta ahora no me ha resultado porque me completa el campo con el código fuente. El código por parte del servidor está en VB, pero otro lenguaje no me haría problema entender.

si me pudieran ayudar, les estaría muy agradecida.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 90

completar un campo mediante una consulta al servidor ocupando el dato de otro campo en el formulario

Publicado por xve (222 intervenciones) el 25/02/2014 07:58:00

Hola Debie, estaria bien que mostraras tu código para poder ver donde esta el problema... de que manera devuelves los datos?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

completar un campo mediante una consulta al servidor ocupando el dato de otro campo en el formulario

Publicado por debie (6 intervenciones) el 25/02/2014 15:36:11

hola xve.

mmm, lo he hecho de muchas formas, aunque realmente me gustaría hacerlo con una función,aunque lo que tengo hasta ahora es:

//Agradezco mucho la ayuda que proporcionan tan desinteresadamente...

(en un documento que se llama pruebaAjaxs.aspx)

<html>

<head>

<title>Prueba Ajax</title>

<script src="js/funciones.js" language="JavaScript"></script>

</head>

<body>

    <div id="menu">

        <h1>probando ajax</h1>

        <table style="text-align: left">

            <tr>

                <td>Nombre</td>

                <td>:

                    <input type="text" id="nombre" name="nombre" maxlength="6" size="10" onchange="mostrarDireccion();"></td>

            </tr>

            <tr>

                <td>Dirección</td>

                <td>:

                    <input type="text" id="direccion" name="direccion" maxlength="6" size="10" readonly></td>

            </tr>

        </table>

    </div>

</body>

</html>

<%

    Dim direccion As String

    If Request.Params("nombre") = 1 Then

        direccion = "direccionA"

    ElseIf Request.Params("nombre") = 2 Then

        direccion = "direccionB"

    Else : direccion = "ninguna"

    End If

%>

luego en el documento funciones.js tengo:

addEvent(window, 'load', inicializarEventos, false);

function inicializarEventos() {

    var ob;

    ob = document.getElementById('nombre');

        addEvent(ob, 'blur', mostrarDireccion, false);

var conexion1;

function mostrarDireccion(e) {

    var idUsuario = document.getElementById('nombre').value;

    if (idUsuario != ''){

        conexion1 = crearXMLHttpRequest();

        conexion1.onreadystatechange = procesarEventos;

        conexion1.open("GET", 'pruebaAjax.aspx?nombre=' + idUsuario, true);

        conexion1.send(null);

    else {

        var direccion = document.getElementById('direccion');

function procesarEventos() {

    if (conexion1.readyState == 4) {

        var xml = conexion1.responseXML;

        var pals = xml.getElementsByTagName('direccion');

        var dir = document.getElementById('direccion');

        dir.value = pals.value;

function addEvent(elemento, nomevento, funcion, captura) {

    if (elemento.attachEvent) {

        elemento.attachEvent('on' + nomevento, funcion);

        return true;

    else

        if (elemento.addEventListener) {

            elemento.addEventListener(nomevento, funcion, captura);

            return true;

        else

            return false;

function crearXMLHttpRequest() {

    var xmlHttp = null;

    if (window.ActiveXObject)

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    else

        if (window.XMLHttpRequest)

            xmlHttp = new XMLHttpRequest();

    return xmlHttp;

Valora esta respuesta

Comentar

Pos: 1

Val: 90

completar un campo mediante una consulta al servidor ocupando el dato de otro campo en el formulario

Publicado por xve (222 intervenciones) el 25/02/2014 19:55:20

Hola Debie, si llamas al archivo pruebaAjaxs.aspx desde ajax, te esta devolviendo todo el código html de dicha página.

Lo que no tienes que poner, es la cabecera, los includes, etc... únicamente tendrías que devolver el código html.

Elimina todo el código HTML del archivo pruebaAjaxs.aspx y deja únicamente el código de VB... coméntanos, ok?

Valora esta respuesta

Comentar

completar un campo mediante una consulta al servidor ocupando el dato de otro campo en el formulario

Publicado por Debie (6 intervenciones) el 25/02/2014 20:35:36

Sí, me sirvió =) muchísimas gracias!!... ahora me surge otra pregunta...

si yo quisiera perfeccionar este código y en vez de hacer una impresión (con el Response.Write(dato) quisiera usar una función que me devolviera el dato, cómo la puedo invocar?

Valora esta respuesta

Comentar

Pos: 1

Val: 90

completar un campo mediante una consulta al servidor ocupando el dato de otro campo en el formulario

Publicado por xve (222 intervenciones) el 26/02/2014 10:10:17

Hola Debie, no te entiendo muy bien... a que te refieres?

Valora esta respuesta

Comentar

completar un campo mediante una consulta al servidor ocupando el dato de otro campo en el formulario

Publicado por Debie (6 intervenciones) el 26/02/2014 12:41:07

Hola Xve, gracias por responder.

Me refiero a los siguiente. En el código que yo mostré anteriormente cuando se solicitan los datos al servidor, el javascript (en el documento funciones) simplemente se menciona el archivo pruebaAjax.aspx, pasándole los datos del idUsuario, pero qué pasaría si el archivo pruebaAjax tuviera varias funciones, donde, por ejemplo, una función me retornara la dirección del usuario, otra me retornara la empresa donde trabaja... y así sucesivamente y yo quisiera sólo los datos de una función (mediante el retorno de dicho dato y no a través de la impresión de la información que estoy requiriendo)...

o por ejemplo, una función que me retorne el nombre de todos los hijos de ese idUsuario, entonces... en casos así, cómo podría (desde el lado del cliente) invocar a una función y acceder a los datos que ésta me retorna?

Saludos gratos =)

Valora esta respuesta

Comentar

Pos: 1

Val: 90

completar un campo mediante una consulta al servidor ocupando el dato de otro campo en el formulario

Publicado por xve (222 intervenciones) el 26/02/2014 20:24:59

Hola Debie, si necesitas varios datos, y para ello necesitas ejecutar varias funciones, es correcto.
si lo que quieres es devolver varios valores por separado, lo suyo es que los pases en formato json, ya que te permite pasar diferentes parámetros para luego gestionarlos por separado en la pagina web.

No se si es esto contesta tu pregunta... coméntanos, ok?

Valora esta respuesta

Comentar

completar un campo mediante una consulta al servidor ocupando el dato de otro campo en el formulario

Publicado por Debie (6 intervenciones) el 27/02/2014 20:26:01

Sí!!

Me sirvió... lo implementé y me funciona... muchos saludos y gratitudes por alivianarme la carga con tan pequeños, pero útiles consejos.

Sólo una cosita :p ... Me resultó poder pasarle varios datos al cliente en formato JSON, pero aún no se me ocurre cómo invocar a una función de un archivo específico. Por ejemplo tener en un documento funciones.aspx las funciones: getDireccion, getHijos, etc... y luego invocarlas por separado desde el cliente.

todo esto lo implemento, pero en archivos diferentes...

Saludos atentos =)

Valora esta respuesta

Comentar

response limit

como utilizar correctamente el pluging ajax infinite auto scroll