Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1518 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  scriptaculous : envoyer un formulaire sans rechargement de page

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

scriptaculous : envoyer un formulaire sans rechargement de page

n°1663118
Proxounet
Posté le 26-12-2007 à 17:56:43  profilanswer
 

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

mood
Publicité
Posté le 26-12-2007 à 17:56:43  profilanswer
 

n°1663206
smartdevil
V
Posté le 26-12-2007 à 22:27:45  profilanswer
 

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

n°1663270
Mxtrem
Posté le 27-12-2007 à 09:32:06  profilanswer
 

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:

n°1663272
Mxtrem
Posté le 27-12-2007 à 09:33:42  profilanswer
 

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

n°1663304
smartdevil
V
Posté le 27-12-2007 à 11:55:50  profilanswer
 

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

n°1663307
dwogsi
Défaillance cérébrale...
Posté le 27-12-2007 à 11:59:30  profilanswer
 

+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})/
n°1663351
Mxtrem
Posté le 27-12-2007 à 13:46:58  profilanswer
 

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

n°1663423
dwogsi
Défaillance cérébrale...
Posté le 27-12-2007 à 16:03:10  profilanswer
 

C'est discutable, mais on va pas troller.


---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
n°1663552
Proxounet
Posté le 28-12-2007 à 02:48:26  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  scriptaculous : envoyer un formulaire sans rechargement de page

 

Sujets relatifs
Envoi d'un formulaire par mailFormulaire qui modifie la base de données
Intégration d'une application flex dans une page jspfiltre formulaire
Pagination, page en cours en grasProbleme avec Pied de page
[PHP+FLASH] Formulaire[access] récupérer des informtions tirées d'une page internet
sequencement socket lié a un formulaire 
Plus de sujets relatifs à : scriptaculous : envoyer un formulaire sans rechargement de page


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR