Les dejo codigo para que entiendan.
Código:
El codigo de aca arriba es el del formulario que si lo copian y lo guardan en un sitio te devuelve el array de los datos que se envian.<?php
if(isset($_POST['Submit']) && !empty($_POST['Submit'])){
echo '<pre>';
print_r($_POST);
echo '</pre>';
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="estilos/estilos.css" rel="stylesheet" type="text/css" />
<script>
//acá cada uno crea el objeto a su manera
function aj(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
else{
try{
return new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
alert('tu navegador no soporta ajax');
return false;
}
}
}
function sendAndLoad(){
var rpc=aj();
if(rpc){
//si pudo crearse el objeto, avanzamos (respetar el orden)
rpc.open('POST','<?php echo basename($_SERVER['PHP_SELF']) ?>',true);
rpc.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//preparamos las variables a enviar
var aEnviar='';
for(ii=0; ii<arguments.length;ii++){
//usamos el objeto arguments para obtener y parsear los datos a enviar
//encodeURI es semejante a urlencode de PHP
aEnviar+=arguments[ii].desc+'='+encodeURI(arguments[ii].dato)+'&';
}
//creamos una función anónima que sirva de handler
rpc.onreadystatechange=function(){
if(rpc.readyState==4){
//nos conectamos, recibimos y hacemos algo con lo que recibimos si queremos
//en este caso, mostramos lo que enviamos
document.getElementById('pp').style.display='block';
document.getElementById('pp').style.color='green';
document.getElementById('pp').innerHTML=rpc.responseText;
}else{
//no nos conectamos todavía y mostramos la precarga
document.getElementById('pp').style.display='block';
}
}
//Recién ahora, que tenemos todo lo anterior terminado, podemos enviar el request
rpc.send(aEnviar);
}
}
//asignamos la función al botón de envío al cargar la página, así no tocamos el html
window.onload=function(){
document.getElementById('Submit').onclick=function(){
alert('click');
//pasamos objetos escritos en notación json como argumentos
sendAndLoad({desc:'pass_vieja',dato:document.getElementById('pass_vieja').value},{desc:'pass_nueva',dato:document.getElementById('pass_nueva').value},{desc:'pass_nueva_confirma',dato:document.getElementById('pass_nueva_confirma').value},{desc:'Submit',dato:document.getElementById('Submit').value});
}
}
</script>
</head>
<body>
<div id="pp" style="display:none;color:#F00">Cargando...</div>
<form id="formulario" name="formulario" method="post" action="">
<table width="97%" border="0" align="center" cellpadding="2" cellspacing="1">
<tr>
<td colspan="4" ><strong>| Panel Datos Acceso</strong></td>
</tr>
<tr>
<td colspan="4" align="center" class="item"> </td>
</tr>
<tr>
<td width="21%"> </td>
<td width="24%" align="right" class="fila_obscuro">Contraseña actual:</td>
<td width="25%" class="fila_obscuro"><label>
<input name="pass_vieja" type="password" id="pass_vieja"/>
</label></td>
<td width="30%"> </td>
</tr>
<tr>
<td> </td>
<td align="right" class="fila_obscuro">Nueva contraseña:</td>
<td class="fila_obscuro"><input name="pass_nueva" type="password" id="pass_nueva"/></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="right" class="fila_obscuro">Confirma nueva contraseña:</td>
<td class="fila_obscuro"><input name="pass_nueva_confirma" type="password" id="pass_nueva_confirma"/></td>
<td> </td>
</tr>
<tr>
<td background="imagenes/spacer.gif"> </td>
<td colspan="2" align="center" background="imagenes/spacer.gif"><span class="prod">*la contraseña debe contar con minimo 6 caracteres</span></td>
<td background="imagenes/spacer.gif"> </td>
</tr>
<tr>
<td colspan="4" background="imagenes/spacer.gif"><img src="imagenes/spacer.gif" width="1" height="5" /></td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="button" id="Submit" name="Submit" value="Enviar" />
</td>
</tr>
</table>
</form>
Al incluir este sitio dentro de otro en el div deja de funcionar.
Alguno tiene idea de como hacer funcionar un formulario dentro de un div sin recargar la pagina por que sino recarga la que la contiene?
Saludos y gracias de antemano.
Mode Lineal
