Comunidad de diseño web y desarrollo en internet online

Envío datos formulario

Citar            
MensajeEscrito el 27 May 2013 06:50 am
Buenas, tengo un formulario en html que valida los datos mediante un fichero jQuery/Javascript y envía los datos mediante php. El código del html

Código HTML :

<div class="container">
      <form name="formulario" id="formulario" method="post" action="envio.php">
      <div><label for="nombre">Nombre: </label>
      <input type="text" name="nombre" id="nombre" size="60"><span id="validar-nombre"></span></div>
      <div><label for="correo">Correo:</label>
      <input type="text" name="correo" id="correo" size="60"/><span id="validar-correo"></span></div>

      <div><label for="telefono">Telefono</label>
      <input type="text" name="telefono" id="telefono" size="60"/><span id="validar-telefono"></span></div>
      <div><label for="poblacion">Poblacion</label>
      <input type="text" name="poblacion" id="poblacion" size="60"/><span id="validar-poblacion"></span></div>
      <label>¿C&oacute;mo nos has conocido?:</label>
      <input name="conoce" type="radio" id="conoce" value="Internet" checked="checked" />
      Internet
      <input type="radio" name="conoce" id="conoce" value="Ferias" />
      Ferias
      <input type="radio" name="conoce" id="conoce" value="Amigos" />
      Amigos               
      <input type="radio" name="conoce" id="conoce" value="Cliente" />
      Soy cliente
      <input type="radio" name="conoce" id="conoce" value="Publicidad" />
      Publicidad
       <input type="radio" name="conoce" id="conoce" value="Otros" />
      Otros
      <label for="mensaje">Mensaje: </label>
      <textarea name="mensaje" id="mensaje" rows="10" cols="56"></textarea><span id="validar-mensaje"></span>
      <p id="envio"><input type="submit" name="enviar" id="enviar" value="Enviar" /></p>
      <p id="borrar"><input type="reset" name="borrar" id="borrar" value="Borrar" /><p/>                     
      </form>
</div>




El Javascript:

Código Javascript :

$(function(){
   
   var valor;
   var i = 0;
   
   $('#nombre').focus(function(){
      
      $('#resultado-nombre').remove();
      $('#validar-nombre').append('<p class="advertencia">* Obligatorio</p>');
      
   });
   
   $('#nombre').blur(function(){
      
      $('.advertencia').remove();
      
      valor = $('#nombre').val();
      
      if(valor != '') {
         $('<img src="imagenes/accept.png" id="resultado-nombre" />').appendTo('#validar-nombre');
      }
      else {
         $('<img src="imagenes/delete.png" id="resultado-nombre" />').appendTo('#validar-nombre');
      }
      
   });
   
   $('#correo').focus(function(){
      
      $('#resultado-correo').remove();
      $('#validar-correo').append('<p class="advertencia">* Obligatorio</p>');
      
   });
   
   $('#correo').blur(function(){
      
      $('.advertencia').remove();
      
      valor = $('#correo').val();
      
      if(valor != '') {
         
         if(validaCorreo(valor)){
            
            $('<img src="imagenes/accept.png" id="resultado-correo" />').appendTo('#validar-correo');
         
         }
         else {
            $('<span id="resultado-correo">Correo no valido</span>').appendTo("#validar-correo");
         }
      }
      else {
         $('<img src="imagenes/delete.png" id="resultado-correo" />').appendTo('#validar-correo');
      }
      
   });
   
   
   
   
   
   
   $('#telefono').focus(function(){
      
      $('#validar-telefono').append('<p class="advertencia">* Opcional</p>');
      
   });
   
   $('#telefono').blur(function(){
      
      $('.advertencia').remove();
      
   });
   
   
   
   $('#poblacion').focus(function(){
      
      $('#validar-poblacion').append('<p class="advertencia">* Opcional</p>');
      
   });
   
   $('#poblacion').blur(function(){
      
      $('.advertencia').remove();
      
   });
   
   
   
   $('#conoce').focus(function(){
      
      $('#validar-conoce').append('<p class="advertencia">* Opcional</p>');
      
   });
   
   $('#conoce').blur(function(){
      
      $('.advertencia').remove();
      
   });
   
   
   
   
   
   
   $('#mensaje').focus(function(){
      
      $('#resultado-mensaje').remove();
      $('#validar-mensaje').append('<p class="advertencia">* Obligatorio</p>');
      
   });
   
   $('#mensaje').blur(function(){
      
      $('.advertencia').remove();
      
      valor = $('#mensaje').val();
      
      if(valor != '') {
         $('<img src="imagenes/accept.png" id="resultado-mensaje" />').appendTo('#validar-mensaje');
      }
      else {
         $('<img src="imagenes/delete.png" id="resultado-mensaje" />').appendTo('#validar-mensaje');
      }
      
   });
   
   $('#enviar').click(function(){
      
      if($('#nombre').val()!= '' && $('#correo').val()!='' && $('#mensaje').val()!='') {
         
         $('.advertencia').remove();
         
         $('#envio').append('<img src="imagenes/ajax-loader.gif" alt="Procesando envio" id="cargando" />');
         
         var nombre = $('#nombre').val();
         var correo = $('#correo').val();
         var telefono = $('#telefono').val();
         var poblacion = $('#poblacion').val();
         var conoce = $('#conoce').val();
         var mensaje = $('#mensaje').val();
         
         $.ajax({
            url: 'envio.php',
            type: 'POST',
            data: 'nombre=' + nombre + '&correo=' + correo + '&telefono=' + telefono + '&poblacion=' + poblacion + '&conoce=' + conoce +'&mensaje=' + mensaje,
            
            success: function(resultado) {
               $('#respuesta').remove();
               $('#envio').append('<span id="respuesta">' + resultado + '</span>');
               $('#cargando').fadeOut(500, function() {
                  $(this).remove();
               });
               
            }
         });
         
         return false;
      
         
      }
      else {
         $('#envio').append('<span class="advertencia">Debe completar los datos requeridos.</span>');
         return false;
      }
      
   });
   
   
});

function validaCorreo(correo) {
   
   var expresion = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
   return expresion.test(correo);

}



Y el envío en PHP:

Código PHP :

<?php
   $nombre = $_POST['nombre'];
   $correo = $_POST['correo'];
   $telefono = $_POST['telefono'];
   $poblacion = $_POST['poblacion'];
   $conoce = $_POST['conoce'];
   $mensaje = $_POST['mensaje'];
   
   
   $destino = "[email protected]";
   $asunto = "Consulta desde página web";
   
   $cuerpo = "<strong>Nombre: </strong>".$nombre."<br />
            <strong>Correo: </strong>".$correo."<br />
            <strong>Telefono: </strong>".$telefono."<br />
            <strong>Poblacion: </strong>".$poblacion."<br />
            <strong>Conoce: </strong> ".$conoce."<br />
            <strong>Mensaje: </strong>".$mensaje;
   
   
   $cabecera = "MIME-Version: 1.0\r\n";
   $cabecera .= "Content-type:text/html; charset=iso-8859-1\r\n";
   $cabecera .= "From: $correo\r\n";
   $cabecera .= "Reply-to: $correo\r\n";
   $cabecera .= "Cc: $correo\r\n";
   
   
   if(mail($destino, $asunto, $cuerpo, $cabecera)) {
      echo 'Su mensaje ha sido enviado, en breve nos pondremos en contacto con Ud.';
   }
   else {
      echo 'No se pudo enviar el mensaje. Int&eacute;ntelo de nuevo';
   }
   
   
   
?>


El formulario funciona perfectamente, valida los datos y me llegan bien, salvo los de la parte del html que pongo a continuación (el usuario tiene que elegir entre las opciones que lo doy) y siempre me llega como respuesta la primera opción, supongo que algo estoy haciendo mal ¿alguien me ayuda? Muchas gracias.

Código HTML :

<label>¿C&oacute;mo nos has conocido?:</label>
<input name="conoce" type="radio" id="conoce" value="Internet" checked="checked" />
Internet
<input type="radio" name="conoce" id="conoce" value="Ferias" />
Ferias
<input type="radio" name="conoce" id="conoce" value="Amigos" />
Amigos
<input type="radio" name="conoce" id="conoce" value="Cliente" />
Soy cliente
<input type="radio" name="conoce" id="conoce" value="Publicidad" />
Publicidad
<input type="radio" name="conoce" id="conoce" value="Otros" />
Otros

Por amirac

6 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 May 2013 12:25 pm
Lo que sucede es que tienes el mismo ID para muchos elementos. Esto es incorrecto. No debe repetirse el mismo ID en todos el documento HTML.

En esta parte del código:

Código Javascript :

 var conoce = $('#conoce').val();

LO que hace es tomar el valor del primer elemento que tenga ese ID. Independientemente de si está "checked" o no.

O propósito, ya que estás usando JQuery. Podrías usar el método .serialize() sobre el <form>, así no tienes que recolectar los valores uno por uno.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 27 May 2013 02:38 pm
Muchas gracias por tu tiempo, voy a cambiar las id del html y buscar cómo variar el código javascript para que envíe sólo el valor seleccionado.

Por amirac

6 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.