Ajax no funciona

oscarbravo · #1 (**permalink**) 11/06/2012, 21:42

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;

}

dontexplain · #2 (**permalink**) 11/06/2012, 21:52

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<form><input type="text" id="input_form"><br/><button id="submit_form"></button></form>
 
<script>
 
$("#submit_form").click(function(){
 valor1= $("#input_form").val()
 
$.ajax({
  url: 'proceso.php',
  type: 'POST',
  data: {"campo1": valor1},
  success: function(data) {
   if(data == 1){
alert("todo ok");
}
  }
 
});
})
 
</script>

Un saludo.

ybp · #3 (**permalink**) 11/06/2012, 22:09

lo que dice dontextplain es correcto solo para especificar:
<script type="text/javascript">
$("#submit").click(function(event){
event.preventDefault();
//codigo ajax......
})
</script>

oscarbravo · #4 (**permalink**) 11/06/2012, 22:18

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$("#submit_form").click(function(event){
event.preventDefault();
var msg = $("#formulario").serialize();
alert(msg);
$('.cargando').show();
$.ajax({
  url: 'add.php',
  type: 'POST',
  data: {mensaje:msg, prueba:"hola"},
  cache: false;
  success: function(data) {
    alert(data);
    }
});
})

Pero me sigue redireccionando al PHP.

Como para probar.

dontexplain · #5 (**permalink**) 11/06/2012, 22:28

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>