Soumettre un formulaire sans recharger la page en utilisant Ajax, jQuery et PHP

Dans ce tutoriel nous allons découvrir comment soumettre un formulaire sans recharger la page en utilisant Ajax, jQuery et PHP. On constate que, lorsque nous soumettons un formulaire Web ou un formulaire de contact, il faut quelques secondes pour le soumettre sans actualiser la page Web.
 
 
AJAX a la possibilité de soumettre un formulaire sans actualisation du page. Nous allons également utiliser AJAX avec jQuery et PHP.
 

Étape 1: Créez un formulaire HTML pour soumettre les données

D’abord nous allons créer un simple formulaire pour récupérer les informations de l’utilisateur. Créez une page avec le nom index.html et collez-y le code ci-dessous.

<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		<script type="text/javascript">
			// Mettez le code Jquery ici.
		</script>
	</head>
	<body>	
	<form method="POST" onsubmit="return sendData();">
	   <input type="text" name="name" id="name">
	   <input type="text" name="age" id="age">
	   <input type="submit" name="submit_form" value="Submit">
	</form>

	<div id="res" ></div>

	</body>
</html>

 

Étape 2: Soumettre le formulaire avec Ajax/jQuery

Nous utiliserons la méthode AJAX pour soumettre le formulaire sans actualiser la page.

function sendData()
{
	var name = document.getElementById("name").value;
	var age = document.getElementById("age").value;

	$.ajax({
		type: 'post',
		url: 'insert.php',
		data: {
		  name:name,
		  age:age
		},
		success: function (response) {
		  $('#res').html("Vos données seront sauvegardées");
		}
	});
		
	return false;
}

 
 

Étape 3: Se connecter à la base de données et stocker des données

Dans cette étape, nous récupérons toutes les données qui proviennent de la page index.html et les stockons dans une base de données.

// Le fichier insert.php

<?php
  if( isset( $_POST['name'] ) )
  {

	  $name = $_POST['name'];
	  $age = $_POST['age'];

	  $con = mysqli_connect("localhost","root"," ","my_db");

	  $insert = " INSERT INTO user VALUES( '$name','$age' ) ";
	  mysqli_query($con, $insert); 

  }
?>

Dans ce tutoriel nous avons vu comment soumettre le formulaire sans actualisation de la page. Vous pouvez personnaliser davantage ce code selon vos besoins.
QCM sur PHPQCM sur PHP – Les bases – Partie 1QCM sur PHP avec des réponses pour la préparation des entretiens d’embauche, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus QCM jQueryQCM jQuery – Partie 1QCM sur jQuery avec des réponses pour la préparation des test techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus

Partagez cet article

4 réflexions sur “Soumettre un formulaire sans recharger la page en utilisant Ajax, jQuery et PHP

  • Avatar
    novembre 1, 2019 à 1:49
    Permalien

    Bonjour, Voila mon probleme, j’arrive sur une page de resultats de ma recherche, et pour chaque ligne de resultat j’ai un include de miniformulaire (1 list et un submit) et je voudrais pouvoir valider valider ces formulaires sans rafraichir la page principale, car je perdrais la liste des resultats de ma recherche.

    Répondre
  • Avatar
    novembre 12, 2019 à 11:53
    Permalien

    Bonjour,
    Merci pour vos « Tuto », par-contre il y a un problème…

    Dans beaucoup de vos tuto PHP/MySQL vous utilisez encore comme exemple les request « mysql »

    Ça serait vraiment bien de mettre a jour tout vos exemples car « mysql » et obsolète depuis PHP 5.5… disparue dans PHP 7.0 !

    Cordialement
    Ftn

    Répondre
  • Avatar
    janvier 10, 2020 à 11:05
    Permalien

    Merci pour ce tuto, par contre il faut mettre un « .value » à la suite du getelementbyID, sinon il ne récupère pas la valeur.

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *