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

Ajax no funciona

Estas en el tema de Ajax no funciona en el foro de Frameworks JS en Foros del Web. Soy nuevo en el foro, estoy aprendiendo a usar Jquery e intento registrar los datos en un archivo local (Recién empece con la pagina y ...
  #1 (permalink)  
Antiguo 11/06/2012, 21:42
 
Fecha de Ingreso: junio-2012
Ubicación: Chile
Mensajes: 3
Antigüedad: 11 años, 9 meses
Puntos: 0
Pregunta Ajax no funciona

Soy nuevo en el foro, estoy aprendiendo a usar Jquery e intento registrar los datos en un archivo local (Recién empece con la pagina y después tenia pensado crear la base de datos)

Resulta que al hacer click en el submit, la pagina se salta a ajax completamente y me lleva al archivo PHP el cual me entrega el valor que quiero y además me almacena los nombres correctamente en el archivo que tengo en el servidor WAMP local.

Les dejo el codigo, ¿Que estoy haciendo mal? Me he llevado todo el dia pensando en que problema estoy haciendo.

pd: Dejo en claro que descargé el JQuery hoy de la pagina oficial.

Código HTML:
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
	    <title>enelMURAL - Suscribete</title>
	    <meta name="description" content="La más grande base de datos de eventos y entretención de CHILE" />
        <meta name="keywords" content="bdd, base, de, datos, chile, productora, servicios, producciones, " />
	    <meta name="author" content="enelMURAL.cl" />
	    <link rel="shortcut icon" href="cont/img/favicon.png" />
	    <link rel="stylesheet" href="css/style.css" type="text/css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/general.js"></script>
        </head>
    
    <!-- Declaración de Body e instanciación de la funcion que realiza el Fade en JavaScript -->
    <body>
        <div class="container">
			<img class="back" id="background" src="logos/back.png" style="width: 1579px; left: -50px; height: auto;">
			<div class="envoltura">
            <div class="msgenviado">
                    <strong>Muchas Gracias</strong>
                    <input id="volverformulario" type="submit" value="Volver a mostrar formulario">
            </div>
            <form id="formulario" onsubmit="javascript: registrar();" accept-charset="utf-8" action="add.php" method="POST" class="formulario" name="contacto">
                <br><h3>¿Como lo trataremos?</h3>
                <input id="nombre" class="texto" type="text" value="" maxlength="60" name="nombre" placeholder="Nombre o Razón Social" tabindex="1">
                <br><h3>¿Su correo?</h3>
                <input id="email" class="texto" type="text" value="" name="email" placeholder="Correo Electronico" tabindex="2">
                <br><h3>¿Algún número de contacto?</h3>
                <select tabindex="3" name="codigo_telefono" class="texto" id="codigo_telefono">
                    <option value="eligeCodigo">Selecciona Codigo</option>
                    <option>02</option>
                    <option>09</option>
                    <option>08</option>
                    <option>07</option>
                    <option>06</option>
                    <option>05</option>
                </select>
                <input id="telefono" class="texto" type="text" value="" name="telefono" maxlength="7" placeholder="Número" tabindex="3">
                <br><h3>Su rubro esta ligado a:</h3>
                <select name="rubro" id="rubro" class="texto" tabindex="4">
                    <option value="eligeRubro">Selecciona tu rubro</option>
                    <option value="Productora">Productoras</option>
                    <option value="CentroEventos">Centros de Eventos</option>
                    <option value="Eventos">Eventos</option>
                    <option value="Audio">Audio</option>
                    <option value="Video">Iluminación</option>
                    <option value="Entretencion">Entretención</option>
                </select>
                <br><h3>Díganos su Ciudad:</h3>
                <select name="ciudad" id="ciudad" tabindex="5" class="texto">
                    <option value="eligeCiudad">Selecciona tu ciudad</option>
                    <option value="Angol">Angol</option>
                    <option value="Antofagasta">Antofagasta</option>
                    <option value="Arica">Arica</option>
                    <option value="Calama">Calama</option>
                    <option value="Chillan">Chillán</option>
                    <option value="Coihaique">Coihaique</option>
                    <option value="Concepcion">Concepción</option>
                    <option value="Copiapo">Copiapó</option>
                    <option value="Coquimbo">Coquimbo</option>
                    <option value="Curico">Curicó</option>
                    <option value="Iquique">Iquique</option>
                    <option value="LaSerena">La Serena</option>
                    <option value="Linares">Linares</option>
                    <option value="LosAngeles">Los Ángeles</option>
                    <option value="Osorno">Osorno</option>
                    <option value="Ovalle">Ovalle</option>
                    <option value="PuertoMontt">Puerto Montt</option>
                    <option value="PuntaArenas">Punta Arenas</option>
                    <option value="Quilpue">Quilpué</option>
                    <option value="Rancagua">Rancagua</option>
                    <option value="SanBernardo">San Bernardo</option>
                    <option value="Santiago">Santiago</option>
                    <option value="Talca">Talca</option>
                    <option value="Talcahuano">Talcahuano</option>
                    <option value="Temuco">Temuco</option>
                    <option value="Valdivia">Valdivia</option>
                    <option value="Vallenar">Vallenar</option>
                    <option value="Valparaiso">Valparaíso</option>
                    <option value="ViñadelMar">Viña del Mar</option>
                    <option value="ViñaCausiño">Viña Causiño</option>
                </select>
                <br><h3>Deslúmbrennos con lo que hace:</h3>
                <textarea name="comentario" class="texto" tabindex="6" placeholder="Redacte brevemente aquí"></textarea><br><br>
                <input id="submit" type="submit" class="submit" value="Enviar Mensaje" tabindex="7" required="" name="submit">
                <div class="cargando"></div>
            </form>
            </div>    
        </div>
    </body>
</html> 
Código:
function registrar() {
    var msg = $("#formulario").serialize();
    alert(msg);
    $('.cargando').show();
    $.ajax({
        type: 'POST',
        url: 'add.php',
        data: "hola",
        success: function(data) {
                if(data==1){
		    	$('.formulario').fadeOut('slow');
				$('.msgenviado').fadeIn('slow');
                }}	
    });
}
Código PHP:
$name $_POST['nombre'];
$email $_POST['email'];
$codigo_telefono $_POST['codigo_telefono'];
$telefono $_POST['telefono'];
$rubro $_POST['rubro'];
$ciudad $_POST['ciudad'];
$comment $_POST['comentario'];
$result inscribir($name$email$codigo_telefono$telefono$rubro$ciudad$comment);
echo 
$result;

function 
inscribir ($name$email$codigo_telefono$telefono$rubro$ciudad$comment) {
    
$inscripcion '
    Nombre: ' 
$name '
    Correo: ' 
$email '
    Telefono: ' 
$codigo_telefono ' - ' $telefono '
    Rubro: ' 
$rubro '
    Ciudad: ' 
$ciudad '
    Comentario: ' 
$comment '
    '
;
    
$lineas '____________________________________________________________';
    
$archivo fopen("inscripcion.txt","a+");
    
$result fwrite($archivo$lineas PHP_EOL $inscripcion PHP_EOL);
    
fclose($archivo);

    if (
$result) return 1;
    else return 
0;

  #2 (permalink)  
Antiguo 11/06/2012, 21:52
Avatar de dontexplain  
Fecha de Ingreso: junio-2012
Mensajes: 536
Antigüedad: 11 años, 9 meses
Puntos: 127
Respuesta: Ajax no funciona

Me da pereza leer todo el código, pero te diré 4 cosas:

1) Tenía entendido que en Jquery, si usas el método POST y quieres anidar datos necesitas usar la estructura clave->valor en un objeto si son varios (new Object())

data: {"dato1":"valor1","dato2":"valor2"},

2) Las variables que llegan al servidor han de comprobarse antes de introducirse en la DB, inclusive si están vacías con empty.

3) Si tratas de enviar los datos por AJAX no sé para qué usas un submit corriente, ese submit enviará los datos de manera estándar.

4) Al clicar en un botón submit la acción del evento por defecto es enviar el formulario, para evitarlo usa event.preventDefault() o return false;

Como soy tan vago te pondré un ejemplo breve de cómo se ha de hacer

Código HTML:
Ver original
  1. <form><input type="text" id="input_form"><br/><button id="submit_form"></button></form>
  2.  
  3.  
  4. $("#submit_form").click(function(){
  5.  valor1= $("#input_form").val()
  6.  
  7. $.ajax({
  8.   url: 'proceso.php',
  9.   type: 'POST',
  10.   data: {"campo1": valor1},
  11.   success: function(data) {
  12.    if(data == 1){
  13. alert("todo ok");
  14. }
  15.   }
  16.  
  17. });
  18. })
  19.  

Un saludo.

Última edición por dontexplain; 11/06/2012 a las 21:58
  #3 (permalink)  
Antiguo 11/06/2012, 22:09
ybp
 
Fecha de Ingreso: abril-2012
Mensajes: 1
Antigüedad: 11 años, 10 meses
Puntos: 1
Respuesta: Ajax no funciona

lo que dice dontextplain es correcto solo para especificar:
<script type="text/javascript">
$("#submit").click(function(event){
event.preventDefault();
//codigo ajax......
})
</script>
  #4 (permalink)  
Antiguo 11/06/2012, 22:18
 
Fecha de Ingreso: junio-2012
Ubicación: Chile
Mensajes: 3
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Ajax no funciona

Estimados, lamento decirles que probé lo que me dijeron y aún no funciona.
Ni siquiera con ejemplos básicos como editar el php, que devuelva lo que recibe con print_r($_POST); Al parecer tengo un problema con la declaración de ajax o algo por el estilo.

Cambie el submit por el Button como me mencionaron.
Ademas puse este codigo JS

Código Javascript:
Ver original
  1. $("#submit_form").click(function(event){
  2. event.preventDefault();
  3. var msg = $("#formulario").serialize();
  4. alert(msg);
  5. $('.cargando').show();
  6. $.ajax({
  7.   url: 'add.php',
  8.   type: 'POST',
  9.   data: {mensaje:msg, prueba:"hola"},
  10.   cache: false;
  11.   success: function(data) {
  12.     alert(data);
  13.     }
  14. });
  15. })

Pero me sigue redireccionando al PHP.

Como para probar.
  #5 (permalink)  
Antiguo 11/06/2012, 22:28
Avatar de dontexplain  
Fecha de Ingreso: junio-2012
Mensajes: 536
Antigüedad: 11 años, 9 meses
Puntos: 127
Respuesta: Ajax no funciona

Como es un array de datos la instrucción $.ajax es necesario que tras cache: false vaya una coma y no punto y coma. También que en el array de datos se definan clave-> valor entre comillas salvo las variables (msg): {"mensaje":msg, "prueba":"hola"}

En todo caso, es imposible que suceda eso que dices. Has de usar

<button id="submit_form">Enviar</button>

Etiquetas: javascript, jquery, js, 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




La zona horaria es GMT -6. Ahora son las 04:08.