title: Jquery Ajax multiple dynamic forms and php processing don't work
body: <p>I have multiple dynamic forms (with php) where a can send an email with each one when i press the submit button. The problem is when i send the form information to php, with ajax. I'm doing something wrong, because the email doesn't show anything.</p>
  
  <p>This is the code of every form:</p>
  
  <pre><code>&lt;form action="enviar_cotizacion.php" method="post" id="form_&lt;?php echo $articulos[3]; ?&gt;" name="form_&lt;?php echo $articulos[3]; ?&gt;"&gt;
      &lt;p class="pInlineBlock2"&gt;
          &lt;label class="label_cotizacion"&gt;Nombre:&lt;/label&gt;
          &lt;input type="text" id="txt_nombre" name="txt_nombre" class="txt_cotizacion" required/&gt;
      &lt;/p&gt;
  
      &lt;p class="pInlineBlock2"&gt;
          &lt;label class="label_cotizacion"&gt;Apellido:&lt;/label&gt;
          &lt;input type="text" id="txt_apellido" name="txt_apellido" class="txt_cotizacion" required/&gt;
      &lt;/p&gt;
  
      &lt;p class="pInlineBlock2"&gt;
          &lt;label class="label_cotizacion"&gt;Teléfono:&lt;/label&gt;
          &lt;input type="text" id="txt_tel" name="txt_tel" class="txt_cotizacion" required/&gt;
      &lt;/p&gt;
  
      &lt;p class="pInlineBlock2"&gt;
          &lt;label class="label_cotizacion"&gt;Email:&lt;/label&gt;
          &lt;input type="text" id="txt_mail" name="txt_mail" class="txt_cotizacion" required/&gt;
      &lt;/p&gt;
  
      &lt;p class="pInlineBlock2"&gt;
          &lt;label class="label_cotizacion"&gt;Producto:&lt;/label&gt;
          &lt;input type="text" id="txt_servicio" name="txt_servicio" class="txt_cotizacion" required/&gt;
      &lt;/p&gt;
  
      &lt;p class="pBlock"&gt;
          &lt;label class="span_coti"&gt;Especificación Técnica:&lt;/label&gt;
          &lt;textarea id="txt_espec_tecnica" name="txt_espec_tecnica" class="txt_area_cotizacion" required&gt;&lt;/textarea&gt;
      &lt;/p&gt;
  
      &lt;p class="pBlock"&gt; &lt;input type="submit" id="btn_aceptar" value="COTIZAR"/&gt;&lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>So, i have X amount of forms with different ID and name.</p>
  
  <p>The following code is the validation of them.</p>
  
  <pre><code>$("form").each(function() {
  $(this).validate({
      rules:{
          txt_nombre:{
              required:true,
              maxlength:140
          },
          txt_apellido:{
              required:true,
              maxlength:140
          },
          txt_tel:{
              required:true
          },
          txt_mail:{
              required:true,
              email: true
          },
          txt_servicio:{
              required:true,
              maxlength:140
          },
          txt_espec_tecnica:{
              required:true
          }
      },
      messages:{
          txt_nombre:{
              required:"Este dato es obligatorio.",
              maxlength:"El nombre no puede tener mas de 140 caracteres"
          },
          txt_apellido:{
              required:"Este dato es obligatorio.",
              maxlength:"El apellido no puede tener mas de 140 caracteres"
          },
          txt_tel:{
              required:"Este dato es obligatorio."
          },
          txt_mail:{
              required:"Este dato es obligatorio",
              email: "Escriba un email válido"
          },
          txt_servicio:{
              required:"Este dato es obligatorio.",
              maxlength:"El nombre no puede tener mas de 140 caracteres"
          },
          txt_espec_tecnica:{
              required:"Este dato es obligatorio."
          }
      },
      submitHandler: function(form) {
          var nombre = $("#txt_nombre").val();
          var apellido = $("#txt_apellido").val();
          var email = $("#txt_mail").val();
          var telefono = $("#txt_tel").val();
          var producto = $("#txt_servicio").val();
          var espec_tecnica = $("#txt_espec_tecnica").val();
          var dataString = 'nombre=' + nombre + '&amp;apellido=' + apellido + '&amp;telefono=' + telefono + '&amp;email=' + email+ '&amp;producto=' + producto+ '&amp;espec_tecnica=' + espec_tecnica;
          $.ajax({
      type:"POST",
              data: dataString,
              url:"enviar_cotizacion.php",
              success: function(){
                alert('Cotizacion enviada correctamente');
              },
              error   : function (jqXHR, textStatus, errorThrown) {
                    alert('Error al enviar cotizacion');
              }
          });
          return false; // Temporary
      }
  });
  </code></pre>
  
  <p>});</p>
  
  <p>I have tried the <em>data: $(this).serialize()</em> function instead of <em>data: dataString</em>, but doesn't work either.</p>
  
  <p>And the php code, very simple only for testing.</p>
  
  <pre><code>&lt;?php
  $nombre = $_POST['nombre']." ".$_POST['apellido'];
  $telefono = $_POST['telefono'];
  $email = $_POST['email'];
  $producto = $_POST['producto'];
  $espec_tecnica = $_POST['espec_tecnica'];
  $para = 'xxxxxxxxxxxxx@dominio.com';
  $titulo = 'Cotizacion';
  $header = 'From: ' . $email;
  $msjCorreo = "Nombre: $nombre\n E-Mail: $email\n Producto:\n $producto";
  mail($para, $titulo, $msjCorreo, $header);
  ?&gt;
  </code></pre>
  
  <p>So, if I put this on jquery code, on $.ajax():</p>
  
  <pre><code>var nombre = "james";
  var apellido = "smith";
  var email = "james@gmail.com";
  var telefono = "123456";
  var producto = "agitadores";
  var espec_tecnica = "i want to know the price of this product, please";
  var dataString = 'nombre=' + nombre + '&amp;apellido=' + apellido + '&amp;telefono=' + telefono + '&amp;email=' + email+ '&amp;producto=' + producto+ '&amp;espec_tecnica=' + espec_tecnica;
  </code></pre>
  
  <p>I can receive an email with this data. But, if I try to get the information from the form I selected, I receive a blank email. Which is the problem? what am i doing wrong? Thanks for all your help.</p>
  
  <p>=================================UPDATE===============================================
  <strong>Here is the solution!</strong></p>
  
  <p>My error was on php and jquery code: Here you have the changes I made:</p>
  
  <p>On js:</p>
  
  <pre><code>submitHandler: function(form) {
          var dataString=$(form).serialize();
          $.ajax({
              type    : 'POST',
              url     : 'enviar_cotizacion.php',// write code to send mail in mail.php
              data    : dataString,
              cache   : false,
              dataType: 'text',
              success : function (serverResponse) { 
                    alert('mail sent successfully.'); 
              },
              error   : function (jqXHR, textStatus, errorThrown) {
                    alert('error sending mail');
              }
          });
          alert(dataString);
          return false; /*$// Temporary*/
      }
  </code></pre>
  
  <p>On php:</p>
  
  <pre><code>&lt;?php
  $nombre = $_POST['txt_nombre']." ".$_POST['txt_apellido'];
  $telefono = $_POST['txt_tel'];
  $email = $_POST['txt_mail'];
  $producto = $_POST['txt_servicio'];
  $espec_tecnica = $_POST['txt_espec_tecnica'];
  $para = 'test@gmail.com';
  $titulo = 'Cotizacion desde ASDF';
  $header = 'From: ' . $email;
  $msjCorreo = "Nombre: $nombre\n E-Mail: $email\n Producto:\n $producto";
  
  mail($para, $titulo, $msjCorreo, $header);
  ?&gt;
  </code></pre>
  
  <p>And that's it :) I hope this answer can be usefull for other people.</p>