Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   Frameworks JS (http://www.forosdelweb.com/f127/)
-   -   evento onchange cargar un dato (http://www.forosdelweb.com/f127/evento-onchange-cargar-dato-560616/)

infolan 26/02/2008 08:08
evento onchange cargar un dato
 
Tengo un formulario con dos campos, uno es el código postal y otro es el nombre de la población. Necesito hacer lo siguiente.

Cuando se introduce el codigo postal en el evento onchange lanzar una consulta a la base de datos para ver si dicho codigo postal existe o no (la consulta me devolverá el nombre, en el caso de que exista) , este nombre saldrá en el campo de la población.

Estoy usando ASP, Javascript y la base de datos es MySQL

Por cierto no tengo ni idea de AJAX, por lo que soy muy novato.

Saludos
Jaime

infolan 26/02/2008 10:20
Re: evento onchange cargar un dato
 
nadie me puede ayudar?

miglos 26/02/2008 16:40
Re: evento onchange cargar un dato
 
Saludos,

Prueba con esto, en el evento onChange de tu input, llamas a la funcion muestra_pob(this.value).
Código:
function muestra_pob(val)
{
        if (val.length<5) // para que no haga nada, mientras no ingreses 5 digitos
        {
                document.getElementById("txtproblema").innerHTML=""
                return
        }
        xmlHttp=GetXmlHttpObject()
        if (xmlHttp==null)
        {
                alert ("Browser does not support HTTP Request")
                return
        }
        var url="muestra_pob.asp"
        url=url+"?q="+val
        xmlHttp.onreadystatechange=stateChange
        xmlHttp.open("GET",url,true)
        xmlHttp.send(null)
}
function stateChange()
{
        if (xmlHttp.readyState!="complete")
        {
                document.getElementById("muestra_pob").innerHTML="...buscando datos, un momento por favor"
        }
        if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
        {
                document.getElementById("muestra_pob").innerHTML=xmlHttp.responseText
        }
}
Esta funcion, lanza el query a una pagina que hayas creado, para el ejemplo: "muestra_pob.asp" en la cual tienes la estrucura que quieres mostrar.
En la pagina donde tienes el formulario, creas un <div id="muestra_pob"> que contiene el campo nombre y donde mostrara el resultado.

Ojala te ayude en algo, no lo he probado con campos, pero metiendole mano seguro que funciona.

infolan 27/02/2008 00:46
Re: evento onchange cargar un dato
 
Gracias por contestar, pero soy nuevo en esto del AJAX,

Yo tengo ya una pagina per_clientes.asp, que cuando accedes por primera vez a ella ya ejecuta una serie de consultas, lo que no entiendo es como aplicar las funciones que me has pasado a mi necesidad.

Por lo que entiendo estaría todo en una misma ASP, es decir, en per_clientes.asp, tendría que poner lo que me comentas.

Gracias y saludos
Jaime

miglos 27/02/2008 01:04
Re: evento onchange cargar un dato
 
Así es, en "per_clientes.asp" tienes el formulario, verdad?
En el <input> donde ingresas el codigo postal:
Código HTML:
<input name="txtcodigo" type="text" id="txtcodigo" onKeyUp="muestra_pob(this.value)">
Luego creas una pagina "funciones.js" en donde grabas la funcion que mencione antes y la vinculas en tu pagina .asp (dentro del <head></head>)
Código HTML:
<script src="funciones.js"></script>
Adicionalmente, creas otra pagina .asp, que es a la que se llama en la funcion "muestra_pob"
En total serian 3 paginas, 2 asp y una js.

infolan 27/02/2008 07:02
Re: evento onchange cargar un dato
 
pero en esta segunda pagina que tiene la logica de lllamar la consulta a la base de datos? y que luego dicha consulta me devuelva el valor?

infolan 27/02/2008 14:42
Re: evento onchange cargar un dato
 
Os paso mis paginas :

per_clientes.asp

<%@ LANGUAGE="VBScript" %>
<!-- #include virtual ="periodicos/adovbs.inc" -->
<% Response.Buffer=true %>
<!-- #include File = "..\connection\conexion.asp" -->
<!-- #include File = "..\asp\funciones.asp" -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<link href="estilo.css" rel="stylesheet" type="text/css">
<script language="JavaScript1.2" src="../js/funciones.js"></script>
<script>
avisado=false;
//function searchPoblacion()
//{
// alert("searchPoblacion")
//}
function funciontest()
{
<%
response.write("<script>alert('fsdfdsfds')</script>")
%>
}
</script>
</head>
<%
txtCodigo = ""
txtNombre = ""
txtApellidos = ""
txtNIF = ""
txtTelefono1 = ""
txtTelefono2 = ""
txtDireccionLinea1 = ""
txtDireccionLinea2 = ""
txtCodigoPostal = ""
txtPoblacion = ""
txtProvincia = ""
txtObservaciones = ""
codigoProvincia = ""

tipoOperacion = request.QueryString("tipo")
codigo = request.QueryString("codigo")
response.write("Tipo : " & tipoOperacion & " - Codigo : " & codigo)

set con=Server.CreateObject("ADODB.Connection")
set rst = CreateObject("ADODB.Recordset")
con.Open strConnection
storedProcedureProv = "call SP_PROVINCIAS_S ();"
rst.activeconnection = con
rst.open = storedProcedureProv
con.Execute (storedProcedureProv)


if (codigo <> 0 ) then
set oConn=Server.CreateObject("ADODB.Connection")
set rs = CreateObject("ADODB.Recordset")
oConn.Open strConnection
storedProcedure = "call SP_CLIENTES_L (" & codigo & ");"
rs.activeconnection = oConn
rs.open = storedProcedure
oConn.Execute (storedProcedure)

While not rs.EOF
txtCodigo = rs("cli_codigo")
txtNombre = rs("cli_nombre")
txtApellidos = rs("cli_apellidos")
txtNIF = rs("cli_nif")
txtTelefono1 = rs("cli_telefono")
txtTelefono2 = rs("cli_telefono2")
txtDireccionLinea1 = rs("cli_direccion_linea_1")
txtDireccionLinea2 = rs("cli_direccion_linea_2")
txtCodigoPostal = rs("cli_codigo_postal")
txtPoblacion = rs("cli_poblacion")
txtProvincia = rs("cli_provincia")
txtObservaciones = rs("cli_observaciones")
codigoProvincia = rs("provincia")

RS.moveNext
wend

if (txtProvincia <> "Falta") then
codigoProv = codigoProvincia
' response.write("<script>asignarProvincia('" & codigoProvincia & "');</script>")
End if

rs.close
oConn.close
end if
%>
<body class="bodyMantenimientos" onload="javascript:asignarProvincia('<%= codigoProv %>');">
<!-- PARTE SUPERIOR DE LA PANTALLA -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><h2>Pantalla clientes</h2></td>
</tr>
<tr>
<td class="texto2">En esta pantalla podrá dar de alta nuevos clientes o consultar información.</td>
</tr>
</table>
<br>
<!-- FORMULARIO -->
<form>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="10%" class="literal">Código :</td>
<td width="60%"><input type="Text" size="10" maxlength="10" value="<%= txtCodigo %>" disabled></td>
<td>
<img src="../images/img_mantenimientos/nuevo.gif" width="28" height="28" alt="Nuevo Registro" border="0" id="">
<img src="../images/img_mantenimientos/guardar.gif" width="28" height="28" alt="Guardar Registro" border="0" onclick="javascript:saveRegister(<%= tipo %>);" style="cursor:hand;">
<img src="../images/img_mantenimientos/borrar.gif" width="28" height="28" alt="Eliminar Registro" border="0">
<img src="../images/img_mantenimientos/cerrar.gif" width="28" height="28" alt="Cerrar Ventana" border="0" onclick="javascript:cerrarVentana();">
</td>
</tr>
<tr>
<td width="20%" class="literal">Nombre Completo :</td>
<td width="60%" colspan="2"><input type="Text" size="50" maxlength="100" name="txtNombre" value="<%= txtNombre %>"></td>
</tr>
<tr>
<td width="20%" class="literal">Apellidos :</td>
<td width="60%" colspan="2"><input type="Text" size="50" maxlength="100" name="txtApellidos" value="<%= txtApellidos %>"></td>
</tr>
<tr>
<td width="20%" class="literal">NIF :</td>
<td width="60%" colspan="2"><input type="Text" size="11" maxlength="11" name="txtNIF" value="<%= txtNIF %>"></td>
</tr>
<tr>
<td width="20%" class="literal">Teléfono 1 :</td>
<td width="60%" colspan="2"><input type="Text" size="15" maxlength="15" name="txtTelefono1" value="<%= txtTelefono1 %>"></td>
</tr>
<tr>
<td width="20%" class="literal">Teléfono 2 :</td>
<td width="60%" colspan="2"><input type="Text" size="15" maxlength="15" name="txtTelefono2" value="<%= txtTelefono2 %>"></td>
</tr>
<tr>
<td width="20%" class="literal">Dirección Línea 1 :</td>
<td width="60%" colspan="2"><input type="Text" size="100" maxlength="100" name="txtDireccionLinea1" value="<%= txtDireccionLinea1 %>"></td>
</tr>
<tr>
<td width="20%" class="literal">Dirección Línea 2 :</td>
<td width="60%" colspan="2"><input type="Text" size="100" maxlength="100" name="txtDireccionLinea2" value="<%= txtDireccionLinea2 %>"></td>
</tr>
<tr>
<td width="20%" class="literal">Código Postal :</td>
<td width="60%" colspan="2">
<!--<input type="Text" size="6" maxlength="6" onchange="javascript:compruebaValidoCP(this.id);" id="txtCodigoPostal" name="txtCodigoPostal" value="">-->
<input type="Text" size="6" maxlength="6" onchange="javascript:muestra_pob(this.value);" id="txtCodigoPostal" name="txtCodigoPostal" value="<%= txtCodigoPostal %>">
<img src="../images/img_mantenimientos/filtrar.gif" width="28" height="28" alt="">
</td>
</tr>
<tr>
<td width="20%" class="literal">Población :</td>
<div id="muestra_pob"/>
<td width="60%" colspan="2"><input type="Text" size="80" maxlength="80" name="txtPoblacion" value="<%= txtPoblacion %>"></td>
</tr>
<tr>
<td width="20%" class="literal">Provincia :</td>
<td width="60%" colspan="2">
<select id="provincias">
<%
While not rst.EOF
%>
<option value="<%= rst("prov_codigo")%>"><%= rst("prov_nombre")%></option>
<%
rst.moveNext
wend
rst.close
con.close
%>
</select>
<input type="Text" size="80" maxlength="80" name="txtProvincia" value="<%= txtProvincia %>" disabled>
</td>
</tr>
<tr>
<td width="20%" class="literal">Observaciones :</td>
<td width="60%" colspan="2"><textarea rows="7" cols="80" name="txtObservaciones" value="<%= txtObservaciones %>"></textarea></td>
</tr>

</table>
</form>


</body>
</html>




funcionesAJAX.js

function muestra_pob(val)
{
if (val.length<5) // para que no haga nada, mientras no ingreses 5 digitos
{
document.getElementById("txtCodigoPostal").innerHT ML=""
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="pagina.asp"
url=url+"?q="+val
xmlHttp.onreadystatechange=stateChange
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}


function stateChange()
{
if (xmlHttp.readyState!="complete")
{
document.getElementById("muestra_pob").innerHTML=" ...buscando datos, un momento por favor"
}
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("muestra_pob").innerHTML=x mlHttp.responseText
}
}




Y pagina.asp

<%@ LANGUAGE="VBScript" %>
<!-- #include virtual ="periodicos/adovbs.inc" -->
<% Response.Buffer=true %>
<!-- #include File = "..\connection\conexion.asp" -->
<!-- #include File = "..\asp\funciones.asp" -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>



</body>
</html>






Con toda esta información como sería mi caso?

infolan 29/02/2008 00:28
Re: evento onchange cargar un dato
 
nadie me puede hechar una mano, aunque sea en el cuello ? ;-)


La zona horaria es GMT -6. Ahora son las 01:19.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.