Plugin JQuery Form

form

form

El tradicional envío de datos desde formularios ha cambiado mucho con el fin de optimizar esta tarea y brindar mejores experiencias de usuario, en esta entrada veremos como realizar un envío de formulario hacia una base de datos MYSQL haciendo uso del plugin JQuery Form. Un plugin con métodos interesantes como ajaxForm y ajaxSubmit (Entre muchos otros) que nos permite gestionar el manejo de la información enviada de una forma bastante sencilla veamos:

Primero que todo diseñemos un formulario ejemplo dando un poco de elegancia con boostrap (que no es obligatorio):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
< !DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>JQuery Form</title>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <script src="js/jquery.min.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <script>
        $(document).ready(function() {
            $('#FrmEnviar').ajaxForm(function() {
                alert("Sus datos han sido registrados con éxito!");
            });
        });
    </script>
</head>
<body>
  <form role="form" action="registrar.php" method="post" id="FrmEnviar">
              <br />
              <div class="col-lg-12">
                <div class="form-group">
                  <label>Nombres</label>
                  <input name="nombres" class="form-control" required/>
                </div>

                <div class="form-group">
                  <label>ocupacion</label>
                  <input name="ocupacion" class="form-control" required/>
                </div>

                <div class="form-group">
                  <label>Teléfono</label>
                  <input name="telefono" class="form-control" required/>
                </div>

                <div class="form-group">
                  <label>Sitio Web</label>
                  <input name="sitioweb" class="form-control" required/>
                </div>

                <button type="submit" class="btn btn-info btn-lg">
                  <span aria-hidden="true"></span> Guardar
                </button>

              </div>
            </form>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Si se dan cuenta el formulario no cambia en absolutamente nada, seguimos colocando un action y el script php que hará la tarea de insertar los datos, con la diferencia de que mediante JQuery accedemos a el mediante su selector id, para posteriormente hacer envío mediante ajaxForm, recuerden hacer el respectivo llamado de la libreria JQuery como JQuery.form, como aclaración posteo también los archivos php para inserción de los datos:

Conexión:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
function Conectar(){
  $conn = null;
  $host = '127.0.0.1';
  $db = 'base_datos';
  $user = 'root';
  $pwd = '';
  try {
    $conn = new PDO('mysql:host='.$host.';dbname='.$db, $user, $pwd);
  }catch(PDOException $e){
    echo ':( Error al conectar con la base de datos '.$e;
    exit;
  }
  return $conn;
}
?>

Insert.php

1
2
3
4
5
6
7
8
9
10
11
<?php
$nombres = $_POST['nombres'];
$ocupacion = $_POST['ocupacion'];
$telefono = $_POST['telefono'];
$sitioweb = $_POST['sitioweb'];
require('conexion.php');
$con = Conectar();
$sql = 'INSERT INTO personas (nombres, ocupacion, telefono, sitioweb) VALUES (:nombres, :ocupacion, :telefono, :sitioweb)';
$q = $con->prepare($sql);
$q->execute(array(':nombres'=>$nombres, ':ocupacion'=>$ocupacion, ':telefono'=>$telefono, ':sitioweb'=>$sitioweb));
?>

Podemos apreciar en el código anterior los campos de la tabla en la base de datos para su creación.

Hasta pronto!.

Si este post fue de ayuda para ti, no olvides dejar un comentario, también puedes contar tu experiencia o lo que estés haciendo. Nos ayuda a seguir creciendo. ¡Vamos!, solo te llevará 1 minuto.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *