[PHP + Ajax] Submit formulaire via Ajax

Submit formulaire via Ajax [PHP + Ajax] - PHP - Programmation

Marsh Posté le 07-02-2013 à 10:14:37    

Bonjour à tous,
 
Je vais tacher de vous décrire mon problème.  
Je préfère donner trop de détails que pas assez, par avance désolé si mon message est long.
 
Je développe actuellement une application couteau suisse, qui permet de faire différentes actions (des modifications dans une base de donnée, de façon assistée).
Il y a une page par action possible. Voila le fonctionnement général de celles-ci :
 
Un formulaire permet de recupérer les informations qui vont construire la requête à jouer. Une fois que le formulaire est validé, il appelle sa propre page, qui détecte un POST et réalise les actions necessaires. Le modèle général des pages est :
 

Code :
  1. <?php
  2. // Le modèle des pages
  3. if ( (!($_POST) ) {
  5. // Affichage du formulaire
  6. echo "<form method='post' name='formID' id='formID' action='/repo/'>";
  7. // [...]
  9. } else {
  11. // Récupération des infos + réalisation des actions.
  13. }
  14. ?>


 
Toutes ces pages sont intégrées dans une page globale (index.php) , et appellées via un include individuel.
 
Pour que tout soit transparant pour l'utilisateur, l'url de l'application doit rester /repo/ sans page ni paramètres à la suite.  
Pour cela, j'utilise ajax pour faire un chargement dynamique des pages.  
 
Ma page index contient (parmis d'autre chose) un div, qui sera remplacé dynamiquement par la page dont j'ai besoin :
 

Code :
  1. <?php
  2. // Page index.php
  4. echo "<div id='page_content'>";
  5. // include_once('inc/help.php');
  6. echo "</div>";
  8. ?>


 
Le gros obstacle survient lors de la validation du formulaire.  
Il est necessaire de faire deux actions : valider le formulaire ET appeler la fonction ajax qui inclure la bonne page (celle sur laquelle on travaille).
 
Pour cela, j'utilise un bouton qui fait les deux actions via un onClick.  
 

Code :
  1. <?php
  3. echo "<input type='button' value='Create' style='color:#00aa00' onClick=\"javascript:document.forms['formID'].submit();load_page('inc/createGroup');\">";
  5. ?>


 
Malheureusement, cela ne fonctionne pas.  
Voila le fichier qui contient ma fonction ajax, donné par un ami.  
 
Apparemment, il l'a trouvée sur le net, car en cherchant une solution à mon problème, je suis tombé dessus.
 

Code :
  1. function load_page(select) {
  2. var xhr2 = new_xhr(); //On crée un nouvel objet XMLHttpRequest
  3. xhr2.onreadystatechange = function(){
  5.  if ( xhr2.readyState == 4 ) { // Actions executées une fois le chargement fini
  6.   if(xhr2.status  != 200) { // Message si il se preoduit une erreur
  8.    alert("Erreur - status : "+xhr2.status); // debug
  9.    document.getElementById("page_content" ).innerHTML ="Error code " + xhr2.status;
  11.   } else { // On met le contenu du fichier externe dans la div "page_content"
  13.    document.getElementById("page_content" ).innerHTML = xhr2.responseText;
  14.   }
  15.  }  else { // Message affiché pendant le chargement
  16.   alert("loading : "+select+" - state : "+xhr2.readyState); // debug
  17.   document.getElementById("page_content" ).innerHTML = "<center>Loading : "+select+"...</center>";
  18.  }
  20. }
  22. xhr2.open("GET", select+".php", true); //Appel du fichier externe
  23. xhr2.setRequestHeader("Content-Type","charset=iso-8859-1" );
  24. xhr2.send(null);
  25. }


 
Avec les bouts de débug que j'ai mis, en validant mon formulaire j'ai :
 

Citation :

loading : inc/createGroupe - state : 1
Erreur - status : 0


 
Je ne suis pas du tout connaisseur d'ajax, je m'en remet donc à vous.  
 
Pourquoi est ce que le status de xhr2 passe à 0 ?  
Comment corriger le problème ?
 
Je sèche.  
Merci d'avance pour votre aide !
 
Arnaud


Message édité par arnaudfrancois le 07-02-2013 à 10:33:31
Reply

Marsh Posté le 07-02-2013 à 10:14:37   

Reply

Marsh Posté le 08-02-2013 à 13:06:02    

Si tu veux afficher en ajax le résultat je ne comprend pas pourquoi tu as besoin de valider ton formulaire...

Reply

Marsh Posté le 11-02-2013 à 09:18:43    

Ce qui est fait sur la page après validation dépend justement du contenu du formulaire validé.  
 
Pour l'instant, j'ai trouvé un workaround :  
- Pour un changement de page complet, j'utilise la partie ajax.
- Pour un changement par validation de formulaire, j'utilise une variable hidden dans mon formulaire qui indique la prochaine page à afficher. La page index l'inclus et le $_POST est fonctionnel.
 
Je poste ici pour ceux que ca intéresserait.  
 
Ma page index, qui gère les affichages :
 

Code :
  1. <?php
  2. echo "<div id='page_content'>";
  3. if (isset($_POST['repo_nextpage'])) {
  4.  include_once($_POST['repo_nextpage'].'.php');
  5. } else {
  6.  include_once('inc/help.php');
  7. }
  8. echo "</div>";


 
Un exemple de changement de page via ajax :  
 

Code :
  1. <?php
  2. echo "<button type='submit' name='inc/createGroup' value='".$label."' style='cursor: pointer;' onClick=\"load_page(this.name);\">Lien</button>";
  3. ?>


 
Un exemple de changement de page classique :
 

Code :
  1. <?php
  2. echo "<form method='post' name='formID' id='formID' class='formular' action='/repo/'>";
  3. // [...]
  4. echo "<input type='hidden' id='repo_nextpage' name='repo_nextpage' value='inc/createGroup'>";
  5. echo "<input type='button' value='".$label."' style='color:#00aa00' onClick=\"javascript:this.value='Processing...';document.forms['formID'].submit();\">";
  6. echo "</form>";
  8. ?>


Message édité par arnaudfrancois le 11-02-2013 à 09:19:32
Reply

Marsh Posté le 21-02-2013 à 23:33:45    

pourquoi tu n'utilises pas jQuery ? ça simplifierai énormément ton code et te faciliterai la tâche

Reply

Sujets relatifs:

Leave a Replay

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