Ver Mensaje Individual
  #1 (permalink)  
Antiguo 04/04/2019, 10:41
Avatar de tampon
tampon
 
Fecha de Ingreso: julio-2009
Mensajes: 420
Antigüedad: 14 años, 9 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>