Guardar la informacion de un formulario en una base MySQL con AJAX de jQuery y PHP

Hola a  todos en esta ocasión el ejemplo trata de como podemos guardar la información de un formulario en una base de datos y mostrar un mensaje con el resultado, utilizando AJAX de jQuery y el lenguaje PHP.

FORMULARIO HTML

El formulario que vamos a guardar es el siguiente.

<form id="frminformacion"><label> Nombre: </label>
 <input type="text" name="nombre" />

 <label> Apellidos: </label>
 <input type="text" name="apellidos" />

 <label> Sexo: </label>
 <input type="radio" name="sexo" value="f" /> Femenino
 <input type="radio" name="sexo" value="m" /> Masculino

 <label> Grado: </label>
<select name="grado"> <option value="1"> Primero </option></select>
<select name="grado"> <option value="2"> Segundo </option></select>
<select name="grado"> <option value="2"> Tercero </option></select>

 <input id="enviar" type="button" value="Enviar" /></form>


CODIGO JQUERY
Ahora vamos a ver el código jQuery que vamos a utilizar,  Lo primero es asignar el evento click al botón enviar,  con serielizeArray() lo que hacemos es crear un arreglo con todos los datos del formulario, los cuales enviaremos mediante ajax que esta configurado de la siguiente forma: el método de envío es POST, lo que espera como respuesta va a ser un JSON, el script php que procesará la petición se llama guardar.php y por ultimo se le pasan los datos del formulario. Una vez que regresa el resultado presentamos el mensaje en el elemento con id=”mensaje” y llamamos a la función limpiarformulario para borrar los datos

$(document).ready(function(){
	$("#enviar").click(function(){
		var formulario = $("#frminformacion").serializeArray();
		$.ajax({
			type: "POST",
			dataType: 'json',
			url: "guardar.php",
			data: formulario,
		}).done(function(respuesta){
			$("#mensaje").html(respuesta.mensaje);
		});
	});

    function limpiarformulario(formulario){

	$(formulario).find('input').each(function() {
	    switch(this.type) {
        	case 'password':
		    case 'text':
               	$(this).val('');
             	break;
       		case 'checkbox':
       		case 'radio':
           		this.checked = false;
       		}
    	});

    	$(formulario).find('select').each(function() {
       		$("#"+this.id + " option[value=0]").attr("selected",true);

   	});
	}
});

CODIGO PHP

El archivo que va a procesar la petición ajax se llama guardar.php y tiene el siguiente código, lo primero que hacemos es verificar si existe la variable nombre para saber si el formulario se envió por el clic del botón  una vez que verificamos esto almacenamos los datos del formularios en una variable, después creamos la consulta de inserción  creamos la conexión con la base de datos y ejecutamos la consulta, al final lo que hacemos es regresar un mensaje con el resultado de la consulta como JSON

if(isset($_POST["nombre"]))
{
    $nombre = $_POST["nombre"];
	$apellidos = $_POST["apellidos"];
	$sexo = $_POST["sexo"];
	$grado = $_POST["grado"];

	$consulta = "INSERT INTO tblalumno (nombre, apellidos, sexo, grado)VALUES('$nombre','$apellidos','$sexo',$grado)";

	$conexion = new mysqli("localhost","user","password","basedatos",3306);

	$respuesta = new stdClass();

	if($conexion->query($consulta)){
		$respuesta->mensaje = "Se guardo correctamente";
	}
	else {
		$respuesta->mensaje = "Ocurrió un error";
	}
	echo json_encode($respuesta);

}

Aquí les dejo el archivo de descarga, espero que les sea de utilidad.

18 comentarios en “Guardar la informacion de un formulario en una base MySQL con AJAX de jQuery y PHP”

  1. IVAN dice:

    No funciono.

    CREATE TABLE `alumnos` (
    `nombre` varchar(20) NOT NULL,
    `apellido` varchar(20) NOT NULL,
    `sexo` varchar(20) NOT NULL,
    `grado` varchar(20) NOT NULL
    ) ENGINE=MyISAM DEFAULT CHARSET=utf8;

  2. Sandro dice:

    si funciona pero primero tienen que crear la base de datos y luego recien se ingresa el sql

    CREATE TABLE `alumnos` (
    `nombre` varchar(20) NOT NULL,
    `apellido` varchar(20) NOT NULL,
    `sexo` varchar(20) NOT NULL,
    `grado` varchar(20) NOT NULL
    ) ENGINE=MyISAM DEFAULT CHARSET=utf8;

    y al final el la linea 11 del php

    $consulta = “INSERT INTO `nombre de tu base de datos`.`alumnos` (`nombre`, `apellido`, `sexo`, `grado`) VALUES (‘$nombre’,’$apellidos’,’$sexo’,$grado)”;

    espero les ayude 🙂 a mi se ha servido

  3. dixon zamora dice:

    Saludos, antes que nada agradecer por esta informacion, y decirte que no me funciona ya con la base de datos creada y la tabla que podra ser

    1. denker dice:

      Verifica que tu consulta este escrita correctamente

  4. Mister H dice:

    Hola,

    He probado el codigo y no funciona, quiero decir cuando le das al boton no hace nada.
    HE probado la consulta directamente desde phpmyadmin y funciona ok…

    ¿Sabes que puede ser?
    El html lo tengo igual que tu, el .php asi:
    query($consulta)){
    $respuesta->mensaje = “Se guardo correctamente”;
    }
    else {
    $respuesta->mensaje = “Ocurrio un error”;
    }
    echo json_encode($respuesta);

    }

    ?>
    y nada…

    1. denker dice:

      Hola amigo, puedes depurarlo con firebug para ver que datos esta enviando al servidor

      1. Mister H dice:

        Ya funciona, habia un problema con mysqli.
        Eso si, me he tenido que chupar varios tutoriales de firebug pero merece la pena!

        Gracias denker!

  5. Berkeley dice:

    Los comentarios de arriba tienen razón: el código no funciona.

    Esto porque faltan algunas comillas que se te pasaron al declarar la query que llamas $consulta.

    Saludos!

  6. JsRodriguez dice:

    Accesar a mysql crear una base de datos:
    CREATE DATABASE basedatos;
    use basedatos;

    CREATE TABLE `tblalumnos` (
    `nombre` varchar(20) NOT NULL,
    `apellidos` varchar(20) NOT NULL,
    `sexo` varchar(20) NOT NULL,
    `grado` varchar(20) NOT NULL
    ) ENGINE=MyISAM DEFAULT CHARSET=utf8;

    y ademas reemplazar estos valores user, password en la linea 10 del fichero guardar.php
    Para que funcione tal como está el código.. saludos

  7. MIGUEL ANGEL dice:

    Se dieron cuenta que la conexion a la base de datos esta después de la consulta. Creo que es bueno el código, pero seria de lo mejor si lo subieras sin errores para no confundir a los demas

    1. sun2012 dice:

      No esta mal jeje ya que lo unico que hace es armar la consulta, despues de la conexión esta el query que la ejecuta.

  8. Juan dice:

    Que Grande !!!. buscaba algo tan simple como lo tuyo. Gracias !!!

  9. Andrea dice:

    Si funcionó pero con error, siempre se guarda como segundo grado, aunque el nuevo usuario escoja primero o tercero, cómo se corrige eso?

    1. sun2012 dice:

      hola, el codigo del select esta mal

      <select name="grado"> <option value="1"> Primero </option></select>
      <select name="grado"> <option value="2"> Segundo </option></select>
      <select name="grado"> <option value="2"> Tercero </option></select>
      

      debe quedar asi

      <select name="grado">
      <option value="1"> Primero </option>
      <option value="2"> Segundo </option>
       <option value="3"> Tercero </option>
       </select>
      

      saludos
      saludos.

  10. Diana dice:

    pero no muestra nada :S si envia todos los datos al guardar.php pero al momento de querer ingresarlos a la base de datos no los ingresa y tampoco muestra ni uno de los dos mensajes, ayudaaa por favor!

  11. rafael seguerit dice:

    Hola mi duda es a siguiente el codigo lo hice igual y guarda todos los datos, pero al momento de mostrar el resultado en el no lo hace quien me ayudaaa

    1. rafael seguerit dice:

      En el div no lo muestra

  12. diego dice:

    nooooooooooooooooooooooooooo
    funcionaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Deja un comentario