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

AJAX + Simple form

Estas en el tema de AJAX + Simple form en el foro de Frameworks JS en Foros del Web. Amigos, uso el siguiente script para enviar un formulario. No obstante, no sé cómo recuperar la variable cad para enviarla mediante JMail.Message usando ASP. <script ...
  #1 (permalink)  
Antiguo 21/05/2008, 12:08
Avatar de emajesus  
Fecha de Ingreso: abril-2003
Mensajes: 278
Antigüedad: 21 años
Puntos: 1
AJAX + Simple form

Amigos, uso el siguiente script para enviar un formulario. No obstante, no sé cómo recuperar la variable cad para enviarla mediante JMail.Message usando ASP.


<script type="text/javascript">
addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
var ref=document.getElementById('formulario');
addEvent(ref,'submit',enviarDatos,false);
}

function enviarDatos(e)
{
if (window.event)
window.event.returnValue=false;
else
if (e)
e.preventDefault();
enviarFormulario();
}


function retornarDatos()
{
var cad='';
var nom=document.getElementById('nombre').value;
var com=document.getElementById('mensaje').value;
cad='nombre='+encodeURIComponent(nom)+'&mensaje='+enc odeURIComponent(com);
return cad;
}

var conexion1;
function enviarFormulario()
{
conexion1=crearXMLHttpRequest();
conexion1.onreadystatechange = procesarEventos;
conexion1.open('POST','02form_web2.asp', true);
conexion1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
conexion1.send(retornarDatos());
}

function procesarEventos()
{
var resultados = document.getElementById("resultados");
if(conexion1.readyState == 4)
{
resultados.innerHTML = 'Gracias.';
}
else
{
resultados.innerHTML = 'Procesando...';
}
}

//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captur a);
return true;
}
else
return false;
}

function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}
</script>
  #2 (permalink)  
Antiguo 21/05/2008, 12:13
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: AJAX + Simple form

Hola emajesus,

Al tu llamar a retornarDatos() dentro de conexion1.send(retornarDatos());, automáticamente regresas la variable cad, en ASP deberías de leer las variables nombre y mensaje, no recuerdo mucho ASP pero seria con Request.Querystring("nombre") y Request.Querystring( "mensaje" ).

Saludos.
  #3 (permalink)  
Antiguo 22/05/2008, 01:52
Avatar de emajesus  
Fecha de Ingreso: abril-2003
Mensajes: 278
Antigüedad: 21 años
Puntos: 1
Respuesta: AJAX + Simple form

GatorV,

Explico mejor mis avances. He construido dos páginas:

PÁGINA 03FORM_WEB2.ASP

<SCRIPT LANGUAGE=JavaScript>
function nuevoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}

function enviarFormulario(url, formid, divrespuesta){
var Formulario = document.getElementById(formid);
var longitudFormulario = Formulario.elements.length;
var cadenaFormulario = "";
var sepCampos;
sepCampos = "";
for (var i=0; i <= Formulario.elements.length-1;i++) {
cadenaFormulario += sepCampos+Formulario.elements[i].name+'='+encodeURI(Formulario.elements[i].value);
sepCampos="&";
}
divrespuesta=nuevoAjax();
divrespuesta.open("POST", url, true);
divrespuesta.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=ISO-8859-1');
divrespuesta.send(cadenaFormulario);
divrespuesta.onreadystatechange = function() {

var divrespuesta = document.getElementById("divrespuesta");
if(divrespuesta.readyState == 4)

{
divrespuesta.innerHTML='GRACIAS';
}
else
{
divrespuesta.innerHTML='Procesando...';
}
}
}
</script>



<script type="text/javascript">
function mostrar(num) {
document.getElementById('capa-1').style.display = (num==-1) ? 'block' : 'none';
document.getElementById('capa0').style.display = (num==0) ? 'block' : 'none';
document.getElementById('capa1').style.display = (num==1) ? 'block' : 'none';
}
</script>


<div id="divrespuesta">

<form action="#" method="post" name="formid" id="formid" autocomplete="off">
<div id="capa-1">
¿Te ha sido útil esta informaci&oacute;n?
<input type="radio" name="nombre" value="si" onclick = "mostrar(0)" />&nbsp;S&iacute;&nbsp;&nbsp;
<input type="radio" name="nombre" value="no" onclick = "mostrar(1)" />&nbsp; No
</div>
<div id="capa0" style="display:none">
Nos alegra que la informaci&oacute;n te haya sido &uacute;til. ¿Qu&eacute; aspectos de esta respuesta te han gustado?<br><input type="text" name="mensaje" value = "" size="50" />
&nbsp;<input class="submitbutton" type="submit" value="Enviar comentarios" id="enviar" tabindex="5" onclick="enviarFormulario('03form_send.asp','formi d', 'divrespuesta');"/>
</div>
<div id="capa1" style="display:none">
Haznos saber por qu&eacute; no te ha resultado &uacute;til esta informaci&oacute;n. ¡Gracias!<br><input type="text" name="mensaje" value = "" size="50" />
&nbsp;<input class="submitbutton" type="submit" value="Enviar comentarios" id="enviar" tabindex="5" onclick="enviarFormulario('03form_send.asp','formi d', 'divrespuesta');" />
</div>

</form>

</div>




PÁGINA 03FORM_SEND.ASP:

<%
'------------------------------------------------
myEmail = "[email protected]"
myPassword = "******"
mymensaje = request("nombre")
mymensaje = mymensaje & Request("mensaje")
'------------------------------------------------
%>

<%Dim objEmail


Set objEmail = Server.CreateOBject( "JMail.Message" )
objEmail.MailServerUserName = "[email protected]"
objEmail.MailServerPassword = "*******"
objEmail.From = "[email protected]"
objEmail.ReplyTo = "[email protected]"
objEmail.AddRecipient "[email protected]"
objEmail.Subject = "Comentarios"
objEmail.Body = mymensaje
objEmail.Send("mail.midominio.com")
Set objEmail = Nothing
%>



1.- Cuando ejecuto el formulario, quisiera que una vez enviado apareciera el mensaje GARCIAS y no el formulario de nuevo.
2.- Cuando lo incluyo en la página me refresca la página; ¿debo incluir algo en el BODY de la página donde incluyo el formulario a través de un INCLUDE?
3.- Pese a marcar sólo un botón, recibo ambos: 'sí y no' en la respuesta, como si hubiera marcado ambos botones de radio; ¿cómo lo hago para recibir sólo la respuesta marcada por el usuario? He comprobado el código y no veo error.

Gracias, Emajesus

Última edición por emajesus; 22/05/2008 a las 09:01
  #4 (permalink)  
Antiguo 22/05/2008, 09:12
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: AJAX + Simple form

Hola emajesus,

No entiendo bien tu problema, si bien el código que pones, debería de ponerte el mensaje de Gracias al enviar el formulario, ¿que problema tienes?, tu segunda duda no la comprendo.

Saludos.
  #5 (permalink)  
Antiguo 22/05/2008, 11:09
Avatar de emajesus  
Fecha de Ingreso: abril-2003
Mensajes: 278
Antigüedad: 21 años
Puntos: 1
Respuesta: AJAX + Simple form

Cita:
Iniciado por GatorV Ver Mensaje
Hola emajesus,

No entiendo bien tu problema, si bien el código que pones, debería de ponerte el mensaje de Gracias al enviar el formulario, ¿que problema tienes?, tu segunda duda no la comprendo.

Saludos.
Mientras envía el contenido del formulario, aparece el mensaje: Procesando ... Pero una vez enviado, vuelve a cargar el formulario original.

Respecto a la segunda duda, te comento lo siguiente: he incluido el contenido de 03FORM_WEB2.ASP en la página definitiva a través de un <!--#include file="03form_web2.asp"--> ... Y sin embargo, me recarga la página una vez ha procesado el formulario. Es decir, me aparece el mensaje de Procesando... pero una vez procesado, recarga la página.

Por último, te comento que como ves en el formulario hay dos botones de radio (sí/no). Marco sí, pero recibo como respuesta ambos botones, es decir, sí/no.

Gracias por todo, Emajesus
  #6 (permalink)  
Antiguo 22/05/2008, 11:40
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: AJAX + Simple form

Prueba cambiar tu form así:
Código:
<form action="#" method="post" name="formid" id="formid" autocomplete="off" onsubmit="return false;">
Saludos.
  #7 (permalink)  
Antiguo 22/05/2008, 11:51
Avatar de emajesus  
Fecha de Ingreso: abril-2003
Mensajes: 278
Antigüedad: 21 años
Puntos: 1
Respuesta: AJAX + Simple form

Cita:
Iniciado por GatorV Ver Mensaje
Prueba cambiar tu form así:
Código:
<form action="#" method="post" name="formid" id="formid" autocomplete="off" onsubmit="return false;">
Saludos.
GatorV, con tu propuesta lo que sucede es que el formulario es enviado, pero queda fijo el mensaje de PROCESANDO; yo no soy experto en este tema; mi pregunta es: ¿habré puesto al revés el mensaje de PROCESANDO y GRACIAS?

Un saludo, Emajesus
  #8 (permalink)  
Antiguo 22/05/2008, 12:59
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: AJAX + Simple form

Prueba así:
Código:
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))

divrespuesta.onreadystatechange = function() {
            var divresp = document.getElementById("divrespuesta");
            if(divrespuesta.readyState == 4) {
                     if( divrespuesta.status == 200 ) {
                                 divresp.innerHTML='GRACIAS';
                     } else {
                                 divresp.innerHTML='Procesando...';
                     }
            }
}
Adicionalmente estabas re-escribiendo las variables, en este caso divrespuesta, por eso le cambie el nombre.

Saludos.
  #9 (permalink)  
Antiguo 27/05/2008, 09:12
Avatar de emajesus  
Fecha de Ingreso: abril-2003
Mensajes: 278
Antigüedad: 21 años
Puntos: 1
Respuesta: AJAX + Simple form

GatorV,

Este es mi código; funciona todo bien salvo que el valor del RadioButton no lo recoge; envía ambos valores. ¿Qué sucede?

Código:
<SCRIPT LANGUAGE=JavaScript>
function nuevoAjax(){
    var xmlhttp=false;
    try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
    xmlhttp = false;
    }
    }

    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}

function enviarFormulario(url, formid, divrespuesta){

        var Formulario = document.getElementById(formid);
        var longitudFormulario = Formulario.elements.length;
        var cadenaFormulario = "";
        var sepCampos;
        sepCampos = "";
        for (var i=0; i <= Formulario.elements.length-1;i++) {
            cadenaFormulario += sepCampos+Formulario.elements[i].name+'='+encodeURI(Formulario.elements[i].value);
            sepCampos="&";
    }
    divrespuesta=nuevoAjax();
    divrespuesta.open("POST", url, true);
    divrespuesta.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=ISO-8859-1');
    divrespuesta.send(cadenaFormulario);
    divrespuesta.onreadystatechange = function() {

	  var divrespuesta = document.getElementById("divrespuesta");
          if(divrespuesta.readyState == 4)
		
		{
		divrespuesta.innerHTML='';
		}
		else
		{
		divrespuesta.innerHTML='';
		}
    		}
} 
</script>
Código:
<div id="divrespuesta">

<form action="#" method="post" name="formid" id="formid" autocomplete="off" onsubmit="return false;">

<b><img src="Images/plantilla/f_star.gif">&nbsp;&iquest;Te ha sido &uacute;til esta informaci&oacute;n?</b><br>
&nbsp;&nbsp;
<input type="radio" id="si" name="nombre" value="si" onclick = "mostrar(0)" />&nbsp;S&iacute;
&nbsp;&nbsp;
<input type="radio" id="no" name="nombre" value="no" onclick = "mostrar(1)" />&nbsp; No
<br><br>
<div id="capa0" style="display:none">
Nos alegra que la informaci&oacute;n te haya sido &uacute;til. &iquest;Qu&eacute; aspectos de esta secci&oacute;n te han gustado?<br><br><input class="btn_anterior" type="text" name="mensaje" value = "" size="50" />
&nbsp;<input class="btn_anterior"  type="submit" value="Enviar comentarios" id="enviar" tabindex="5" onclick="enviarFormulario('03form_send.asp','formid', 'divrespuesta');"/>
</div>
<div id="capa1" style="display:none">
Haznos saber por qu&eacute; no te ha resultado &uacute;til esta informaci&oacute;n. &iexcl;Gracias!<br><br><input class="btn_anterior" type="text" name="mensaje" value = "" size="50" />
&nbsp;<input class="btn_anterior"  type="submit" value="Enviar comentarios" id="enviar" tabindex="5" onclick="enviarFormulario('03form_send.asp','formid', 'divrespuesta');" />
</div>

</form>

</div>
  #10 (permalink)  
Antiguo 27/05/2008, 09:37
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: AJAX + Simple form

Hola emajesus,

Lo que pasa es que debes de buscar el radio que tenga el atributo de checked como true.

Saludos.
  #11 (permalink)  
Antiguo 27/05/2008, 09:48
Avatar de emajesus  
Fecha de Ingreso: abril-2003
Mensajes: 278
Antigüedad: 21 años
Puntos: 1
Respuesta: AJAX + Simple form

Cita:
Iniciado por GatorV Ver Mensaje
Hola emajesus,

Lo que pasa es que debes de buscar el radio que tenga el atributo de checked como true.

Saludos.

No lo entendí
  #12 (permalink)  
Antiguo 27/05/2008, 16:18
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: AJAX + Simple form

Deberías de leer un manual de DOM, ya que para que rescates solo los checkbox seleccionados, debes de buscar aquellos que tengan el atributo de checked como true (que son los que se presentan en el HTML como un circulo lleno).

Saludos.
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




La zona horaria es GMT -6. Ahora son las 16:46.