Foros del Web » Programando para Internet » Javascript »

Problema con formulario y serialize()

Estas en el tema de Problema con formulario y serialize() en el foro de Javascript en Foros del Web. Hola estoy trabajando con este formulario que me llego pero envia fatos mediante la funcion serialize() de la cual no estoy familiarizado, ya estuve leyendo ...
  #1 (permalink)  
Antiguo 04/04/2019, 10:41
Avatar de tampon  
Fecha de Ingreso: julio-2009
Mensajes: 420
Antigüedad: 10 años, 2 meses
Puntos: 0
Problema con formulario y serialize()

Hola estoy trabajando con este formulario que me llego pero envia fatos mediante la funcion serialize() de la cual no estoy familiarizado, ya estuve leyendo unos manuales pero no termina de funcionar o mas bien no termino de entender su funcionamiento ¿alguien esta familiariazo que me pueda echar una mano? Gracias.


Código Javascript:
Ver original
  1. var sm_contactForm = function (sel) {
  2.     var name_pattern   = /^[a-zA-Z\s]+$/;
  3.     var email_pattern  = /(.+)@(.+){2,}\.(.+){2,}/;
  4.     var number_pattern = /^-?\d+\.?\d*$/;
  5.  
  6.     var $sel           = $(sel);
  7.     var $form          = $sel.find('form');
  8.     var $name_input    = $form.find('.name');
  9.     var $email_input   = $form.find('.email');
  10.     var $phone_input   = $form.find('.phone');
  11.     var $company_input   = $form.find('.company');
  12.     var $message_input = $form.find('.message');
  13.     var $errorMsg       = $form.find('.errorMsg');
  14.  
  15.     $form.on('submit', function(e) {
  16.         e.preventDefault();
  17.  
  18.         if (!name_pattern.test($name_input.val())) {
  19.             $errorMsg.text('Por favor escribe tu nombre.');
  20.         } else if (!email_pattern.test($email_input.val())) {
  21.             $errorMsg.text('Por favor escribe tu correo electrónico.');
  22.         } else if (!number_pattern.test($phone_input.val())) {
  23.             $errorMsg.text('Por favor escribe tu telefono.');
  24.         } else if (!$message_input.val()) {
  25.             $errorMsg.text('Por favor escribe tu mensaje.');
  26.         } else {
  27.             $.ajax({
  28.                 type: 'POST',
  29.                 url: 'php/contact.php',
  30.                 data: $("#smForm-1").serialize() + "name=" + name_input + "&email=" + email_input + "&company=" + company_input + "&phone=" + phone_input + "&message=" + message_input,
  31.                 success: function() {
  32.                     var $title        = $form.parent().find('.title');
  33.                     var $p            = $form.parent().find('p');
  34.                     var $close        = $form.parent().find('.close');
  35.                     var titleInitText = $title.text();
  36.                     var pInitText     = $p.text();
  37.                     var closeInitText = $close.text();
  38.  
  39.                     $errorMsg.text('');
  40.                     $title.text('Gracias.');
  41.                     $p.text('hasta luego.');
  42.                     $close.text('Ocultar formulario.').css('margin-top', '20px');
  43.                     $form.slideUp();
  44.  
  45.                     setTimeout(function(){
  46.                         $sel.SlickModals('closePopup');
  47.                         setTimeout(function () {
  48.                             $title.text(titleInitText);
  49.                             $p.text(pInitText);
  50.                             $close.text(closeInitText);
  51.                             $form.slideDown();
  52.                         }, 2000);
  53.                     }, 4000); // Auto close timeout in milliseconds
  54.                 },
  55.                 error: function() {
  56.                     $errorMsg.text('Algo salió mal. Inténtalo de nuevo.');
  57.                 }
  58.             });
  59.         }
  60.     })
  61. };

Código HTML:
<form name="smForm-1" id="smForm-1">
                <input type="text" id="name" class="field name" placeholder="Nombre" minlength="3" />
                <input type="email" id="email" class="field email" placeholder="Correo electr&oacute;nico" />
                <input type="tel" id="phone" class="field phone" placeholder="Tel&eacute;fono" />
                <input type="text" id="company" class="field phone" placeholder="Nombre de tu empresa" />
                <input type="text" id="message" class="field message" placeholder="Mensaje" />
                <input type="submit" id="form-submit" class="send cta" value="Enviar mensaje" />
                <div class="errorMsg"></div>
            </form> 
  #2 (permalink)  
Antiguo 04/04/2019, 12:37
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.470
Antigüedad: 11 años, 6 meses
Puntos: 1073
Respuesta: Problema con formaulario y serialize()

esta linea esta mal
Código Javascript:
Ver original
  1. data: $("#smForm-1").serialize() + "name=" + name_input + "&email=" + email_input + "&company=" + company_input + "&phone=" + phone_input + "&message=" + message_input,

Debe ser
Código Javascript:
Ver original
  1. data: $("#smForm-1").serialize(),

Eso te enviara todos los campos en una linea de texto, en el servidor debes parsear esto y convertirlo a variables
https://www.php.net/manual/es/function.parse-str.php

Si sigues teniendo problemas prueba usar la clase FormData() de javascript en lugar de serialize y/o deja de usar jQuery a pro de Axios para el envio de formularios.



La zona horaria es GMT -6. Ahora son las 18:09.