Enviar formulario con Ajax utilizando jQuery

Interesante script para enviar los datos de un formulario html sin necesidad de recargar la página, es decir con AJAX, usando jQuery. Los datos son recibidos por un script hecho en PHP.

El ejemplo que utilizamos se trata de un formulario que espera a que el usuario introduzca su nombre, email y teléfono. Estos datos son validados con jQuery y hasta que no sean correctos no se procesará el formulario.

Una vez los datos introducidos sean correctos y se pulse el botón «Enviar» se ejecuta un archivo PHP que procesa esos datos enviándolos a la dirección de correo facilitada en el campo email. Todo este proceso sin recargar la página.

Dentro del código jQuery debemos introducir algo como lo que sigue para poder trabajar con ajax y php:

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;

$.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Tus datos han sido enviados correctamente!</h2>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
     });
    return false;
});

Si observamos el código anterior vemos que el objeto ajax recibe los datos mediante POST para pasárselos al archivo .php para que los procese. Al realizar esta acción, nos informa sobre ello.

Cabe mencionar que antes de utilizar ajax para pasar los datos al archivo php es interesante validar cada dato mediante jQuery. Por ejemplo, para validar el nombre de usuario podríamos hacer antes algo como esto:

var name = $("input#name").val();
if (name == "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
}

En este caso primero obtenemos el valor del input con id=»name» y si está vacio mostraremos un error en el <label> con id=»name_error».

Ver ejemplo en funcionamiento