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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Validation d'un formulaire sans changer de page

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Validation d'un formulaire sans changer de page

n°1812750
Toam
Posté le 16-11-2008 à 17:08:30  profilanswer
 

Salut,
 
J'ai passé mon aprèm à me casser la tête sur un truc que j'arrive toujours pas à faire...
 
En gros je souhaiterais sauvegarder en direct un formulaire dans ma base de données. Dans mon exemple, j'ai un champ select et je voudrais stocker à chaque changement de sa valeur sans recharger la page.  
 
J'ai essayé plusieurs pistes et je n'y arrive toujours pas...
Ma dernière piste est de tenter d'utiliser une page qui fait uniquement l'enregistrement. Ensuite j'appel cette page par la fonction open du javacript.
 
Mon problème c'est que ça marche avec le bouton Valider, mais pas sans rien faire (avec l'événement onchange du select). Pour l'évènement onchange, j'ai essayer d'appeler la fonction submit() ou d'appeler la fonction maFonctionAjax() sans succès
 
Auriez vous des idées?  
Merci d'avance
 
 
Le script

Code :
  1. <script type="text/javascript">
  2.         function maFonctionAjax(id,tableSQL,champ,valeur)
  3.         {
  4.           var OAjax;
  5.           if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
  6.           else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP');
  7.           OAjax.open('POST',"requete.php",true);
  8.           OAjax.onreadystatechange = function()
  9.           {
  10.               if (OAjax.readyState == 4 && OAjax.status==200)
  11.               {
  12.                   if (document.getElementById)
  13.                   {   
  14.                       if (OAjax.responseText =='true') { /* OK */
  15.                             document.getElementById('msg').innerHTML='<font color=GREEN>'+OAjax.responseText+'</font>';
  16.                       }else{                             /* PAS OK */
  17.                             document.getElementById('msg').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';
  18.                       }
  19.                   }     
  20.               }
  21.           }
  22.           OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  23.           OAjax.send('&id='+id+'&tableSQL='+tableSQL+'&champ='+champ+'&valeur='+valeur);                 
  24.         }   
  25. </script>


 
Et ma page HTML

Code :
  1. <form action="" method="post" onsubmit="maFonctionAjax(this.id.value,this.tableSQL.value,this.champ.value,this.valeur.value);return false">
  2.           <b><u>Actions</u></b><br /><br />
  3.           <label class="evaluation"><?php echo $label ?></label>
  4.           <input type="text" name="" value="Toujours"  style="width:100px;" disabled="disabled"/>
  5.           <select name="valeur" style="width:100px;" onchange="submit()">
  6.         <option value=""></option>
  7.               <option value="Toujours">Toujours</option>
  8.               <option value="Parfois">Parfois</option>
  9.               <option value="Jamais">Jamais</option>
  10.           </select>&nbsp;&nbsp;&nbsp;&nbsp;
  11.           <input type="radio" name=""/>&nbsp;&nbsp;&nbsp;
  12.           <input type="radio" name=""/>&nbsp;&nbsp;&nbsp;
  13.           <input type="radio" name=""/>&nbsp;&nbsp;&nbsp;
  14.     <div ></div>
  15.           <br style="clear:left; "/><br/>
  16.     <input type="hidden" name="tableSQL" value="<?php echo $tableSQL ?>" />
  17.     <input type="hidden" name="champ" value="<?php echo $champ ?>" />
  18.     <input type="hidden" name="id" value="1" />
  19.           <button type="submit">Valider</button>
  20.     <div id="msg"></div>
  21.     </form>


 

mood
Publicité
Posté le 16-11-2008 à 17:08:30  profilanswer
 

n°1812779
Toam
Posté le 16-11-2008 à 18:58:52  profilanswer
 

C'est bon j'ai trouvé, en fait c'était simplement le passage des valeurs qui n'allait pas (avec le this...)
 
Je met ma solution si ç ainteresse quelqu'un...
 
Ya plus simple?

Code :
  1. <script type="text/javascript">
  2.       function maFonction()
  3.         {
  4.     var id = document.<?php  echo $nom?>.id.value
  5.     var tableSQL = document.<?php  echo $nom?>.tableSQL.value;;
  6.     var champ = document.<?php  echo $nom?>.champ.value;
  7.     var valeur = document.<?php  echo $nom?>.valeur.value;
  8.     var OAjax;
  9.           if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
  10.           else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP');
  11.           OAjax.open('POST',"requete.php",true);
  12.           OAjax.onreadystatechange = function()
  13.           {
  14.               if (OAjax.readyState == 4 && OAjax.status==200)
  15.               {
  16.                   if (document.getElementById)
  17.                   {   
  18.                       if (OAjax.responseText =='true') { /* OK */
  19.                             document.getElementById('msg').innerHTML='<font color=GREEN>'+OAjax.responseText+'</font>';
  20.                       }else{                             /* PAS OK */
  21.                             document.getElementById('msg').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';
  22.                       }
  23.                   }     
  24.               }
  25.           }
  26.           OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  27.           OAjax.send('&id='+id+'&tableSQL='+tableSQL+'&champ='+champ+'&valeur='+valeur);   
  28.                
  29.         }   
  30. </script>
  31.   <form action="" method="post" name="<?php  echo $nom?>" onsubmit="maFonction();return false" />
  32.           <b><u>Actions</u></b><br /><br />
  33.           <label class="evaluation"><?php echo $label ?></label>
  34.           <input type="text" name="" value="Toujours"  style="width:100px;" disabled="disabled"/>
  35.           <select name="valeur" style="width:100px;" onchange="maFonction();">
  36.         <option value=""></option>
  37.               <option value="Toujours">Toujours</option>
  38.               <option value="Parfois">Parfois</option>
  39.               <option value="Jamais">Jamais</option>
  40.           </select>&nbsp;&nbsp;&nbsp;&nbsp;
  41.           <input type="radio" name=""/>&nbsp;&nbsp;&nbsp;
  42.           <input type="radio" name=""/>&nbsp;&nbsp;&nbsp;
  43.           <input type="radio" name=""/>&nbsp;&nbsp;&nbsp;
  44.     <div ></div>
  45.           <br style="clear:left; "/><br/>
  46.     <input type="hidden" name="tableSQL" value="<?php echo $tableSQL ?>" />
  47.     <input type="hidden" name="champ" value="<?php echo $champ ?>" />
  48.     <input type="hidden" name="id" value="1" />
  49.           <button type="submit">Valider</button>
  50.     <div id="msg"></div>
  51.     </form>


 


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

  Validation d'un formulaire sans changer de page

 

Sujets relatifs
Ouvrir une nouvelle page de facon aléatoire[resolu]préremplir une case de FORMulaire : probleme avec guillemets
bien placer un message d'erreur dans un formulairePb avec boucles imbriquées pour controle d'un formulaire
afficher div en javascript après validation formulaire non validéePb validation page HTML
afficher page accueil depuis excelredirection apres validation du formulaire + email saisie valide
Plus de sujets relatifs à : Validation d'un formulaire sans changer de page


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