Formulaire jquery

Résolu/Fermé

troubadour2 Messages postés 277 Date d'inscription vendredi 11 juin 2010 Statut Membre Dernière intervention 19 juin 2016 - 14 juin 2011 à 14:51
troubadour2 Messages postés 277 Date d'inscription vendredi 11 juin 2010 Statut Membre Dernière intervention 19 juin 2016 - 7 juil. 2011 à 18:35

Bonjour,

Je ne sais pas trop comment mettre mon titre alors je l'ai appelé "formulaire jquery".
Et en plus je vais avoir du mal à vous expliquer mon problème que je n'arrive pas à résoudre j'espère que vous allez pouvoir me comprendre quand même.

Il faut que je développe un formulaire avec nom et prénom et lorsque j'ai rentré les 2 éléments en cliquant sur un bouton que je vais appelé "test homonyme" ça me liste tous les homonyme de ma BDD en jquery pour ne pas recharger la page,
sinon pas d'homonyme alors je clique sur envoyer.

Merci de m'aider un peu la-dessus je suis perdu.

A voir également:

Formulaire jquery
Formulaire de réclamation facebook - Guide
Formulaire instagram compte suspendu - Guide
Le formulaire rempli - Guide
Confirmer le nouvel envoi du formulaire err_cache_miss - Forum Google Chrome
Formulaire de contact le bon coin introuvable - Forum Réseaux sociaux

40 réponses

Réponse 1 / 40

wolves'sbrother Messages postés 218 Date d'inscription samedi 7 février 2009 Statut Membre Dernière intervention 13 juillet 2011 34
Modifié par wolves'sbrother le 14/06/2011 à 15:05

Salut,
Commence par créer le formulaire et les tables dans la BDD , et je te dirais comment faire après.

Réponse 2 / 40

troubadour2 Messages postés 277 Date d'inscription vendredi 11 juin 2010 Statut Membre Dernière intervention 19 juin 2016 1
14 juin 2011 à 15:36

Bonjour

Merci de ton aide

Création du formulaire et ma base de donnée c'est bon.

Réponse 3 / 40

wolves'sbrother Messages postés 218 Date d'inscription samedi 7 février 2009 Statut Membre Dernière intervention 13 juillet 2011 34
14 juin 2011 à 18:13

Poste le code de ton formulaire et la relation de la table qui contient qui contient les noms, comme ça je pourrai créer la requête qui vas aller interroger la base de données, et je te dirai comment faire pour utiliser jquery pour executer une requete ajax.

Réponse 4 / 40

troubadour2 Messages postés 277 Date d'inscription vendredi 11 juin 2010 Statut Membre Dernière intervention 19 juin 2016 1
Modifié par troubadour2 le 15/06/2011 à 06:27

Bonjour,
Merci beaucoup de ton aide
voici mon formulaire

<form method="post" action="" id="login_form"> 
 <div align="center"> 
  <div > 
Nom : <input name="nom_utilisateur" type="text" id="nom_utilisateur" value=""/> 
  </div> 
  <div> 
Prenom : <input name="prenom_utilisateur" type="text" id="prenom_utilisateur" value=""/> 
  </div> 
  <div> 
<input name="envoyer" type="submit" id="envoyer" value="Envoyer"/> 
<input name="homonyme" type="submit" id="homonyme" value="test_homonyme"/> 
  </div> 
  </div> 
</form>

pour ma table SQL

nom de la table: utilisateur
nom des 3 champs: id_utilisateur, nom_utilisateur, prenom_utilisateur

Merci

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 40

wolves'sbrother Messages postés 218 Date d'inscription samedi 7 février 2009 Statut Membre Dernière intervention 13 juillet 2011 34
15 juin 2011 à 10:43

Salut,

Voici ton formulaire avec quelque modification.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$("#homonyme").click(function(){
		$.post("requete.php", { nom: $("#nom_utilisateur").val(), prenom: $("#prenom_utilisateur").val() },
			function(data) { 
				$("#result").text("Il existe "+data+" utilisateur avec ce nom");
		});	
	});

});
</script>
</head>
<body>
<form method="post" action="" id="login_form"> 
 <div align="center"> 
  <div > 
Nom : <input name="nom_utilisateur" type="text" id="nom_utilisateur" value=""/> 
  </div> 
  <div> 
Prenom : <input name="prenom_utilisateur" type="text" id="prenom_utilisateur" value=""/> 
  </div> 
  <div> 
<input name="envoyer" type="submit" id="envoyer" value="Envoyer"/> 
<input name="homonyme" type="button" id="homonyme" value="test_homonyme"/> 
  </div> 
  </div> 
  <div id="result">
  </div>
</form> 
</body>
</html>

Et le fichier php qui vas interroger la base de donnes, appel le requete.php:

	<?php
	
	mysql_connect('localhost', 'root', '') OR die(mysql_error());
	mysql_select_db('test') OR die(mysql_error());
	$nom = mysql_real_escape_string($_POST['nom']);
	$prenom = mysql_real_escape_string($_POST['prenom']); 
	
	$query = "SELECT * FROM utilisateur WHERE nom_utilisateur ='$nom' AND prenom_utilisateur= '$prenom' ";
	$result = mysql_query($query);
	$num_rows = mysql_num_rows($result);
	echo $num_rows;
?>

J'ai modifié le type du test_homonyme en button, tu ne peux pas avoir deux bouton submit pour le même formulaire.
Essaye de comprendre le fonctionnement du code javascript , et si y a autre chose, je suis là.
n'oublie pas de modifier le nom de la base de données dans le code php,

mysql_select_db('NOM_DE_TA_BASE') OR die(mysql_error());

ciao

Réponse 6 / 40

troubadour2 Messages postés 277 Date d'inscription vendredi 11 juin 2010 Statut Membre Dernière intervention 19 juin 2016 1
15 juin 2011 à 11:36

Déjà un grand merci.

Je vais dans un premier temps comprendre dans la globalité,
commenter une grande partie surtout le javascript que je connais un peu en le lisant
mais beaucoup moins en le codant alors cela va m'aider.

Je vais m'occuper de tout ça après le casse croute de midi et avant la fin de journée je te redis où j'en suis.

Merci mille fois et à ce soir.

Réponse 7 / 40

troubadour2 Messages postés 277 Date d'inscription vendredi 11 juin 2010 Statut Membre Dernière intervention 19 juin 2016 1
15 juin 2011 à 19:37

Bonjour,

Merci beaucoup ça fonctionne à la perfection, je comprend très bien le script javascript et la requête SQL c'est super.
Un dernier coup de main s'il te plait enfin si tu as le temps.

Il faudrait que j'affiche également tous les Homonymes car il pourrait éventuellement avoir des doublons.
Afficher avec leurs noms, prénoms, dates de naissance et leurs adresses dans un tableau.
Comme ça si un utilisateur a les mêmes infos ça sera un doublon.
Merci c'est sympa.

Réponse 8 / 40

wolves'sbrother Messages postés 218 Date d'inscription samedi 7 février 2009 Statut Membre Dernière intervention 13 juillet 2011 34
16 juin 2011 à 14:16

Salut,

voici le fichier html

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    function drawTAb(data){
	$("#result").children().remove();
	$("#result").append('<tr><th>ID</th><th>Nom</th><th>Prenom</th></tr>');
	for(var user in data){		
		$("#result").append('<tr><td>'+data[user]['id_utilisateur']+'</td><td>'+data[user]['nom_utilisateur']+'</td><td>'+data[user]['prenom_utilisateur']+'</td></tr>');		
	}	 
	}

	$("#homonyme").click(function(){			
		 $.post("requete.php", 
               { nom: $("#nom_utilisateur").val(), prenom: $("#prenom_utilisateur").val() },
                function(data){ 				
                     drawTAb(data);
                },"json");
	});

});
</script>
</head>
<body>
<form method="post" action="" id="login_form"> 
 <div align="center"> 
  <div > 
Nom : <input name="nom_utilisateur" type="text" id="nom_utilisateur" value=""/> 
  </div> 
  <div> 
Prenom : <input name="prenom_utilisateur" type="text" id="prenom_utilisateur" value=""/> 
  </div> 
  <div> 
<input name="envoyer" type="submit" id="envoyer" value="Envoyer"/> 
<input name="homonyme" type="button" id="homonyme" value="test_homonyme"/> 
  </div> 
  </div> 
  <div >
  <table id="result" border=1>
  </table>
  </div>
</form> 
</body>
</html>

Et voici requete.php

	<?php
	
	mysql_connect('localhost', 'root', '') OR die(mysql_error());
	mysql_select_db('utilisateur') OR die(mysql_error());
	$nom = mysql_real_escape_string($_POST['nom']);
	$prenom = mysql_real_escape_string($_POST['prenom']); 
	$tab = array();
	$tmp = array();
	$query = "SELECT * FROM utilisateur WHERE nom_utilisateur ='$nom' AND prenom_utilisateur= '$prenom' ";
	$result = mysql_query($query);
	while($user=mysql_fetch_array($result,MYSQL_ASSOC)){		
		foreach($user as $key => $value){
			$tmp[$key]=$value;			
		}
		$tab[] =$tmp;
	}
 
	  if(!empty($tab)) echo json_encode($tab);
?>

Pour ajouter d'autre champs au tableau, c'est dans la fonction drawTab, pour afficher la date de naissance :
le champ qui correspond à la date de naissance dans la table BDD est birthday par exemple donc pour l'afficher dans le fichier php : dans la boucle for de la fonction drawTab tu ajoute

data[user]['nom_utilisateur']

Si tu trouve des difficultés à comprendre le code dit le moi.
Et n'oublie pas de changer le nom de la table dans le fichier php

Réponse 9 / 40

troubadour2 Messages postés 277 Date d'inscription vendredi 11 juin 2010 Statut Membre Dernière intervention 19 juin 2016 1
16 juin 2011 à 22:13

Bonjour,

Merci beaucoup je regarde tout ça demain matin et je te tiens au courant.
En tout cas c'est très sympa de m'aider.

Merci

Réponse 10 / 40

troubadour2 Messages postés 277 Date d'inscription vendredi 11 juin 2010 Statut Membre Dernière intervention 19 juin 2016 1
17 juin 2011 à 13:03

Bonjour,

Encore merci tu peux m'expliquer cette fonction s'il te plait.

function(data){drawTAb(data);},"json");

Merci

Réponse 11 / 40

wolves'sbrother Messages postés 218 Date d'inscription samedi 7 février 2009 Statut Membre Dernière intervention 13 juillet 2011 34
17 juin 2011 à 14:08

function(data) est un paramètre qu'on utilise avec $.post , cette fonction est exécuté en cas de succès de la requete, "data" est le résultat de la requete (ici c'est ce que le fichier requete.php renvoie).
"JSON" est aussi un paramètre de $.post , il n'a rien avoir avec la fonction précédente, il précise que le format de données de la réponse est "json", ça peut etre xml,html ou script.
pour envoyer un tableau depuis un script php vers du code javascript, on utilise la fonction json_encode($tableau) pour convertir un tableau php en format json pour pouvoir le parcourir en javascript.
drawTab(data) est une fonction qui affiche le tableau html, elle prend en paramètre le réponse "data" qui un tableau associatif (cle -> valeur), elle parcours ce tableau avec une boucle pour extraire les données et les afficher.

Je te conseille de visiter si j'ai pas été assez claire : https://api.jquery.com/jQuery.post/

Réponse 12 / 40

troubadour2 Messages postés 277 Date d'inscription vendredi 11 juin 2010 Statut Membre Dernière intervention 19 juin 2016 1
17 juin 2011 à 15:59

Bonjour

Merci pour tes explications très claires, j'ai très bien compris le fonctionnement et je te remercie milles fois.

A bientôt peut-être car je suis débutant dans ce milieu.

Cordialement

Réponse 13 / 40

wolves'sbrother Messages postés 218 Date d'inscription samedi 7 février 2009 Statut Membre Dernière intervention 13 juillet 2011 34
17 juin 2011 à 16:11

ya pas de koi, c'est quand tu veux.
a bientot

Réponse 14 / 40

troubadour2 Messages postés 277 Date d'inscription vendredi 11 juin 2010 Statut Membre Dernière intervention 19 juin 2016 1
22 juin 2011 à 15:19

Bonjour wolves'ssbrother,

Excuse moi je reviens vers toi pour m'aider si tu as le temps pour une petite chose encore.

En fait si tu regarde le code que tu m'a fait je souhaite non pas cliquer sur le bouton "homonyme" mais afficher dans le tableau à partir par exemple lorsqu'on à taper 5 lettres du nom ça affiche les homonymes en fait ça filtre au fur et à mesure que l'on renseigne le champ nom.

Merci encore mille fois merci pour ton aide.

Réponse 15 / 40

wolves'sbrother Messages postés 218 Date d'inscription samedi 7 février 2009 Statut Membre Dernière intervention 13 juillet 2011 34
22 juin 2011 à 15:48

salut,
OK.Et pour le prenom?

Réponse 16 / 40

troubadour2 Messages postés 277 Date d'inscription vendredi 11 juin 2010 Statut Membre Dernière intervention 19 juin 2016 1
22 juin 2011 à 16:10

Bonjour oui ça serai bien aussi.
Je te remercie

wolves'sbrother Messages postés 218 Date d'inscription samedi 7 février 2009 Statut Membre Dernière intervention 13 juillet 2011 34
22 juin 2011 à 18:04

OK, je vais te faire ça demain, j'ai pas eu le temps aujourd'hui.

Réponse 17 / 40

troubadour2 Messages postés 277 Date d'inscription vendredi 11 juin 2010 Statut Membre Dernière intervention 19 juin 2016 1
22 juin 2011 à 18:16

Je te remercie

Bonne soirée

Réponse 18 / 40

wolves'sbrother Messages postés 218 Date d'inscription samedi 7 février 2009 Statut Membre Dernière intervention 13 juillet 2011 34
23 juin 2011 à 13:23

fichier html

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    function drawTAb(data){
	$("#result").children().remove();
	$("#result").append('<tr><th>ID</th><th>Nom</th><th>Prenom</th></tr>');
	for(var user in data){		
		$("#result").append('<tr><td>'+data[user]['id_utilisateur']+'</td><td>'+data[user]['nom_utilisateur']+'</td><td>'+data[user]['prenom_utilisateur']+'</td></tr>');		
	}	 
	}

	function get_homonyme(){
	    nom = $("#nom_utilisateur").val();
		prenom = $("#prenom_utilisateur").val();
		if(nom.length >= 5 || prenom.length>=4){			 
				$.post("requete.php", 
				{ nom: $("#nom_utilisateur").val() , prenom: $("#prenom_utilisateur").val() },
                function(data){ 	 	
                     drawTAb(data);
                },"json");			 
		}
		else{
			$("#result").remove();
		}
	}

 

   $('#nom_utilisateur').bind('input paste',get_homonyme);         // appel à la fonction get_homonyme lors d'un évenement input , paste , click ou keyup
   $('#nom_utilisateur').bind('keyup click',get_homonyme);
   $('#prenom_utilisateur').bind('input paste',get_homonyme);
   $('#prenom_utilisateur').bind('keyup click',get_homonyme);
});
</script>
</head>
<body>
<form method="post" action="" id="login_form"> 
 <div align="center"> 
  <div > 
Nom : <input name="nom_utilisateur" type="text" id="nom_utilisateur" value=""/> 
  </div> 
  <div> 
Prenom : <input name="prenom_utilisateur" type="text" id="prenom_utilisateur" value=""/> 
  </div> 
  <div> 
<input name="envoyer" type="submit" id="envoyer" value="Envoyer"/> 
<input name="homonyme" type="button" id="homonyme" value="test_homonyme"/> 
  </div> 
  </div> 
  <div >
  <table id="result" border=1>
  </table>
  </div>
</form> 
</body>
</html>

Le fichier requete.php

<?php
	
	$con = mysql_connect('localhost', 'root', '') OR die(mysql_error());
	mysql_select_db('utilisateur') OR die(mysql_error());
	$nom = mysql_real_escape_string($_POST['nom']);
	$prenom = mysql_real_escape_string($_POST['prenom']); 
	$tab = array();
	$tmp = array();
	$query = "SELECT * FROM utilisateur WHERE ";//nom_utilisateur ='$nom' AND prenom_utilisateur= '$prenom' ";
	if(!empty($nom))
		$query .= "nom_utilisateur ='$nom' AND ";
	if(!empty($prenom))
		$query .= " prenom_utilisateur= '$prenom' ";
	else $query .= " 1";
	$result = mysql_query($query);
	if($result){
		while($user=mysql_fetch_array($result,MYSQL_ASSOC)){		
			foreach($user as $key => $value){
				$tmp[$key]=$value;			
			}
			$tab[] =$tmp;
		}
	}
	else{
		echo "Error : " . mysql_error();	
	}
	
	if(!empty($tab)) echo json_encode($tab);
	
 
   mysql_close($con);

?>

Regarde et dit moi si ça te convient.

Réponse 19 / 40

troubadour2 Messages postés 277 Date d'inscription vendredi 11 juin 2010 Statut Membre Dernière intervention 19 juin 2016 1
23 juin 2011 à 13:31

Bonjour je te remercie je regarde ça cet après-midi.

Merci

Réponse 20 / 40

troubadour2 Messages postés 277 Date d'inscription vendredi 11 juin 2010 Statut Membre Dernière intervention 19 juin 2016 1
23 juin 2011 à 14:46

tu peux jeter un oeil le tableau ne s'affiche pas pour afficher "les homonyme"
aucun message rien
Merci beaucoup

wolves'sbrother Messages postés 218 Date d'inscription samedi 7 février 2009 Statut Membre Dernière intervention 13 juillet 2011 34
Modifié par wolves'sbrother le 23/06/2011 à 16:58

wé desolé, remplace $("#result").remove(); par $("#result").children().remove();

wolves'sbrother Messages postés 218 Date d'inscription samedi 7 février 2009 Statut Membre Dernière intervention 13 juillet 2011 34
23 juin 2011 à 17:03

dit moi si ça a réglé le problème quand tu l'aura fait.
Ta compris un peu le code javascript?

Discussions similaires

Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire

Je n'arrive plus à récuperer mon compte Outlook

Google Chrome : "Nouvel envoi du formulaire"

Problème d'envoi de formulaire

Confirmation de l'envoi d'un formulaire html