Problème tchat jquery

Nagraria
Javascript

'''
'''

Bonjour !
J'essaie de créer un simple systeme de tchat en jquery, mais seulement lorsque je post mon message il ne s'affiche que 1 demi seconde avant de disparaitre, je ne vois pas du tout d'où ca peut venir ...

Voila le code !

<script type="text/javascript">
$(document).ready(function(){
    $("#message").focus();
    $("#send").click(function(){
        var msg = $("#message").val().trim();
        $("#message").val('');
        $("#message").focus();
        if(msg.length > 0){
            $('<p></p>').html(msg).appendTo("#msg_val");

        }
    });
})
</script>

<h2>Espace de tchat</h2>
<h3>Les derniers messages</h3>
<div class="messages" id="msg_val"></div>
<div id="form_tchat">
    <form method="post"  class="form_tchat">
        <label for="message">Votre  message :</label><br /><br/>
        <textarea id="message" maxlength="250" ></textarea>

        <input type="submit" id="send" value="Envoyer" />
    </form>
</div>

J'ai bien inclus jquery, merci de votre aide j'espere avoir été assez précis !

4 réponses

antho07
Réponse acceptée

Bonjour,
ton message ne disparait pas. C'est ta page qui se recharge.
Pourquoi?
Parce que ton bouton est de type submit et va donc enclencher la soumission du formulaire.
Il faut donc couper ce comportement par défaut au moment du click. JQuery expose pour ça une méthode preventDefault() attaché aux évènements propagées.

Ainsi modifie ton script :

$(document).ready(function(){
    $("#message").focus();
    $("#send").click(function(e){  // e = event click propagé par ton click sur envoyer
        e.preventDefault();  // on coupe le comportement par défaut 
        var msg = $("#message").val().trim();
        $("#message").val('');
        $("#message").focus();
        if(msg.length > 0){
            $('<p></p>').html(msg).appendTo("#msg_val");

        }
    });
})

Cordialement

Defy

si tu ouvre la console, ou alors que tu envoie le message dans la console il te ressort quoi?

betaWeb

Salut,

Est-ce que tu pourrais reformater ton post stp, on ne comprend pas grand chose là.

Nagraria
Auteur

Oui désolé le html a été executé et non affiché, le revoila :

<div id="form_tchat">
    <form method="post"  class="form_tchat">
        <label for="message">Votre  message :</label><br /><br/>
        <textarea id="message" maxlength="250" ></textarea>

        <input type="submit" id="send" value="Envoyer" />
    </form>
</div>

et le jquery : 

$(document).ready(function(){
    $("#message").focus();
    $("#send").click(function(){
        var msg = $("#message").val().trim();
        $("#message").val('');
        $("#message").focus();
        if(msg.length > 0){
            $('<p></p>').html(msg).appendTo("#msg_val");

        }
    });
})

Je ne sais pas trop comment me servir de la console, je débute encore.
Merci de vos réponses !