Marcofbb Noticias y Artículos Webmasters



Publicidad marcored

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.

Descargar archivos

Via | Tutsplus
Eshost | Kapry

Share

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

Posts Relacionados

Total de Comentarios: 5

Avatar
03/02/2011
7:52 pm

Información Bitacoras.com...

Valora en Bitacoras.com: 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 i......

Avatar
11/10/2011
4:21 am

marcofbb mira no hay algo mas sencillo que ese script para agregar comentarios en php sin sql 🙁

Avatar
alex kk
05/05/2012
5:46 pm

que geta.....copied content

Avatar
26/07/2013
11:29 am

oye el que creo esta web me parece buena la hiciste bien solo ponle mas estilo a la pagina de inicio y las demas pero exelente web

Avatar
andrea
14/08/2015
3:29 pm

buenisimo


Enviar Comentario

(*)

(*)