[AJAX] Un formulaire en Ajax

Version imprimable

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:

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:

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:

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 ?

26/10/2008, 21h22
amezghal

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 :P, vrai ?
27/10/2008, 10h09
bebest93

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;[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 !
27/10/2008, 12h07
Bovino

Je pense que tu n'as pas forcément tout compris à Ajax...

Citation:

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.

Citation:

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...

Donc ça devrait plutot ressembler à ça :

Code:

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 ?

27/10/2008, 13h25
amezghal

plutôt onsubmit

Ah merci, j'ai enfin réussit. Voilà ce qu'il fallait mettre :

Code:

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="" onsubmit="rechercher(this.keywords);return false"> 
<input name="keywords" id="keywords" type="text" />
<input type="submit" value="envoyer" />
</form>