Ir al contenido


Foto

Recojer datos de chekboxes y radio buttons. help me!

Comenzado por barrierp , jun 19 2013 12:24

  • Por favor identifícate para responder
5 respuestas en este tema

#1 barrierp

barrierp

    Member

  • Miembros
  • PipPip
  • 13 mensajes
  • LocationArgentina

Escrito 19 junio 2013 - 12:24

Buenas tardes! chicos necesito ayuda, estoy con un formulario de contacto para mi pagina web (aun en edición) y necesito que los clientes rellenen algunos datos . tengo un formulario que funciona perfecto! , aun no tiene css bonita pero si la básica como para ver su funcionamiento al presionar el botón enviar y desplegar algunos mensajes de "enviado" y todo eso. El form envía los datos a un archivo .js capturando la acción del botón "enviar consulta" y el .js lo analiza para luego enviarlo a un PHP quien se encarga de mandar finalmente el mail a mi casilla y a el cliente por medio de una respuesta automática en el mismo PHP. El problema es que dos cosas llegan incompletas (sin datos, llegan en blanco) , una de esas cosas son los checkboxes y otra son los radio buttons. No se que es lo que me esta faltando o lo que estoy haciendo mal. Voy a colocar aquí los 3 códigos en su respectivo orden a ver si alguien encuentra mi problema. Desde ya muchísimas gracias! Ojala pueda de una vez terminar esto por que ya tengo 2 semanas y la vista derrotada!. (^)

php
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>formu</title>
  6. <script type="text/javascript">
  7. function MM_jumpMenu(targ,selObj,restore){ //v3.0
  8.   eval(targ ".location='" selObj.options[selObj.selectedIndex].value "'");
  9.   if (restore) selObj.selectedIndex=0;
  10. }
  11. </script>
  12. <style type="text/css">
  13. .nombre {
  14. }
  15. .email {
  16. }
  17. .telefono {
  18. }
  19. .localidad {
  20. }
  21. .lugardetrabajo {
  22. }
  23. .dimension {
  24. }
  25. .archivos {
  26. }
  27. .consulta {
  28. }
  29. .encuesta {
  30. }
  31.  
  32. .botonenviarlo {
  33. clear: right;
  34. float: right;
  35. }
  36. .perfect {
  37. text-align: center;
  38. display: block;
  39. background-color: #3CF;
  40. width: 200px;
  41. right: auto;
  42. clip: rect(auto,auto,auto,auto);
  43. clear: left;
  44. float: left;
  45. }
  46. .perfect2 {
  47. text-align: center;
  48. display: block;
  49. clear: left;
  50. float: left;
  51. background-color: #F36;
  52. width: 400px;
  53. right: auto;
  54. clip: rect(auto,auto,auto,auto);
  55. }
  56. .transparente {
  57. display: none;
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <form method="post" name="formulariotipopresupuesto">
  63.     <div><input name="nombre" type="text" class="nombre" id="nombre" placeholder="  Nombre"/></div>
  64.     <div><input name="email" type="text" class="email" placeholder="  E-Mail"  /></div>
  65.     <div><input name="telefono" type="text" class="telefono" placeholder="  Telefono" /></div>
  66.   <div><input name="localidad" type="text" class="localidad" placeholder="  Localidad" /></div>
  67.   <div>
  68.     <label>Indique cual sería nuestra área de trabajo:
  69.       <br />
  70.   Puede elegir más de una opción. </label></div>
  71.   <div>
  72.     <table width="717" class="lugardetrabajo">
  73.       <tr>
  74.         <td width="251"><label>
  75.           <input type="checkbox" name="lugardetrabajo[]" value="Interior de una casa."/>
  76.           Interior de una casa.</label></td>
  77.       </tr>
  78.         <td width="454"><label>
  79.           <input type="checkbox" name="lugardetrabajo[]" value="Local de comidas (Ej. Pizzería, rotisería, heladería)"/>
  80.           Local de comidas (Ej. Pizzería, rotisería, heladería)</label></td>
  81.       </tr>
  82.       <tr>
  83.         <td><label>
  84.           <input type="checkbox" name="lugardetrabajo[]" value="Exterior de una casa (Ej. jardín)."/>
  85.           Exterior de una casa (Ej. jardín).</label></td>
  86.         <td><label>
  87.           <input type="checkbox" name="lugardetrabajo[]" value="Un negocio (Ej. Maxi quiosco, ferretería)"/>
  88.         Un negocio (Ej. Maxi quiosco, ferretería)</label></td>
  89.       </tr>
  90.       <tr>
  91.         <td><label>
  92.           <input type="checkbox" name="lugardetrabajo[]" value="Casa y jardín completos."/>
  93.           Casa y jardín completos.</label></td>
  94.         <td><label>
  95.           <input type="checkbox" name="lugardetrabajo[]" value="Un salón (Ej. Iglesia, salón de fiestas)"/>
  96.         Un salón (Ej. Iglesia, salón de fiestas)</label></td>
  97.       </tr>
  98.       <tr>
  99.         <td><label>
  100.           <input type="checkbox" name="lugardetrabajo[]" value="Un techo."/>
  101.           Un techo.</label></td>
  102.         <td><label>
  103.           <input type="checkbox" name="lugardetrabajo[]" value="Escuela o Institución (Ej. Colegio, Jardín de infantes)"/>
  104.         Escuela o Institución (Ej. Colegio, Jardín de infantes)</label></td>
  105.       </tr>
  106.     </table>
  107.   </div>
  108.   <label>De qué tamaño aproximado considera que es el total del lugar a tratar:</label>
  109.   <div>
  110.   <table width="218" class="dimension">
  111.     <tr>
  112.       <td><label>
  113.         <input type="radio" name="dimension" value="Grande"/>
  114.         Grande.</label></td>
  115.     </tr>
  116.     <tr>
  117.       <td><label>
  118.         <input type="radio" name="dimension" value="Mediano"/>
  119.         Mediano</label></td>
  120.     </tr>
  121.     <tr>
  122.       <td><label>
  123.         <input type="radio" name="dimension" value="Chico"/>
  124.         Chico.</label></td>
  125.     </tr>
  126.   </table>
  127.   </div>
  128.   <label>Si lo desea puede enviarnos una foto del lugar o la plaga que lo esté afectando.
  129.   De esta forma el presupuesto puede ser más detallado:</label>
  130.   <div><input name="enviarfoto" type="file" class="archivos" /></div>
  131.   <div><textarea name="consulta" cols="" rows="" class="consulta" placeholder="  Consulta..."></textarea></div>
  132.   <label>Como conoció nuestra web?</label>
  133.   <div><select name="encuesta" id="encuesta" class="encuesta" >
  134. <option>-Por Facebook.</option>
  135.     <option>-A traves de otra web.</option>
  136.     <option>-Por revista publicitaria.</option>
  137.     <option>-Buscando en Google</option>
  138.     <option selected="selected">-Elija una respuesta...</option>
  139.   </select></div>
  140.  
  141.   <div id="perfecto" class="perfect" style="display:none">enviado!
  142.                 </div>
  143.       <div id="road" class="perfect2 transparente" >pensando...
  144.       </div> 
  145.  
  146.        
  147.   <button class="botonenviarlo">ENVIAR CONSULTA</button>
  148. </form>
  149. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  150. <script type="text/javascript" src="scripts/funcionesdos.js"></script>
  151. </body>
  152. </html>


javascript
  1. (function(){
  2.     $(".botonenviarlo").click(function() {
  3.  
  4.         var check = $("input[type='checkbox']:checked").length;
  5.         var radio = $("input[type='radio']:checked").length;
  6.  
  7.         var nombre = $(".nombre").val();
  8.             email = $(".email").val();
  9.             validacion_email = /^[a-zA-Z0-9_\.\-] @[a-zA-Z0-9\-] \.[a-zA-Z0-9\-\.] $/;
  10.             telefono = $(".telefono").val();
  11.     localidad= $(".localidad").val();
  12.     consulta = $(".consulta").val();
  13.             encuesta= $(".encuesta").val();
  14.            
  15.  
  16.         if (nombre == "") {
  17.             $(".nombre").focus();
  18.             return false;
  19.         }else if(email == "" || !validacion_email.test(email)){
  20.             $(".email").focus();   
  21.             return false;
  22.     }else if(telefono == ""){
  23.             $(".telefono").focus();
  24.             return false;
  25. }else if(localidad == ""){
  26.             $(".localidad").focus();
  27. return false;
  28.         }else if(consulta == ""){
  29.             $(".consulta").focus();
  30.             return false;
  31.         }else{
  32.  
  33.         $('.perfect2').removeClass('transparente');
  34.        
  35. var datos = 'nombre='  nombre  '&email='  email  '&encuesta='  encuesta  '&check='  check  '&telefono='  telefono  '&consulta='  consulta  '&localidad='  localidad ;
  36. $.ajax({
  37.     type: "POST",
  38.     url: "envio.php",
  39.     data: datos,
  40.     success: function()
  41. {
  42. $('.perfect2').hide();
  43.         $('#perfecto').delay(500).fadeIn('slow');
  44.     $('form[name=formulariotipopresupuesto]').get(0).reset();
  45.         $('#perfecto').delay(5000).fadeOut('slow');
  46.     },
  47.     error: function() {
  48.         $('#fracaso').delay(500).fadeIn('slow');         
  49.     }
  50. });
  51. return false;
  52.  
  53.         }
  54.  
  55.     });
  56. })();


php
  1. <?php
  2. // Guardar los datos recibidos en variables:
  3. $nombre = $_POST['nombre'];
  4. $email = $_POST['email'];
  5. $telefono = $_POST['telefono'];
  6. $localidad = $_POST['localidad'];
  7. $encuesta = $_POST['encuesta'];
  8. $consulta = $_POST['consulta'];
  9. $lugardetrabajo= $_POST['lugardetrabajo'];
  10. $dimension= $_POST['dimension'];
  11.  
  12. // Definir el correo de destino:
  13. $dest = "barriercontroldeplagas@gmail.com";
  14.  
  15. // Estas son cabeceras que se usan para evitar que el correo llegue a SPAM:
  16. $headers = "From: $nombre <$email>\r\n"; 
  17. $headers .= "X-Mailer: PHP5\n";
  18. $headers .= 'MIME-Version: 1.0' . "\n";
  19. $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
  20.  
  21. // Aqui definimos el asunto y armamos el cuerpo del mensaje
  22. $asunto = "Consulta desde formulario BARRIER web site.";
  23. $cuerpo = "Este mensaje fue enviado por ".$nombre."<br>";
  24. $cuerpo .= "Su Email es: ".$email."<br>";
  25. $cuerpo .= "Numero de telefono: ".$telefono."<br>";
  26. $cuerpo .= "Vive en: ".$localidad."<br>";
  27. $cuerpo .= "Como conocio la pagina web? ".$_POST['encuesta'] . "<br>";
  28. $cuerpo .= "El lugar a tratar es: ".$lugardetrabajo."<br>";
  29. $cuerpo .= "Considera el cliente que el total del lugar es: ".$dimension. "<br>";
  30. $cuerpo .= "Consulta: ".$consulta. "<br>";
  31. $cuerpo .= "Enviado el: " . date('d/m/Y', time());
  32.  
  33. // Esta es una pequena validación, que solo envie el correo si todas las variables tiene algo de contenido:
  34. if($nombre != '' && $email != '' && $telefono != '' && $encuesta != '' && $consulta != ''){
  35.     mail($dest,$asunto,$cuerpo,$headers); //ENVIAR!
  36.  
  37. //Enviando auto respuesta.
  38. $pfw_header = "From: barriercontroldeplagas@gmail.com\n"
  39. . "Reply-To: barriercontroldeplagas@gmail.com\n";
  40.                 $headers = "From: $nombre <$email>\r\n"; 
  41. $pfw_subject = "Tu consulta fue recibida";
  42. $pfw_email_to = "$email";
  43. // Estas son cabeceras que se usan para evitar que el correo llegue a SPAM:
  44. $headers = "From: $nombre <$email>\r\n"; 
  45. $headers .= "X-Mailer: PHP5\n";
  46. $headers .= 'MIME-Version: 1.0' . "\n";
  47. $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
  48.  
  49. $pfw_message = "Muchas Gracias $nombre por contactar con BARRIER Control De Plagas\n"
  50. . "Tu consulta fue recibida satisfactoriamente. \n"
  51.  
  52. . "Nos pondremos en contanto contigo lo antes posible a tu E-mail: $email \n"
  53. . "Si no respondemos por e-mail nos comunicaremos al: $telefono \n"
  54. . " \n"
  55. . "--------------------------------------------------------------------------\n"
  56.                 . "Por favor de NO responda este mensaje ya que es generado Automaticamente.\n"
  57.                 . "BARRIER-Control De Plagas.\n"
  58. . "Tel: (011) 4233-7274.\n"
  59.                 . "www.barrierplagas.com.ar.\n";
  60.  
  61. @mail($pfw_email_to, $pfw_subject ,$pfw_message ,$pfw_header ) ;
  62. }
  63. ?>


  • 0

#2 poliburro

poliburro

    Advanced Member

  • Administrador
  • 4.945 mensajes
  • LocationMéxico

Escrito 19 junio 2013 - 02:22

Amigo, es importante aclarar que cuando los radio o check están en false, estos no son enviados al servidor.  Yo lo que hago para saber si llegaron valores desde esos controles es usando la función isset en php.

Saludos
  • 0

#3 barrierp

barrierp

    Member

  • Miembros
  • PipPip
  • 13 mensajes
  • LocationArgentina

Escrito 19 junio 2013 - 02:59

a, bueno gracias por responder. Y eso de los false influye en mis códigos? . en verdad no entiendo mucho, hice todo esto a fuerza de ..esfuerzo. Y en verdad no se si debería hacer algo con lo que mencionas.
  • 0

#4 Sephiroth_801

Sephiroth_801

    Member

  • Miembros
  • PipPip
  • 26 mensajes

Escrito 26 junio 2013 - 09:21

Por lo que vi en tú código, no estás recogiendo el valor de los checkbox y radio button, solo su largo.

Definimos las variables:
var arreglo_checkbox = [];
var radio = '';


Recogemos los inputs de tipo checked, que están seleccionados y los guardamos en un arreglo.
$("input[type='checkbox']:checked").each(function() {
            arreglo_checkbox.push($(this).val());
        });


Seleccionamos el valor del radio button.
var radio = $("input[type='radio']:checked").val();


Para el envío, los valores del checkbox van a quedar separados por comas en caso de ser más de uno:

var datos = 'arreglo_checkbox='+arreglo_checkbox+'&radio='+radio;


También tienes que tener en cuenta que si estos elementos del formulario no están al menos uno seleccionado, las variables pueden quedar vacías o indefinidas.

Yo realice un 
print"<pre>";print_r($_POST);print "</pre>";
para mostrar los datos en el archivo envia.php, el cual procesa la llamada vía ajax y me arroja por ejemplo esto:

Array
(
    [arreglo_checkbox] => Interior de una casa.,Local de comidas (Ej. Pizzería, rotisería, heladería)
    [radio] => Grande
)

  • 0

#5 barrierp

barrierp

    Member

  • Miembros
  • PipPip
  • 13 mensajes
  • LocationArgentina

Escrito 27 junio 2013 - 08:42

Perfecto, se me abrió la cabeza y mira lo solucione asi:

$cuerpo .= "El lugar a tratar es: ".implode(',',$lugardetrabajo)."<br>";


muchas gracias!
  • 0

#6 poliburro

poliburro

    Advanced Member

  • Administrador
  • 4.945 mensajes
  • LocationMéxico

Escrito 27 junio 2013 - 08:46

Perfecto, se me abrió la cabeza y mira lo solucione asi:

$cuerpo .= "El lugar a tratar es: ".implode(',',$lugardetrabajo)."<br>";


muchas gracias!


Gracias por compartir la solución.
  • 0
Volver a PHP, Ajax, Javascript y HTML


  1. Comunidad Delphiaccess
  2. → PROGRAMACIÓN
  3. → Otros Lenguajes (.NET, Web, C, C++, Java, ASM)
  4. → PHP, Ajax, Javascript y HTML
  5. Privacy Policy
IP.Board spam blocked by CleanTalk.