Validation de formulaire avec JQuery
Fermé
Nymphomaniaque
Messages postés
55
Date d'inscription
mercredi 22 juillet 2009
Statut
Membre
Dernière intervention
14 octobre 2012
-
13 oct. 2010 à 00:44
Apatik Messages postés 5304 Date d'inscription mercredi 28 janvier 2009 Statut Contributeur Dernière intervention 29 mai 2016 - 13 oct. 2010 à 10:41
Apatik Messages postés 5304 Date d'inscription mercredi 28 janvier 2009 Statut Contributeur Dernière intervention 29 mai 2016 - 13 oct. 2010 à 10:41
A voir également:
- Validation de formulaire avec JQuery
- Ethernet n'a pas de configuration ip valide - Guide
- Formulaire de réclamation facebook - Guide
- Formulaire de reclamation instagram - Guide
- Temps validation annonce le bon coin - Forum Hotmail / Outlook.com
- Formulaire de contact le bon coin introuvable - Forum Réseaux sociaux
3 réponses
Kopros
Messages postés
595
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
89
Modifié par Kopros le 13/10/2010 à 03:17
Modifié par Kopros le 13/10/2010 à 03:17
Le javascript est exécuté sur le client, l'utilisateur peut donc le désactiver et il me semble que sur les navigateurs type texte ça ne passe pas super bien. Donc pour un truc aussi important que l'envoi de données formulaire, je te déconseille d'utiliser le js.
Perso j'utilise le js, notamment le jquery pour mettre un masque (par exemple pour saisir un n° de téléphone, j'ai mis un masque type 99-99-99-99-99). Je fais quelques vérifs en js, mais juste dans le but d'avertir l'utilisateur s'il fait une faute de frappe, ça ne bloque pas l'envoi des données. C'est dans la page de traitement en php que je vérifie que tous les champs sont corrects avant de trifouiller la base de données.
Si malgré tout tu tiens absolument à commettre l'erreur d'utiliser le js pour l'envoi de données, voici un code AJAX qui envoi à une page php la valeur d'un select par la méthode POST :
Note 1 : la fonction getXMLHttpRequest() tu dois l'avoir appelé quelque part dans la page
Note 2 : ces 2 ligne, OSEF pour le fonctionnement de base. C'est juste si dans une div qui a pour id 'loader' tu mets une image ou un texte en attendant que ça charge.
Voilà, et dans ta page php, tu récupère la variable normalement :
Et dans l'html, n'oublie pas l'événement qui appelle la fonction (un onchange pour le select de l'exemple) :
Ce code est bien sûr à adapter pour les input, c'est facile, la variable value tu l'initialises comme ça :
Après pour la fonction readData, ben tu mets dedans ce que tu veux changer sur la page formulaire, si tu veux un truc qui change.
Si ta page php ne renvoit pas de XML, cette fonction readData sert à rien.
Sinon, ben j'te mets ce qu'il faut mettre dans la page php :
et si on veut aller au bout des choses, retour à la page html, tu fais la fonction readData :
Voici une autre façon de faire le chose dans le readData :
Voilà, pour la dernière ligne ça sous-entend que t'as des éléments genre input text qui ont des id comme ça : "id0", "id1", "id2" etc. Faut adapter.
J'espère que t'as compris le principe. Les codes je les ai fait de tête, ils sont pas testés, et vu comment je suis fatigué je déconseille de faire un c/c sans revérification.
De rien :-)
Perso j'utilise le js, notamment le jquery pour mettre un masque (par exemple pour saisir un n° de téléphone, j'ai mis un masque type 99-99-99-99-99). Je fais quelques vérifs en js, mais juste dans le but d'avertir l'utilisateur s'il fait une faute de frappe, ça ne bloque pas l'envoi des données. C'est dans la page de traitement en php que je vérifie que tous les champs sont corrects avant de trifouiller la base de données.
Si malgré tout tu tiens absolument à commettre l'erreur d'utiliser le js pour l'envoi de données, voici un code AJAX qui envoi à une page php la valeur d'un select par la méthode POST :
function request(oSelect){ var value = oSelect.options[oSelect.selectedIndex].value; var xhr = getXMLHttpRequest(); //voir note 1 xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)){ readData(xhr.responseXML); document.getElementById('loader').style.display = "none"; //voir note 2 } else if (xhr.readyState < 4){ document.getElementById('loader').style.display = "inline"; //voir note 2 } }; xhr.open("POST", "ta_page.php", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send("nom_de_ta_variable" + value); }
Note 1 : la fonction getXMLHttpRequest() tu dois l'avoir appelé quelque part dans la page
Note 2 : ces 2 ligne, OSEF pour le fonctionnement de base. C'est juste si dans une div qui a pour id 'loader' tu mets une image ou un texte en attendant que ça charge.
Voilà, et dans ta page php, tu récupère la variable normalement :
$_POST['nom_de_ta_variable'];
Et dans l'html, n'oublie pas l'événement qui appelle la fonction (un onchange pour le select de l'exemple) :
<select id="select1" onchange="request(this);">...</select>
Ce code est bien sûr à adapter pour les input, c'est facile, la variable value tu l'initialises comme ça :
var value = oSelect.value;
Après pour la fonction readData, ben tu mets dedans ce que tu veux changer sur la page formulaire, si tu veux un truc qui change.
Si ta page php ne renvoit pas de XML, cette fonction readData sert à rien.
Sinon, ben j'te mets ce qu'il faut mettre dans la page php :
<?php //connexion à ta base de données ... mysql_query("SET NAMES 'utf8'") //données transférées entre la page et la bdd encodées utf8 header('Content-Type: text/xml"); // on dit à php qu'il doit renvoyer une page xml echo "<?xml version='1.0' encoding='ISO-88-59-1'?>"; echo "<liste1>"; ... echo "<item>".$ce_que_tu_veux1."</item>"; echo "<item>".$ce_que_tu_veux2."</item>"; ... echo "</liste1>"; ?>
et si on veut aller au bout des choses, retour à la page html, tu fais la fonction readData :
function readData(oData){ var item1 = oData.getElementByTagName('item').item(0).firstChild.data; //item1 contient la valeur de $ce_que_tu_veux1 var item2 = oData.getElementByTagName('item').item(1).firstChild.data; //item2 contient la valeur de $ce_que_tu_veux2 }
Voici une autre façon de faire le chose dans le readData :
var nodes = oData.getElementByTagName('item'); var oInner; for (var i=0, c=nodes.length; i<c; i++){ oInner = document.createTextNode(nodes[i]); document.getElementById('id' + i).value=appendChild(oInner); } }
Voilà, pour la dernière ligne ça sous-entend que t'as des éléments genre input text qui ont des id comme ça : "id0", "id1", "id2" etc. Faut adapter.
J'espère que t'as compris le principe. Les codes je les ai fait de tête, ils sont pas testés, et vu comment je suis fatigué je déconseille de faire un c/c sans revérification.
De rien :-)
Nymphomaniaque
Messages postés
55
Date d'inscription
mercredi 22 juillet 2009
Statut
Membre
Dernière intervention
14 octobre 2012
4
13 oct. 2010 à 10:38
13 oct. 2010 à 10:38
c'est bien plus compliqué que je ne le pensais.
Effectuer toutes ces modif dans le seul but de récupérer les champs de mon formulaire ! Je vais certainement chercher un formulaire plus simple à intégrer :&
Effectuer toutes ces modif dans le seul but de récupérer les champs de mon formulaire ! Je vais certainement chercher un formulaire plus simple à intégrer :&
Apatik
Messages postés
5304
Date d'inscription
mercredi 28 janvier 2009
Statut
Contributeur
Dernière intervention
29 mai 2016
782
13 oct. 2010 à 10:41
13 oct. 2010 à 10:41
Pourquoi ne pas le coder toi même?
HTML/PHP et hop!
HTML/PHP et hop!