scriptaculous : envoyer un formulaire sans rechargement de page

scriptaculous : envoyer un formulaire sans rechargement de page - HTML/CSS - Programmation

Marsh Posté le 26-12-2007 à 17:56:43    

Bonjour;
 
C'est peut etre l'une des choses les plus répendues en ajax, mais je n'ai pas encore trouver quelque chose de clair et simple à la fois durant mes lectures pourtant longues;
 
L'objectif est le suivant :
Un formulaire est constitué de deux input, un "nom" et un "prenom". J'aimerai pouvoir envoyer ce formulaire qui permet de vérifier que Prénom Nom est dans la base de donnée. Si c'est le cas, un radio permet de sélectionner le tuple de la base de donnée en question. (Ce formulaire est donc à l'intérieur d'un formulaire plus grand)
 
Pouvez vous m'aider ?
Déjà, par quelles balises encadrer les fonctions new, etc, de scriptaculous ?
 
Merci beaucoup

Reply

Marsh Posté le 26-12-2007 à 17:56:43   

Reply

Marsh Posté le 26-12-2007 à 22:27:45    

ton formulaire à la "validation" va appelé une fonction javascript  
 
à partir de celle ci à ta place je me servirais de l'objet xmlhttprequest pour passer tes input à une page php qui fait l'enregistrement en base tout ca se passant sans chargement de page

Reply

Marsh Posté le 27-12-2007 à 09:32:06    

Salut !
 
Ton formulaire :
<div id='formulaireAjax'>
Nom : <input type='text' id='nom'><br>
Prenom : <input type='text' id='prenom'>
</div>
 
 
 
Soit 2 fonctions dans un fichier javascript :
 
function loadRequest(url,position) // url = adresse traitement formulaire; position = id du div de rechargement (ici formulaireAjax)
{
 var xhr_object = null;
    if(window.XMLHttpRequest)  xhr_object = new XMLHttpRequest();
   else
     if (window.ActiveXObject)  xhr_object = new ActiveXObject("Microsoft.XMLHTTP" );
 xhr_object.open("GET", url, true);
 xhr_object.onreadystatechange = function(){
 if ( xhr_object.readyState == 4 )
 {
  document.getElementById(position).innerHTML = xhr_object.responseText;
 }
 }
 xhr_object.send(null);
}
 
function returnDatas() {
 url = "url de traitement de ton formulaire.php";
 var nom = document.getElementById('nom').value; // avec <input type='text' id='nom'>
 var prenom = document.getElementById('prenom').value // avec <input type='text' id='prenom'>
 if(nom.length>0 && prenom.length>0)
  {
  function loadRequest(url+"?nom="+nom+"&prenom="+prenom,"formulaireAjax" );
  }
}
 
Et donc sur ta page PHP de traitement des données tu auras :
<?php
 echo $_GET['nom'];
 echo $_GET['prenom'];
?>
 
 
Voilà, j'espère que ça te rendra service :jap:

Reply

Marsh Posté le 27-12-2007 à 09:33:42    

OOps, je vois que je suis hors sujet :O (tête dans le cul toussah; j'ai pas lu le post en entier).
Bon ça servira ptet à quelqu'un, je laisse :D

Reply

Marsh Posté le 27-12-2007 à 11:55:50    

tu n'est pas totalement hors sujet par contre le formulaire c'est pas entre div qu'il faut mettre les input mais entre <form> !  
 
bref

Reply

Marsh Posté le 27-12-2007 à 11:59:30    

+1
Dans un form, agir sur le onsubmit, prévoir un traitement alternatif pour les JS non dispo....
Bref, accessibilité :o


---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 27-12-2007 à 13:46:58    

Bah les JS non dispo ça existe plus ça :O

Reply

Marsh Posté le 27-12-2007 à 16:03:10    

C'est discutable, mais on va pas troller.


---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 28-12-2007 à 02:48:26    

Merci pour toute vos réponses;
en essayant de comprendre les différents codes, je suis finallement parvenu a la solution suivante :
 
On fait d'abord un lien vers :
- prototype.js, téléchargeable sur internet
- ajax.js, ou est contenu notre propre code
 
Le code html a utilsier est :

Code :
  1. Nom : <input type="text" id="ri_nom_parent2" /><br />
  2.     Prénom : <input type="text" id="ri_prenom_parent2" /><br />
  3.     <div class="rechercher_form_identite" onClick="recherche_identite('_parent2')">Rechercher</div>
  4.     <div id="ri_parent2_resultat">Merci de renseigner un nom et un prénom.<br /></div>


 
la div Rechercher permet donc, au moyen d un clic, de mettre a jout la div qui la suit, au moyen de la fonction suivante, présente dans ajax.js :
 

Code :
  1. function recherche_identite(rang){
  2.      var url = 'recherche_identite.php';
  3.      var pars = 'ri_nom='+escape($F('ri_nom'+rang))+'&ri_prenom='+escape($F('ri_prenom'+rang))+'&ri_rang='+rang;
  4.      var target = 'ri'+rang+'_resultat';
  5.      var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});
  6. }


 
La page recherche_identite.php doit fournir au moyen d un echo ce qui sera affiché dans la div


Message édité par Proxounet le 28-12-2007 à 02:49:20
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed