Se connecter avec
S'enregistrer | Connectez-vous

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

Dernière réponse : dans Programmation

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

Lassé par la pub ? Créez un compte

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

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.

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 !!!
Expert Programmation

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 ;
}

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

Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde