Enviar formulario sin recargar la página

PHP   |   25 Comentarios

Enviar formulario sin recargar la página. Todos sabemos como realizar un formulario mediante código y enviar sus datos para realizar distintas acciones con ellos, como consultas o registros a base de datos, enviar correos, etc. Normalmente, al pulsar el botón que realiza la acción sobre nuestro formulario (submit) se actualiza/refresca la página en la que nos encontramos, ya que se envía una petición al servidor (lenguaje PHP). Pues bien, ¿y si necesito realizar peticiones al servidor pero no quiero que se actualice mi página?

Muchas veces nos encontramos con la necesidad de enviar los datos de nuestro formulario a un fichero PHP para procesarlos posteriormente y realizar distintas acciones con ellos sin movernos de nuestra página. JavaScript tiene la solución a nuestro problema creando una conexión AJAX entre nuestro formulario y el fichero PHP donde recogemos los datos.

Vamos a realizar un sencillo ejemplo para que quede más claro:

1 – Formulario HTML

<form name="formulario" action="" onSubmit="enviarDatos(); return false" >
	<h2>Equipo</h2>
	<input type="text" name="equipo" id="equipo"/>

	<h2>Dorsal</h2>
	<input type="text" name="dorsal" id="dorsal"/>

	<input type="texto" name="jugador" id="jugador"/>

        <input type="submit" value="Mostrar Jugador"/>

</form>

En nuestro formulario introduciremos el nombre del equipo y el número de dorsal. Al enviar esos datos sabremos el nombre y apellidos del jugador que tiene el dorsal y pertenece al equipo introducidos.

Como se ve, nuestro formulario carece de “action”, y en su lugar llamamos al método onSubmit() que ejecutará una función de JavaScript.

2 – Funciones JavaScript

A continuación de nuestro formulario escribiremos las funciones de JavaScript necesarias para establecer la conexión y para enviar/mostrar los datos:

2.1 – Conexión AJAX

<script type="text/javascript">

	function objetoAjax(){
		var xmlhttp = false;
		try {
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {

			try {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (E) {
				xmlhttp = false; }
		}

		if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		  xmlhttp = new XMLHttpRequest();
		}
		return xmlhttp;
	}

Esta función siempre debe estar presente en nuestro código ya que es la que realiza la conexión con el servidor.

2.2 – Enviar y recibir datos

function enviarDatos(){

        //Recogemos los valores introducimos en los campos de texto
		equipo = document.formulario.equipo.value;
		dorsal = document.formulario.dorsal.value;

         //Aquí será donde se mostrará el resultado
		jugador = document.getElementById('jugador');

		//instanciamos el objetoAjax
		ajax = objetoAjax();

		//Abrimos una conexión AJAX pasando como parámetros el método de envío, y el archivo que realizará las operaciones deseadas
		ajax.open("POST", "consulta.php", true);

		//cuando el objeto XMLHttpRequest cambia de estado, la función se inicia
		ajax.onreadystatechange = function() {

             //Cuando se completa la petición, mostrará los resultados
			if (ajax.readyState == 4){

				//El método responseText() contiene el texto de nuestro 'consultar.php'. Por ejemplo, cualquier texto que mostremos por un 'echo'
				jugador.value = (ajax.responseText)
			}
		}

		//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
		ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

		//enviamos las variables a 'consulta.php'
		ajax.send("&equipo="+equipo+"&dorsal="+dorsal)

}

</script>

Podéis encontrar más información acerca de XMLHttpRequest aquí

3 – Recibir y procesar datos

consulta.php

<?php

	//Configuracion de la conexion a base de datos
	$bd_host = "localhost";
	$bd_usuario = "usuario";
	$bd_password = "contraseña";
	$bd_base = "base de datos";

	$conexion = mysql_connect ($bd_host, $bd_usuario, $bd_password);
	mysql_select_db ($bd_base, $conexio);

	//Variables recibidas por POST de nuestra conexión AJAX
	$equipo = $_POST['equipo'];
	$dorsal = $_POST['dorsal'];

	//Variable donde recogemos el resultado de la consulta
	$nombre_jugador = null;

	//Realizamos la consulta a la base de datos
	$query = 'SELECT nombre FROM jugadores WHERE equipo = "'.$equipo.'" AND dorsal = "'.$dorsal.'" ';
	$select = mysql_query($query, $conexion) or die('Error'.mysql_error());

	while ($valor = mysql_fetch_assoc($select)){
		$nombre_jugador = $valor['nombre'];
	}

	//Mostramos el resultado. Este 'echo' será el que recibirá la conexión AJAX
	echo $nombre_jugador;

?>

 

Listo!! Proceso terminado. Sencillo verdad?

Ahora solo queda comprobar nuestro código escribiendo los datos en nuestro formulario y al pulsando el botón ‘Mostrar Jugador’.

Hemos realizado una consulta con envío de datos al servidor sin necesidad de recargar nuestra página.

¿Te ha gustado el artículo?
1 Star2 Stars3 Stars4 Stars5 Stars (1 votos, promedio: 2,00 sobre 5)
Loading...
Artículo escrito por

¡Exprésate! Dejanos tu comentario

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

25 Comentarios

admin

Hola! Es muy probable que sea así? ¿Sabes algún otro modo?

junior

esa ya esta pasado no habrá una mas actual

Jose Luis

cargar una tabla

Alvaro Munoz

Hola Carlos, Si quieres puedes escribirme a mi email (Alvaro@codigonexo.com) contando tu problema para la validación de campos vacíos al refrescar tu página con javascript o al enviar tu formulario php y te contestaremos a la mayor brevedad posible. Un saludo

carlos

amigo me podrías ayudar con el tema de realizar validación de campos vacíos?

Juaw Henaw

No funciona en Internet explorer, en mozilla y chrome va perfecto.

Cusco

No sabes cuanto te lo agradezco, estaba varios días con este tema y por fin me salio con tu ejemplo Gracias!.

wilmer gutierrez

excelente aporte si me funciona la validacion de registros duplicados, ahora mi pregunta es como hago para que una vez que ha verificado el registro me guarde el la base de datos y me redirija al formulario pero ya recargado es decir en blanco gracias

John Rodrigo

hola daniel me funciono perfecto muchas gracias, pero tengo una duda: es que queria saber como puedo traer los datos de una consulta y llenar un select en base a esos datos?? espero tu pronta respuesta gracias

Carlos March

hola daniel, muy buen condigo, muchas gracias por el aporte, pero cuando estoy tratando de usarlo no me acava de funcionar: te cuento, mi formulario es el siguiente:

<form name="formulario" enctype="multipart/form-data" action="" onsubmit="enviarDatos(file); return false"> <input name="uploadedfile" type="file" id="file"/> <input type="submit" value="Subir archivo" /> </form>
y el enviarDatos es:
//Recogemos los valores introducimos en los campos de texto res = document.getElementById('result'); res2 = document.getElementById('result2'); res2.value = document.formulario.file.value; //instanciamos el objetoAjax ajax = objetoAjax(); //Abrimos una conexión AJAX pasando como parámetros el método de envío, y el archivo que realizará las operaciones deseadas ajax.open("POST", "upload.php", true); //cuando el objeto XMLHttpRequest cambia de estado, la función se inicia ajax.onreadystatechange = function() { //Cuando se completa la petición, mostrará los resultados if (ajax.readyState == 4) { //El método responseText() contiene el texto de nuestro 'consultar.php'. Por ejemplo, cualquier texto que mostremos por un 'echo' res.value = (ajax.responseText) } } //Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario. ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //enviamos las variables a 'consulta.php' ajax.send(document.getElementById('file')) }
    yo lo que pretendo es subir un archivo .jpg, mi php lo hace correctamente, lo que no se es en la funcion enviarDatos como le puedo pasar el archivo? eh probado con pasar el objeto entero con el document.getElementbyID pero nada... que parametro tengo que poner en el send para que se envie el archivo como a mi me interesa? merci :D

Jesus Ocampo

Hola, excelente información. Una consulta, si en vez de textos estoy utilizando checkbox y select, como puedo pasar los parametros? Con los textbox me funciona perfectamente, pero no con lo anterior.

Ivan Mendez

Muchas Gracias, esto me ha servido 1 y mil veces, nunca borres esta valiosa informacion.

Ricardo

Mil gracias Daniel, mis conocimientos en programación son penosos y aun así me ha funcionado, eres un crack, solo encontré este pequeño error tipográfico aquí: $conexion = mysql_connect ($bd_host, $bd_usuario, $bd_password); mysql_select_db ($bd_base, $conexio); le faltaba la n a $conexion. Lo digo por que si hubiese tenido más no habría sido capaz de hacerlo ir. Un vez más mil gracias.

Rober1000

Hola excelente tutorial, solo quería saber que evento se utiliza si quiero que vaya transcribiendo el texto del input solo con salir de foco, sin necesidad de clickear "submit"

ELVIS

HOLAAAAAAAAAA

Daniel Escabias

Hola Eliezer, En este caso lo ideal es en php crear un array con nuestros valores y enviarlo en formato json. Así luego recogeremos en el js el array: PHP ------ $array = array(); while ($valor = mysql_fetch_assoc($select)){ $array['nombre'] = $valor[‘nombre’]; $array['posicion'] = $valor[‘posicion’]; } echo json_encode($array); //nos devuelve un array convertido en string: {'nombre': 'Sergio Ramos', 'posicion' : 'Defensa'} JS ----- Usamos la función JSON.parse() para obtener un objeto con nuestros valores: if (ajax.readyState == 4){ var obj = JSON.parse(ajax.responseText); alert(obj.nombre); alert(obj.posicion); }

Eliezer

Buenos dias. muy buen ejemplo. ya con eso resuelvo algunas dudas. pero me queda una. que pasa si los datos que consultamos es nombre y posicion? Ejemplo: Equipo Dorsal en php: while ($valor = mysql_fetch_assoc($select)){ $nombre_jugador = $valor['nombre']; $posicion_jugador = $valor['posicion']; } el el AJAX? if (ajax.readyState == 4){ //El método responseText() contiene el texto de nuestro 'consultar.php'. Por ejemplo, cualquier texto que mostremos por un 'echo' jugador.value = (ajax.responseText) //// aca??? }

julian zambrano

hola por favor una racrga de 45 mil

Diego Muñoz

Gracias, fue de gran ayuda. Saludos

Marco Antonio

excelente aporte amigo, me ha servido bastante y he podido reducir bastantes lineas de codigo. Saludos.

julian joya

Hola, una pregunta De casualidad sabes ¿como puedo hacer un formulario similar pero no para insertar sino para consultar información de la base de datos y que el resultado me lo muestre en la misma pagina sin recargarla? Si sabes por favor ayúdame enviando un correo, te lo agradeceria infinitamente es de mucha importancia.

Ernesto

Muchas gracias, Daniel, me sirvió mucho el código y la explicación.   ¡Saludos!

cristian

hola, este mismo codigo sirve para insertar datos a la bd y en vez de campos de texto rescatar los datos de combobox?? o select!!

Daniel Escabias

Hola Salvador, El problema no estaba en el responseText, sino en "jugador.innerHTML". Hay que usar la función "jugador.value" ya que se trata de un input. Si quisiéramos mostrar el texto en un <p> por ejemplo,  si usaríamos innerHTML. Ya está corregido en el código responseText recupera el texto que hay en el fichero .php. Es decir, los 'echo'. Por ejemplo: fichero php

<?php

$saludo = 'hola';
echo $saludo;

?>
  fichero .html en la función de javascript.
jugador = document.getElementById('jugador');
jugador.value = (ajax.responseText)

//Mostrará "hola"
     

Salvador Antonio Gutiérrez Ayala

muy bueno me fue de gran ayuda el único detalle que no se bien como funciona el responseText, uso tu códgo para enviar un formulario a otra página php y lo guardo en una base de datos, lo  que quiero es queme regrese un mensaje diciendo que se realizo el registro satisfactoriamente, pero cuando presiono el boton enviar lo único que hace es dejar en blanco los campos de texto.