Inconveniente Formulario dentro de DIV

El Condor · #1 (**permalink**) 08/04/2008, 14:16

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">&nbsp;</td>
  </tr>
  <tr>
    <td width="21%">&nbsp;</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%">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</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>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</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>&nbsp;</td>
  </tr>
  <tr>
    <td background="imagenes/spacer.gif">&nbsp;</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">&nbsp;</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.

Henkka · #2 (**permalink**) 09/04/2008, 09:29

Pasate por mi thread de Enviar Forumario por AJAX que está en esta misma sección (no me deja postear links), planteé la misma duda. Hay un pedazo de código, que no funciona, pero tal vez puedas ver que no anda.

jonathan_miguel · #3 (**permalink**) 10/04/2008, 07:43

Disculpame, la página que presentaste lo pisaste en un DIv con una petición que enviaste despues de cargar la página principal??
Si es así no va a funcionar porque no se dispara el evento onLoad y en el codigo que dejaste existe:
window.onload = function(){...}
Y este evento se dispara solo al cargar la página.
Espero que sea de utilidad.
***********
www.jomico.com.ar
***********