Enviar formularios sin recargar la página

03/02/2011
7:04 pm
marcofbb

En ocasiones es interesante enviar un formulario sin recargar la página, navegando la Web me encuentro con un sencillo tuto que podemos usar para conseguir este objetivo.

A continuación se lista los pasos y el código que involucra la parte del trabajo con jQuery, los estilos CSS, imágenes y archivos PHP están el ejemplo que puedes descargar al final de esta entrada.

Enviar formulario sin recargar pagina

Para conseguirlo seguimos los siguientes 4 pasos.

1.-Creamos el formulario en HTML

<div id="contact_form">
<form>
    <fieldset>
      <label id="name_label" for="name">Name</label>
      <input id="name" class="text-input" name="name" size="30" type="text" />
      <label id="name_error" class="error" for="name">This field is required.</label>
 
      <label id="email_label" for="email">Return Email</label>
      <input id="email" class="text-input" name="email" size="30" type="text" />
      <label id="email_error" class="error" for="email">This field is required.</label>
 
      <label id="phone_label" for="phone">Return Phone</label>
      <input id="phone" class="text-input" name="phone" size="30" type="text" />
      <label id="phone_error" class="error" for="phone">This field is required.</label>
 
      <input id="submit_btn" class="button" name="submit" type="submit" value="Send" />
    </fieldset>
  </form></div>

2.- Agregamos algo de jQuery

$(function() {
    $(".button").click(function() {
      // validate and process form here
    });
  });

Esta función carga los eventos una vez que el documento HTML esta listo, similar a document.ready.
Por supuesto debes descargar la librería jQuery primero y enlazarla desde tu página.

3.- Se escribe algunas reglas de validación para el formulario en jQuery.

$(function() {
    $('.error').hide();
    $(".button").click(function() {
      // validate and process form here
 
      $('.error').hide();
  	  var name = $("input#name").val();
  		if (name == "") {
        $("label#name_error").show();
        $("input#name").focus();
        return false;
      }
  		var email = $("input#email").val();
  		if (email == "") {
        $("label#email_error").show();
        $("input#email").focus();
        return false;
      }
  		var phone = $("input#phone").val();
  		if (phone == "") {
        $("label#phone_error").show();
        $("input#phone").focus();
        return false;
      }
 
    });
  });

4.- Se procesa el formulario con la función AJAX de jQuery y se retorna un mensaje de usuario.

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
  //alert (dataString);return false;
  $.ajax({
    type: "POST",
    url: "bin/process.php",
    data: dataString,
    success: function() {
      $('#contact_form').html("<div id='message'></div>");
      $('#message').html("<h2>Contact Form Submitted!</h2>")
      .append("<p>We will be in touch soon.</p>")
      .hide()
      .fadeIn(1500, function() {
        $('#message').append("<img id='checkmark' src='images/check.png' />");
      });
    }
  });
  return false;

Imagen sobre jquery formularios sin recargar pagina

La parte de las imágenes y los estilos CSS están en el ejemplo, que puedes descargar desde el enlace, este también incluye los archivos PHP para realizar envío a un e-mail.

Si has trabajado con PHP es muy sencillo modificar el ejemplo, para guardar los datos capturados en el formulario en una base de datos, así también solo cambias las reglas de estilo CSS para que se ajusten al diseño de tu página.

Via | Tutsplus
Eshost | Kapry

¿Necesitas ayuda? o ¿Asesoramiento webmaster? Registrate en nuestro foro de consultas

Posts Relacionados

Marcofbb Noticias y Artículos Webmasters

Enviar formularios sin recargar la página

Total de Comentarios: 5