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

evento onchange cargar un dato

 Estas en el tema de evento onchange cargar un dato en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/02/2008, 08:08
 
Fecha de Ingreso: noviembre-2005
Mensajes: 405
Antigüedad: 19 años, 1 mes
Puntos: 0
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
  #2 (permalink)  
Antiguo 26/02/2008, 10:20
 
Fecha de Ingreso: noviembre-2005
Mensajes: 405
Antigüedad: 19 años, 1 mes
Puntos: 0
Re: evento onchange cargar un dato
nadie me puede ayudar?
  #3 (permalink)  
Antiguo 26/02/2008, 16:40
Avatar de miglos  
Fecha de Ingreso: enero-2005
Ubicación: Perú
Mensajes: 235
Antigüedad: 19 años, 11 meses
Puntos: 1
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.
__________________
:adios:
  #4 (permalink)  
Antiguo 27/02/2008, 00:46
 
Fecha de Ingreso: noviembre-2005
Mensajes: 405
Antigüedad: 19 años, 1 mes
Puntos: 0
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
  #5 (permalink)  
Antiguo 27/02/2008, 01:04
Avatar de miglos  
Fecha de Ingreso: enero-2005
Ubicación: Perú
Mensajes: 235
Antigüedad: 19 años, 11 meses
Puntos: 1
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.
__________________
:adios:
  #6 (permalink)  
Antiguo 27/02/2008, 07:02
 
Fecha de Ingreso: noviembre-2005
Mensajes: 405
Antigüedad: 19 años, 1 mes
Puntos: 0
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?
  #7 (permalink)  
Antiguo 27/02/2008, 14:42
 
Fecha de Ingreso: noviembre-2005
Mensajes: 405
Antigüedad: 19 años, 1 mes
Puntos: 0
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?
  #8 (permalink)  
Antiguo 29/02/2008, 00:28
 
Fecha de Ingreso: noviembre-2005
Mensajes: 405
Antigüedad: 19 años, 1 mes
Puntos: 0
Re: evento onchange cargar un dato
nadie me puede hechar una mano, aunque sea en el cuello ?
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:31.