¿Necesitas una forma para mandar informacion de html a php con jquery? ¿Buscas una alternativa que no dependa necesariamente de un botón submit? En este articulo te muestro como lo puedes hacer de una manera sencilla usando jquery como intermediario.
Contenido
Estructura html
Para la estructura html he usado el framework Bootstrap, puedes revisar su documentación para aprender más al respecto.
En este ejemplo se incluyen algunos input en los que se solicita información, como: nombre, apellidos, teléfono, correo, etc, es importante que definamos para el elemento button y para cada input un id ya que los usaremos más adelante para la extracción de información con jquery.
Al final del html lo único que tenemos es un mensaje de éxito y error dependiendo del resultado que arroje nuestra acción y los cuales se manipularán desde jquery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mandar información de html a php con jquery</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="panel panel-success">
<div class="panel-heading">DATOS EN HTML</div>
<div class="panel-body">
<div class="col-md-4">
<span>Nombre</span><input id="item_nombre" class="form-control" type="text">
</div>
<div class="col-md-4">
<span>Apellido paterno</span><input id="item_apellidoA" class="form-control" type="text">
</div>
<div class="col-md-4">
<span>Apellido materno</span><input id="item_apellidoM" class="form-control" type="text">
</div>
</div>
<div class="panel-body">
<div class="col-md-4">
<span>Teléfono</span><input id="item_telefono" class="form-control" type="text">
</div>
<div class="col-md-4">
<span>Correo</span><input id="item_correo" class="form-control" type="text">
</div>
<div class="col-md-4">
<span>Dirección</span><input id="item_direccion" class="form-control" type="text">
</div>
</div>
<div class="panel-body">
<div class="col-md-4 col-md-offset-4">
<button id="item_enviar" class="btn btn-success btn-block" type="button" >ENVIAR</button>
</div>
</div>
</div>
<!-- Mensajes de exito-->
<div class="alert alert-success" id="item_alertaOK" style="display:none">
<center><span>La acción se completo correctamente</span></center>
</div>
<div class="alert alert-danger" id="item_alertaERROR" style="display: none">
<center><span>Ocurrio un error al ejecutar la acción</span></center>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="obtenerInformacion.js"></script>
</body>
</html>
Obtener información
Para obtener la información que el usuario ingresó en cada uno de los input es necesario convertirnos en el elemento button por medio de su id y posteriormente irnos convirtiendo en cada uno de los input por medio de su id, obtener cada uno de sus valores con el método val() y guardar el resultado en una variable.
//Obtener información
$("#item_enviar").on("click",function(){
var item_nombre = $("#item_nombre").val();
var item_apellidoA = $("#item_apellidoA").val();
var item_apellidoM = $("#item_apellidoM").val();
var item_telefono = $("#item_telefono").val();
var item_correo = $("#item_correo").val();
var item_direccion = $("#item_direccion").val();
});Mandar informacion de html a php con jquery
Para enviar la información a php lo haremos con la función POST de jquery que nos permite hacer peticiones mediante el método post.
Especificamos a que archivo mandaremos la información para procesarla, en este ejemplo yo la envío al archivo recibirInformacion.php y enseguida incluimos todas las variables que creamos anteriormente y que ya tienen los valores que debemos enviar a php.
Finalmente tenemos dos condiciones dependiendo del resultado que nos regrese la ejecución de nuestra acción en php, lo único que hacemos es convertirnos en los elementos por medio de su id y mostramos un mensaje de éxito o error (que definimos en html) con el método css().
//Enviar información a PHP
$.post("recibirInformacion.php",{
item_nombre,
item_apellidoA,
item_apellidoM,
item_telefono,
item_correo,
item_direccion
}).done(function(data){
if(data=="OK"){
$("#item_alertaOK").css("display","block");
}else{
$("#item_alertaERROR").css("display","block");
}
});
Recibir la información en php
Para concluir con el proceso, dentro del archivo php al que enviamos la información es necesario que la recibamos y vayamos guardando su valor en una respectiva variable.
Una vez que tengas la información enviada por el usuario en variables php podrás manipularla para realizar la acción que requieras, puede ser que necesites construir un pdf con los datos recibidos, que quieras enviar un mail, realizar alguna consulta en base de datos, etc.
<?php //Recibir información $item_nombre = $_POST['item_nombre']; $item_apellidoA = $_POST['item_apellidoA']; $item_apellidoM = $_POST['item_apellidoM']; $item_telefono = $_POST['item_telefono']; $item_correo = $_POST['item_correo']; $item_direccion = $_POST['item_direccion']; /*Aquí podrás manipular la información recibida para realizar la acción que requieras, puedes: enviar un mail, construir un pdf, realizar alguna acción en una base de datos, etc.*/ echo "OK"; ?>
De esta manera concluimos este ejemplo en que aprendimos como mandar informacion de html a php con jquery.
No olvides compartir este articulo en tus redes sociales si te ha parecido interesante.
Craaaaack!
Muchas gracias por el artículo, muy interesante el tema de jquery para manipular las peticiones con POST, en lo personal me gusta usar AJAX para este tipo de cosas.
Por cierto, soy Gabriel, tengo un blog de desarrollo web y me ha parecido muy interesante lo que publicas! http://gabrielchavez.me
Saludos y mucho éxito! Te leo 😉
Hola Gabriel, gracias por leerme, he pasado a visitar tu blog y esta muy padre :), igual te deseo mucho éxito.
Excelente contenidos Tutos muy práctico, concisos, claros y muy entendible. Saludos.
Hola Ángel! Me alegra que te agraden los articulos del blog, Saludos 🙂
Fantástico me diste justamente lo que estaba buscando
Hola Dowar! Me alegra que este articulo te ayudara, saludos! 🙂