Se connecter / S'enregistrer
Votre question

[AJAX] Ecrire le contenu d'un formulaire dans un div

Tags :
  • Script
  • Programmation
Dernière réponse : dans Programmation
8 Août 2007 21:31:41

Salut à tous,
je vous explique mon problême. Je commence en AJAX et j'aimerais pour le moment afficher un fomulaire, dans lequel j'écris ce que je veux, et que, lorsque je valide, cela m'écrive le contenu de mon fomulaire dans un DIV.
Je mettrais ensuite un simple rechargement de page.
C'est en gros le début d'un minichat Ajax, mais vraiment le début :kaola:  .

Voilà mon code:

  1. <html>
  2. <head>
  3.  
  4. <script type="text/javascript" src="ajax.js"></script>
  5.  
  6. <script type="text/javascript">
  7.  
  8. function ecrire(contenu)
  9. {
  10. var xhr;
  11.  
  12. try
  13. {
  14. xhr = new XMLHttpRequest();
  15. }
  16.  
  17. catch(e)
  18. {
  19. xhr = new ActiveXObject(Microsoft.XMLHTTP);
  20. }
  21.  
  22. xhr.onreadystatechange = function()
  23. {
  24. if (xhr.readyState == 4 && xhr.status == 200)
  25. {
  26. document.getElementById("envoyes").innerHTML = contenu;
  27. }
  28.  
  29. else
  30. {
  31. document.getElementById("envoyes").innerHTML = "Erreur" + xhr.status;
  32. }
  33. };
  34.  
  35. }
  36.  
  37. function envoyer()
  38. {
  39. var message = document.ajax.message.value;
  40. ecrire(message);
  41. }
  42.  
  43. </script>
  44.  
  45. <title>Ecrire et lire en AJAX</title>
  46. </head>
  47.  
  48. <body>
  49.  
  50. <div id="envoyes"></div>
  51.  
  52.  
  53. <form name="ajax" id="ajax" method="post" action="">
  54. <input type="text" name="message" size="50" /><br/>
  55. <input type="submit" value="Envoyer" onClick='envoyer()' />
  56. </form>
  57.  
  58.  
  59. </body>
  60. </html>


Voilà en gros quand je clique sur le bouton, il récupère la valeur de message, puis appelle ensuite la fonction ecrire, justement pour ecrire cette phrase dans la div #envoyes, mais ça ne marche pas.

Si vous avez une idée je vous serais très reconnaissant de me la partagée.
Merci.

Autres pages sur : ajax ecrire contenu formulaire div

8 Août 2007 22:14:27

Et en quoi ajax t'es utile la ????

Tu n'as pas compris à quoi servait ajax toi ...

Ajax est utilie si tu as besoin d'appeler un script (fichier) distant , comme un script php ....

La t'as fonction écrire doit se résumer à ça :

function ecrire(contenu)
{
document.getElementById("envoyes" ).innerHTML = contenu
}

Et c'est tout.
a c 232 L Programmation
8 Août 2007 22:15:07

Bonjour,

En fait là, tu ne fais pas vraiment une requête, et tu n'as pas besoin d'AJAX dans ce que tu veux faire !
"AJAX" n'est nécessaire que si tu veux appeler une page pour récupérer une valeur ou quelque chose comme ça. Alors que là, tu n'en as pas besoin du tout, vu que c'est sur la même page.

Déjà, le premier problème, c'est que ton input est de type submit, donc quand tu cliques dessus, ça valide le formulaire, et ça rafraichit la page. Passe le input en type button.

En fait, pour faire ton chat, il faudrait que tu ai une base de données qui stocke les messages, et que tu ai une page qui ajoute les messages dans la base de données, et une page pour les retourner.
Et à ce moment là, tu pourras faire un peu d'AJAX.
Contenus similaires
8 Août 2007 22:27:35

Effectivement ce n'est pas pour le moment de l'AJAX mais ayant pour but de créer un MiniChat en AJAX, je préférais présenter mon problême dans cette optique.
Bien sur oui pour le moment je n'utilise pas d'AJAX, mais comme j'ai eu un problême avant d'en arriver à AJAX, alors j'ai demander en me projetant, peut etre trop tôt, dans le futur.
Pour finir, j'ai passé mon input en type bouton mais ça n'a pas l'air de marcher ... peut être ai-je fais une erreur ...
Si vous voulais bien me mettre le code pour que je vérifie.

En tout cas merci pour vos réponses !!!
a c 232 L Programmation
8 Août 2007 22:31:11

Si tu passes l'input en type button, ça ne va pas marcher non plus, car tu ne fais pas de requête, comme kymic t'as dit, tu as juste besoin de faire :

function ecrire(contenu)
{
document.getElementById("envoyes" ).innerHTML = contenu ;
}
8 Août 2007 22:53:25

# xhr.onreadystatechange = function()
# {
# if (xhr.readyState == 4 && xhr.status == 200)
# {
# document.getElementById("envoyes" ).innerHTML = contenu;
# }
#
# else
# {
# document.getElementById("envoyes" ).innerHTML = "Erreur" + xhr.status;
# }
# };


Cette partie de ton code n'est jamais appelé.

Pour qu'elle soit appelé il faut que tu exécute cette fonction xhr.send() ...

Voila rajoute ces deux lignes en bas de ta fonction :

xhr.open("GET","fichier.ext",true);
xhr.send(null);

Ce ceci aura pour effet d'appeler le fichier fichier.ext (pour le moment crée le vide). Et donc maintenant la partie xhr.onreadystatechange devrait s'exécuter ....

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS