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 PHP

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

  • novembre 1, 2019 à 1:49 pm
    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
  • novembre 12, 2019 à 11:53 pm
    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
  • janvier 10, 2020 à 11:05 am
    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
    • janvier 10, 2020 à 11:41 am
      Permalien

      Merci pour cette remarque, c’est corrigé 🙂

      Répondre
  • mai 21, 2023 à 5:12 pm
    Permalien

    Bonjour ici
    Comment allez-vous ?
    Besoin de votre aide.
    je suis novice en PHP.
    Mais j’utilise PHP 8.1 dans mon espace hébergement.

    j’ai besoin d’un code PHP pour récupérer les données d’un formulaire en tenant compte aussi des précautions antipirate.

    Voici mon formulaire :

    j’ai besoin de récupérer ces données sur mon adresse email : [email protected]. Aidez-moi SVP !

    Répondre

Laisser un commentaire

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