Validation d'un formulaire sans changer de page

Validation d'un formulaire sans changer de page - HTML/CSS - Programmation

Marsh Posté le 16-11-2008 à 17:08:30    

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">
  3.         function maFonctionAjax(id,tableSQL,champ,valeur)
  4.         {
  5.           var OAjax;
  6.           if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
  7.           else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP');
  8.           OAjax.open('POST',"requete.php",true);
  9.           OAjax.onreadystatechange = function()
  10.           {
  11.               if (OAjax.readyState == 4 && OAjax.status==200)
  12.               {
  13.                   if (document.getElementById)
  14.                   {   
  15.                       if (OAjax.responseText =='true') { /* OK */
  16.                             document.getElementById('msg').innerHTML='<font color=GREEN>'+OAjax.responseText+'</font>';
  17.                       }else{                             /* PAS OK */
  18.                             document.getElementById('msg').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';
  19.                       }
  20.                   }     
  21.               }
  22.           }
  23.           OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  24.           OAjax.send('&id='+id+'&tableSQL='+tableSQL+'&champ='+champ+'&valeur='+valeur);                 
  25.         }   
  27. </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/>
  17.     <input type="hidden" name="tableSQL" value="<?php echo $tableSQL ?>" />
  18.     <input type="hidden" name="champ" value="<?php echo $champ ?>" />
  20.     <input type="hidden" name="id" value="1" />
  22.           <button type="submit">Valider</button>
  23.     <div id="msg"></div>
  24.     </form>


 

Reply

Marsh Posté le 16-11-2008 à 17:08:30   

Reply

Marsh Posté le 16-11-2008 à 18:58:52    

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


 

Reply

Sujets relatifs:

Leave a Replay

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