| El Condor | 08/04/2008 14:16 |
Inconveniente Formulario dentro de DIV
Buenas, estoy teniendo un inconveniente con un formulario que tengo que "enviar" el cual esta en la pagina pag1.php la cual es cargada dentro de un div en otra pagina llamada contenedor.php
Les dejo codigo para que entiendan. Código:
<?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>
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.
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. | 