使用字符串的Ajax联系表单问题

Question

i've been trying to set up a simple contact form with PHP but it isn't working, i used this tutorial and it worked at the first try but when i tried to customize it and add a few fields it failed miserably. I think is something between Ajax and PHP when i send the data but i honestly don't know.

This is the code i'm using:

HTML

<form id="formulariocontacto">
        <fieldset>
            <input type="text" id="name" name="name" class="input-block-level" placeholder="Name">
            <input type="text" id="telefono" name="telefono" class="input-block-level" placeholder="Phone">
            <input type="text" id="email" name="email" class="input-block-level" placeholder="Email">
            <input type="text" id="direccion" name="direccion" class="input-block-level" placeholder="Adress">
            <textarea rows="14" id="comentario" name="comentario" class="input-block-level" placeholder="Comments"></textarea>
            <button type="submit" class="botonform" class="btn btn-warning pull-right">SEND</button>
        </fieldset>
    </form>  

jQuery

 $("#formulariocontacto").submit(function(e){
  e.preventDefault();
  var nombre = $("#name").val();
  var telefono = $("#telefono").val();
  var email = $("#email").val();
  var direccion = $("#direccion").val();
  var comentario = $("#comentario").val();
  var dataString = 'nombre=' + nombre + '&email=' + email + '&comentario=' + comentario + '&telefono' + telefono + '&direccion' + direccion;
  function isValidEmail(emailAddress) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    return pattern.test(emailAddress);
  };

  if (isValidEmail(email) && (comentario.length > 100) && (nombre.length > 1)){
    $.ajax({
    type: "POST",
    url: "procesar.php",
    data: dataString,
    success: function(){
      $('.exito').fadeIn(1000);
    }
    });
  } else{
    $('.error').fadeIn(1000);
  }

  return false;
});

PHP

<?php
// Email Submit
// Note: filter_var() requires PHP >= 5.2.0
if ( isset($_POST['email']) && isset($_POST['nombre']) && isset($_POST['comentario'])  ) {
$name_field=$_POST['nombre'];
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
$telefono_field=$_POST['telefono'];
$direccion_field=$_POST['direccion'];
$mensaje_field=$_POST['comentario'];
$subject=.$_POST['nombre']" V&#237;a mysite.com";
$mensaje="Nombre: $name_field
 Email: $email_field
 Tel&#233;fono: $telefono_field
 Direcci&#243;n: $direccion_field
 Mensaje:
 $mensaje_field";
  // detect & prevent header injections
$test = "/(content-type|bcc:|cc:|to:)/i";
foreach ( $_POST as $key => $val ) {
if ( preg_match( $test, $val ) ) {
  exit;
}
}  
 //send email
 mail( "[e-mail]", $subject, $mensaje, "From: " . $email );
}
?>

Im trying to make a more complete message by adding some extra fields you can see the var "$mensaje" in the PHP

Answer 1

Without knowing what error you're getting or what's not working, I can only presume you're not receiving all of the data that's being submitted?

If so, it is because you're not passing it in the dataString.

 var nombre = $("#name").val();
 var telefono = $("#telefono").val();
 var email = $("#email").val();
 var direccion = $("#direccion").val();
 var comentario = $("#comentario").val();
 var dataString = 'nombre=' + nombre + '&email=' + email + '&comentario=' + comentario + '&telefono=' + telefono + '&direccion=' + direccion;

To sanitise the email input:

$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);

Then your mail function can be:

mail("[e-mail]",$subject,$mensaje,"From:" . $email);

Update

Your ajax call should be:

if (isValidEmail(email) && (comentario.length > 100) && (nombre.length > 1)){
e.preventDefault();
    $.ajax({
        type: "POST",
        url: "procesar.php",
        data: dataString,
        success: function(){
            $('.exito').fadeIn(1000);
        },
        error: function(){
            $('.error').fadeIn(1000);
        }
    });
}

Update 2

  $subject=.$_POST['nombre']" Vía mysite.com";

should be

  $subject=$_POST['nombre']." Vía mysite.com";

That is what's producing the 500 Internal Server Error