Foros del Web » Programando para Internet » Javascript »

Envio formulario con ajax

 Estas en el tema de Envio formulario con ajax en el foro de Javascript en Foros del Web. Hola como les va, vuelvo con mis problemillas en ajax cosa que nuevamente no logro ver su Error. Lo que hice es un formulario algo ...
  #1 (permalink)  
Antiguo 28/12/2011, 18:33
 
Fecha de Ingreso: diciembre-2011
Ubicación: Buenos aires
Mensajes: 14
Antigüedad: 12 años, 4 meses
Puntos: 0
Pregunta Envio formulario con ajax
Hola como les va, vuelvo con mis problemillas en ajax cosa que nuevamente no logro ver su Error.

Lo que hice es un formulario algo simple, paso este por ajax llegando a php...
pero el tema es que no me envia ni me informa de los estados ( onreadystatechange )

EL PHP , SI LO ABRO EN EL NAVEGADOR CON LAS VARIABLES FUNCIONA POR ENDE EL ERROR ESTA EN JS


Código HTML: 
Ver original
  1. <form onSubmit="Enviar();">
  2. Interprete:<br>
  3. <select id="Interprete">
  4. <? include("Select.php"); ?>
  5. </select><br>
  6. Titulo<br>
  7. <input type="text" id="Titulo"  placeholder="Ingresa el nombre del disco" /><br>
  8. Caratula:<br>
  9. <input type="url" id="Imagen"   placeholder="Ingresa la url de la caratula"/><br>
  10. Año:<br>
  11. <input type="number" id="Ano"  placeholder="Año" /><br>
  12. Velocidad:<br>
  13. <input type="number" id="Velocidad"  placeholder="Velocidad" /><br>
  14. Servidor:<br>
  15. <input type="text" id="Servidor"  placeholder="Ej:Megaupload,rapidshare..."/><br>
  16. Sello:<br>
  17. <input type="text" id="Sello"  placeholder="El sello discografico" /><br>
  18. Descarga:<br>
  19. <input type="url" id="Descarga" placeholder="El link de descarga"/>
  20. <Estados id="Estados"></Estados>
  21. <input type="submit" name="Enviar" value="Enviar"/>  <input type="button" onClick="Previsualizar(); return true;" value="Previsualizar" />
  22. </form>

Código Javascript: 
Ver original
  1. function Enviar(){
  2.     
  3.     var id = document.getElementById('Interprete').value;
  4.     var Interprete1 = document.getElementById('Interprete').selectedIndex;
  5.     var Interprete = document.getElementById('Interprete').options[Interprete1].text;
  6.     
  7.     var Titulo = document.getElementById('Titulo').value;
  8.     var Ano = document.getElementById('Ano').value;
  9.     var Velocidad = document.getElementById('Velocidad').value;
  10.     var Servidor = document.getElementById('Servidor').value;
  11.     var Sello = document.getElementById('Sello').value;
  12.     var Descarga = document.getElementById('Descarga').value;
  13.     var Imagen  = document.getElementById('Imagen').value;
  14.  
  15.     
  16.     // --- Variables ajax
  17.     var ajax = new XMLHttpRequest();
  18.     
  19.     /* Estados */
  20.     ajax.onreadystatechange=function(){
  21.         
  22.         /* Si se esta cargando */
  23.         if(ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3){ 
  24.         document.getElementById('Estados').innerHTML='Procesando su peticion...';
  25.         }
  26.         /* Si se cargo */
  27.         if(ajax.readyState==4 && ajax.status==200){
  28.         document.getElementById('Estados').innerHTML=ajax.responseText;
  29.         }
  30.     }
  31.     
  32.     // --- Envios---
  33.     ajax.open("POST","Enviar.php?id="+id+"&Interprete="+Interprete+"&Titulo="+Titulo+"&Ano="+Ano+"&Velocidad="+Velocidad+"&Servidor="+Servidor+"&Sello="+Sello+"&Descarga="+Descarga+"&Imagen="+Imagen,true);
  34.  
  35.     ajax.send();
  36.     
  37. }

Código PHP: 
Ver original
  1. <?
  2. // --- Conexion mysql ---
  3. $Conexion = mysql_connect('localhost','root','lamocosa');
  4. mysql_select_db('ajax',$Conexion);
  5.  
  6. // --- Variables ---
  7. $Id = $_GET['id'];
  8. $Interprete = $_GET['Interprete'];
  9. $Titulo = $_GET['Titulo'];
  10. $Ano = $_GET['Ano'];
  11. $Imagen = $_GET['Imagen'];
  12. $Velocidad = $_GET['Velocidad'];
  13. $Servidor = $_GET['Servidor'];
  14. $Sello = $_GET['Sello'];
  15. $Descarga = $_GET['Descarga'];
  16.  
  17. // --- Insercion mysql ---
  18. $Envio = mysql_query("INSERT INTO album (indentificador,id,Interprete,Imagen,Titulo,Ano,Velocidad,Servidor,Sello,Descarga, Usuarios,Valores,Megusta) VALUES ('','".$Id."','".$Interprete."', '".$Imagen."','".$Titulo."', '".$Ano."', '".$Velocidad."', '".$Servidor."', '".$Sello."', '".$Descarga."', '0', '0', '1');");
  19.  
  20. // --- Si Esta bien el envio ---
  21. if($Envio){
  22.     echo 'El album se acabo de crear vease';    
  23.     }
  24.  
  25.  
  26. // --- Cerrando mysql ---
  27. mysql_close($Conexion);
  #2 (permalink)  
Antiguo 28/12/2011, 22:06
Avatar de Pablo Ayala  
Fecha de Ingreso: septiembre-2005
Ubicación: Cancún, México
Mensajes: 231
Antigüedad: 18 años, 7 meses
Puntos: 28
Respuesta: Envio formulario con ajax
No te gustaria mas usar jquery?
Cambias tu form por: <form name="formulario" id="formulario">
Y usas un boton, asi: <button type="button" id="btnEnviar"></button>

Codigo:
Cita:
$('#btnEnviar').click(function(){
$("#formulario").submit(function(event){
event.preventDefault(); //detenemos el submit
$.post("ruta/archivo.php", $(this).serialize(), function(data){
//callback, donde data son los datos que vuelven del servidor, datos que pueden ser json si los tratas con la funcion php: json_encode():
});
});
});

Saludos!
__________________
Atentamente,

Pablo Ayala.
Si vas a responder algo en el foro que sea con amabilidad.
  #3 (permalink)  
Antiguo 29/12/2011, 01:56
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Envio formulario con ajax
Hola:

¡Qué manía con las librerías!

Cita:
Iniciado por Pablo Ayala Ver Mensaje
No te gustaria mas usar jquery?
...
Los errores del código, a primera vista es que con con el método post, las variables debes pasarlas como lo que se pone detrás del "?" en una url del método get... tal vez has querido usar ese método. Además con post debes poner la cabecera (setRequestHeaders).

Un detalle: en el onsubmit debes terminar con return false para cancelar el submit (seguro que tal como está ahora se refresca la página, pero con los parámetros del form).

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
Última edición por caricatos; 29/12/2011 a las 01:57 Razón: paréntesis
  #4 (permalink)  
Antiguo 29/12/2011, 11:19
Avatar de Pablo Ayala  
Fecha de Ingreso: septiembre-2005
Ubicación: Cancún, México
Mensajes: 231
Antigüedad: 18 años, 7 meses
Puntos: 28
Respuesta: Envio formulario con ajax
jajajaj... si amo jquery y que?
jajajajaj----


Saludos!
__________________
Atentamente,

Pablo Ayala.
Si vas a responder algo en el foro que sea con amabilidad.
  #5 (permalink)  
Antiguo 30/12/2011, 01:53
 
Fecha de Ingreso: diciembre-2011
Ubicación: Buenos aires
Mensajes: 14
Antigüedad: 12 años, 4 meses
Puntos: 0
Respuesta: Envio formulario con ajax
Sigo en la misma cambie el methodo por GET en el ajax pero tampoco funciono.

@pablo , disculpa pero jquery no me gusta :S
  #6 (permalink)  
Antiguo 30/12/2011, 03:17
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Envio formulario con ajax
Hola:

Para intentar ayudarte (no siempre se consigue) necesitaría más datos... ¿has cancelado bien el envío? (lo de return false que te comenté antes)... ¿sigue en la misma url?...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #7 (permalink)  
Antiguo 30/12/2011, 04:14
 
Fecha de Ingreso: noviembre-2010
Mensajes: 1.242
Antigüedad: 13 años, 5 meses
Puntos: 73
Respuesta: Envio formulario con ajax
Te recomiendo pasarlo por POST y usar jquery.

$.post(url, valores, callback); o bien $.get(url, valores, callback);
__________________
:)
  #8 (permalink)  
Antiguo 30/12/2011, 09:38
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Envio formulario con ajax
Hola:

Cita:
Iniciado por AplicaWeb Ver Mensaje
Te recomiendo pasarlo por POST y usar jquery.

$.post(url, valores, callback); o bien $.get(url, valores, callback);
Me fastidian este tipo de respuestas... al problema que seguro que no tienes la menor idea de como resolverlo, le quieres añadir el incremento de peso de la página con la inclusión de la librería (no me sirven las absurdas respuestas de que pesan poco, porque pesan...).

Cita:
Iniciado por AplicaWeb Ver Mensaje
Te recomiendo pasarlo por POST...
Acaso podrías justificar esa absurda recomendación...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #9 (permalink)  
Antiguo 30/12/2011, 23:47
 
Fecha de Ingreso: diciembre-2011
Ubicación: Buenos aires
Mensajes: 14
Antigüedad: 12 años, 4 meses
Puntos: 0
Respuesta: Envio formulario con ajax
Código HTML: 
Ver original
  1. <form onSubmit="Enviar(); return false" method="post">
  2. <Cuadro>
  3.     <izquierda>
  4.  
  5. Interprete:<br>
  6. <select id="Interprete">
  7. <? include("Select.php"); ?>
  8. </select><br>
  9. Titulo<br>
  10. <input type="text" id="Titulo"  placeholder="Ingresa el nombre del disco" /><br>
  11. Caratula:<br>
  12. <input type="url" id="Imagen"   placeholder="Ingresa la url de la caratula"/><br>
  13. Año:<br>
  14. <input type="number" id="Ano"  placeholder="Año" /><br>
  15. Velocidad:<br>
  16. <input type="number" id="Velocidad"  placeholder="Velocidad" /><br>
  17. Servidor:<br>
  18. <input type="text" id="Servidor"  placeholder="Ej:Megaupload,rapidshare..."/><br>
  19. Sello:<br>
  20. <input type="text" id="Sello"  placeholder="El sello discografico" /><br>
  21. Descarga:<br>
  22. <input type="url" id="Descarga" placeholder="El link de descarga"/>
  23.  
  24. </izquierda>
  25.     <derecha id="Derecha">
  26.     Sitio solo para administradores y ayudantes.<br />
  27.     <hr align="left" width="600"  style="border:1px solid #666; opacity:0.6;"/>
  28.     Desde aqui usted podra añadir nuevas placas a los interpretes<br />
  29.     que ya esten en Suelas Embarradas.
  30.     <hr align="left" width="600"  style="border:1px solid #666; opacity:0.6;"/>
  31.     Por favor Complete el formulario de la izquierda para poder<br />
  32.     enviar y previsualizar.
  33.     <hr align="left" width="600"  style="border:1px solid #666; opacity:0.6;"/>
  34.     Se recomienda NO usar imagenes subidas a redes sociales<br> tales como : Facebook , ya que tienen Privacidad siendo imposible su uso
  35.     <hr align="left" width="600"  style="border:1px solid #666; opacity:0.6;"/>
  36.     Ultimos subidos:<br />
  37.     <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcRgKj1VUnHhWBQYr4lXk9iGp7dHsQGXW_zW1rx3xb8bkIj4_8x9ISZY9gU" width="25" height="25"  />
  38.     <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcT7MgFFGk-L_KzO19HkEXOP-QUd_m4gkrhLE_bu4JLOCJ42IEc8Af9jPA" width="25" height="25"  />
  39.     <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcReEOzJJmYWGu6oNM-Glf7iFSBh9HEDQVaq8QQu3gM0aK-DX_PEX33K6Q" width="25" height="25"  />
  40.     <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcQAt-OpvPKfWDsBoHugBjtp7Sg5umfsa29NtDr7ejcNroysMVoAk6p0Xg" width="25" height="25"  />
  41.     <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcTLcEyKcDAv2RbY5S4gPWvdCEoOCz0k9tGNcNm7QHnfBBZA0lhdqJfqJhvv" width="25" height="25"  />
  42.     <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQdSmR7qcEhE7WvD_nKxQDL5LZS9RS1WcXmZJO9edojTYcv_oOYZkNf20Y" width="25" height="25"  />
  43.     <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSkI0kA_HL9fvabGqZ6r9mg8_cJ2NF4whc8xRjv22bi2NyoOjVa2BjWPg" width="25" height="25"  />
  44.     <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcRzwfOXgu2m6F2Ivr9BgHjegnNHiqIgXTRcl5KZekGv9LwZ7Lghj-TaZ5io" width="25" height="25"  />
  45.     <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcR5WdHy4xITurTseqKaSxLg3ZrwIYdxWZw1LFZ08UiBDkwA3Zrbr6VYNg" width="25" height="25"  />
  46.     <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcT1wBuWv6Cy9b4Jz1YuqEMybKSUOxjj4RMV2grKjym8GuuuhnzFBe9sL7Q" width="25" height="25"  />...
  47.     </derecha>
  48. </Cuadro>
  49. <Estados id="Estados"></Estados>
  50. <Envio>
  51. <input type="submit" name="Enviar" value="Enviar"/>  <input type="button" onClick="Previsualizar(); return true;" value="Previsualizar" />
  52. </Envio>
  53. </form>

Ante la segura respuesta de que las etiquetas como <Estados> no sirven , hago la siguiente aclaracion : La pagina que estoy haciendo solo la hago para google chrome , ya se todos los problemas de compatibilidad con otros navegadores. Solo hago para chrome no cambiare esto.

y estas etiquetas funcionan ya que tengo otros codigos usandolos a la perfeccion.


Código Javascript: 
Ver original
  1. function Enviar(){
  2.     
  3.     var id = document.getElementById('Interprete').value;
  4.     var Interprete1 = document.getElementById('Interprete').selectedIndex;
  5.     var Interprete = document.getElementById('Interprete').options[Interprete1].text;
  6.     
  7.     var Titulo = document.getElementById('Titulo').value;
  8.     var Ano = document.getElementById('Ano').value;
  9.     var Velocidad = document.getElementById('Velocidad').value;
  10.     var Servidor = document.getElementById('Servidor').value;
  11.     var Sello = document.getElementById('Sello').value;
  12.     var Descarga = document.getElementById('Descarga').value;
  13.     var Imagen  = document.getElementById('Imagen').value;
  14.  
  15.     
  16.     // --- Variables ajax
  17.     var ajax = new XMLHttpRequest();
  18.     
  19.     /* Estados */
  20.     ajax.onreadystatechange=function(){
  21.         
  22.         /* Si se esta cargando */
  23.         if(ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3){ 
  24.         document.getElementById('Estados').innerHTML='Procesando su peticion...';
  25.         }
  26.         /* Si se cargo */
  27.         if(ajax.readyState==4 && ajax.status==200){
  28.         document.getElementById('Estados').innerHTML=ajax.responseText;
  29.         }
  30.     }
  31.     
  32.     // --- Envios---
  33.     ajax.open("GET","Enviar.php?id="+id+"&Interprete="+Interprete+"&Titulo="+Titulo+"&Ano="+Ano+"&Velocidad="+Velocidad+"&Servidor="+Servidor+"&Sello="+Sello+"&Descarga="+Descarga+"&Imagen="+Imagen,true);
  34.  
  35.     ajax.send(null);
  36.     
  37. }



Código PHP: 
Ver original
  1. // --- Conexion mysql ---
  2. $Conexion = mysql_connect('localhost','root','lamocosa');
  3. mysql_select_db('ajax',$Conexion);
  4.  
  5. // --- Variables ---
  6. $Id = $_GET['id'];
  7. $Interprete = $_GET['Interprete'];
  8. $Titulo = $_GET['Titulo'];
  9. $Ano = $_GET['Ano'];
  10. $Imagen = $_GET['Imagen'];
  11. $Velocidad = $_GET['Velocidad'];
  12. $Servidor = $_GET['Servidor'];
  13. $Sello = $_GET['Sello'];
  14. $Descarga = $_GET['Descarga'];
  15.  
  16. // --- Insercion mysql ---
  17. $Envio = mysql_query("INSERT INTO album (indentificador,id,Interprete,Imagen,Titulo,Ano,Velocidad,Servidor,Sello,Descarga, Usuarios,Valores,Megusta) VALUES ('','".$Id."','".$Interprete."', '".$Imagen."','".$Titulo."', '".$Ano."', '".$Velocidad."', '".$Servidor."', '".$Sello."', '".$Descarga."', '0', '0', '1');");
  18.  
  19. // --- Si Esta bien el envio ---
  20. if($Envio){
  21.     echo 'El album se acabo de crear vease';    
  22.     }
  23.  
  24.  
  25. // --- Cerrando mysql ---
  26. mysql_close($Conexion);
  #10 (permalink)  
Antiguo 31/12/2011, 00:32
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Envio formulario con ajax
Hola:

Parece que usas html5... y aunque yo aún no lo he usado, supongo que no cambiaría nada.

En principio, haría que funcionase todo sin Ajax, así que pondría los name a los controles del formulario, de tal forma, si falla el envío por un error, se envía sin Ajax... y otra cosa que podría ser problemática es que las variables no parece que las "escapes":
dato = escape(dato);//...

Cuando tengo problemas, suelo generar la url, y enviarla con un window.open, para ver como llegan.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #11 (permalink)  
Antiguo 02/01/2012, 20:27
 
Fecha de Ingreso: diciembre-2011
Ubicación: Buenos aires
Mensajes: 14
Antigüedad: 12 años, 4 meses
Puntos: 0
Respuesta: Envio formulario con ajax
Cita:
Iniciado por caricatos Ver Mensaje
Hola:

Parece que usas html5... y aunque yo aún no lo he usado, supongo que no cambiaría nada.

En principio, haría que funcionase todo sin Ajax, así que pondría los name a los controles del formulario, de tal forma, si falla el envío por un error, se envía sin Ajax... y otra cosa que podría ser problemática es que las variables no parece que las "escapes":
dato = escape(dato);//...

Cuando tengo problemas, suelo generar la url, y enviarla con un window.open, para ver como llegan.

Saludos

No te entendi ni mierda xD ... yo las variables osea los valores como veras solo los recupero con document.getelementbyid .... osea ya tambien tenia un previsualizador en el cual recupero la informacion de la misma manera y me la muestra osea tambien pense en eso.. para saber si se guardaban... el php lo use por si solo poniendo los valores en la url ... anda, asi que no es eso... el tema esta en el javascript cosa que no estoy con ese script ya que me puse con otras partes de la pagina hasta ver si alguien me daba una solucion aqui... :S

Etiquetas: ajax, html, php
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 05:12.