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;
}