IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[AJAX] Un formulaire en Ajax


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Août 2008
    Messages
    25
    Détails du profil
    Informations forums :
    Inscription : Août 2008
    Messages : 25
    Par défaut [AJAX] Un formulaire en Ajax
    Bonjours à tous, je butte sur un problème sans doute très simple à résoudre :

    Je cherche à faire un formulaire en Ajax où l'on est redirigé. Pour l'instant j'ai ça :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    function maFonctionAjax(chaine) 
    { 
      var lesMots = chaine.value.split(' ');
      var nouvelleChaine = '[[afficher les articles]].[[titre:' + lesMots.join(']].[[titre:') + ']]';        
      var OAjax; 
      if (window.XMLHttpRequest) OAjax = new XMLHttpRequest(); 
      else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP'); 
      OAjax.open('POST',"http://www.generap.com/cgi-bin/execute.pl",true); 
      OAjax.onreadystatechange = function() 
      { 
          if (OAjax.readyState == 4 && OAjax.status==200) 
          { 
              if (document.getElementById) 
              {    
                  if (OAjax.responseText =='true') { /* OK */ 
                        document.getElementById('msg').innerHTML='<font color=GREEN>'+OAjax.responseText+'</font>'; 
                  }else{                             /* PAS OK */ 
                        document.getElementById('msg').innerHTML='<font color=RED>'+OAjax.responseText+'</font>'; 
                  } 
              }      
          } 
      } 
      OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded'); 
      OAjax.send('site_id=rap'+'command='+nouvelleChaine);                  
    }
    Mon but est de rediriger l'internaute sur cette page :

    "http://www.generap.com/cgi-bin/execute.pl?site_id=rap&command="+nouvelleChaine

    Où l'élément 'nouvelleChaine' correspond à ce que l'internaute à taper dans le formulaire avec chaque mot entre [[ ]]

    Mon code html :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <form method="post" onsubmit="maFonctionAjax(this.keywords.value);return false" action=""> 
    <input name="keywords" id="keywords" type="text" />
    <input type="submit" value="envoyer"  />
    </form> 
    <div id="msg"></div>
    J'ai donc tenté ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <script type="text/javascript">
    function maFonctionAjax(chaine) 
    { 
      var lesMots = chaine.value.split(' ');
      var nouvelleChaine = '[[afficher les articles]].[[titre:' + lesMots.join(']].[[titre:') + ']]';        
      var OAjax; 
      if (window.XMLHttpRequest) OAjax = new XMLHttpRequest(); 
      else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP'); 
      OAjax.send('POST',"http://www.generap.com/cgi-bin/execute.pl?site_id=rap&command="+nouvelleChaine,true); 
      OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');                  
    }    
    </script>
     
    <form method="post" onsubmit="maFonctionAjax(this.keywords.value);return false" action=""> 
    <input name="keywords" id="keywords" type="text" />
    <input type="submit" value="envoyer"  />
    </form>
    Mais ça ne marche pas !

    Quelqu'un peut-il m'aider ?

  2. #2
    Membre actif
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Février 2006
    Messages : 81
    Par défaut
    Salut,
    Si tu veux faire une redirection t'as : location.replace(url) ou bien location.href = url.
    donc ajax dans ton cas sert à rien,
    PS: ton ajax (OAjax) me rappelle de mon vieux code sur php-cs , vrai ?

  3. #3
    Membre averti
    Inscrit en
    Août 2008
    Messages
    25
    Détails du profil
    Informations forums :
    Inscription : Août 2008
    Messages : 25
    Par défaut
    J'ai trouvé le code ici : http://www.pc-infopratique.com/forum...-vt-31367.html

    Peut-être que je n'ai pas besoin d'Ajax mais je ne vois pas comment faire autrement parce que l'url de redirection dépend de ce que l'internaute aura tapé dans le formulaire.

    Si je fait un formulaire normal en html et javascript (pour le découpage des mots) je suis aubligé d'inquer une url dans le champ action="" et dans ce cas, le découpage n'a pas lieu et on est immédiatemment redirigé.

    Je pensais qu'avec Ajax (qui opère avant l'envois des données), je pourrait découper les mots puis faire une redirection de type :

    http://www.generap.com/cgi-bin/execu...91;&#91;mot2]]

    (L'url est comme ça parce que mon site est en Perl)

    Je ne sais pas si tu connais un moyen de régler ça !

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Je pense que tu n'as pas forcément tout compris à Ajax...
    Je pensais qu'avec Ajax (qui opère avant l'envois des données)
    Non, c'est javascript qui opère avant l'envoi de données.
    En fait, Ajax en soit ce n'est rien qu'un ensemble de technologies réunies, mais globalement, ce que l'on appelle Ajax, c'est la transmission de données vers le serveur et la récupération de la réponse du serveur, en revanche, les données envoyées sont traitées avant par javascript.
    Si je fait un formulaire normal en html et javascript (pour le découpage des mots) je suis aubligé d'inquer une url dans le champ action=""
    Non, pas nécessairement, tu peux opérer sans mettre de action dans ton form et soumettre le formulaire "manuellement" (au click sur un bouton qui ne soit pas submit par exemple) en récupérant les valeurs que tu veux et en les envoyant via location (cf réponse de amezghal) voire, tu peux utiliser l'événement onsubmit pour manipuler le fichier de ton action...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre averti
    Inscrit en
    Août 2008
    Messages
    25
    Détails du profil
    Informations forums :
    Inscription : Août 2008
    Messages : 25
    Par défaut
    Donc ça devrait plutot ressembler à ça :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <script type="text/javascript">
    function rechercher(chaine) 
    { 
      var lesMots = chaine.value.split(' ');
      var nouvelleChaine = '[[afficher les articles]].[[titre:' + lesMots.join(']].[[titre:') + ']]';
      location.replace('http://www.generap.com/cgi-bin/execute.pl?site_id=rap&command='+nouvelleChaine)                    
    }    
    </script>
     
    <form method="post" action=""> 
    <input name="keywords" id="keywords" type="text" />
    <input type="button" value="envoyer" onclick="rechercher(this.keywords.value);return false" />
    </form>
    Mais ça ne marche pas et je pense que c'est parce que la fonction n'arrive pas à récupérer le contenu de 'keywords', mais comment faire alors ?

  6. #6
    Membre actif
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Février 2006
    Messages : 81
    Par défaut
    plutôt onsubmit

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AJAX] Submit Formulaire
    Par Azanael dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 29/07/2008, 12h31
  2. [AJAX] ajax addRow/formulaire, appartenance du champ
    Par speedev dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 30/06/2006, 11h52
  3. [AJAX]Prob: Formulaire externe
    Par markeno dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 06/06/2006, 22h57
  4. [AJAX] Ajax et formulaire
    Par Mimi Bulles dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 13/05/2006, 15h17
  5. [AJAX] Ajax et formulaire
    Par Mimi Bulles dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 13/05/2006, 12h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo