Chat Formularfeld nach senden leeren

[xxxmike]

Hallo,
bekomme bald die Krise. Nun habe ich einen schlanken Chat gefunden, der soweit ok ist, nun habe ich das Problem, dass sich das Textfeld nach dem senden nicht leert.

Mit Java habe ich nicht so die Kenntnisse.

Anbei mal der Quellcode:

Das html Formular

<form name="test" method="post" id="form">
        <table>
            <tr>
                <td><label>User</label></td>
                <td><input class="text user" id="nick" type="text" MAXLENGTH="25" /></td>
            </tr>
            <tr>
                <td><label>Message</label></td>
                <td><input class="text"  id="message" type="text" MAXLENGTH="255"></td>
            </tr>
            <tr>
                <td></td>
                <td><input id="send" type="submit" value="senden" /></td>
            </tr>
        </table>
    </form>
    <div id="container">
        <ul class="menu">
            <li>Shoutbox</li>
        </ul>
        <span class="clear"></span>
        <div class="content">
            <h1>Letzten Message</h1>
            <div id="loading"><img src="css/images/loading.gif" alt="Loading..." /></div>
            <ul>
            <ul>
        </div>
    </div>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="shoutbox.js"></script>

Dann das Javascript, hier nehme ich an, dass man was ändern kann:

$(document).ready(function(){
    //global vars
    var inputUser = $("#nick");
    var inputMessage = $("#message");
    var loading = $("#loading");
    var messageList = $(".content > ul");
    
    //functions
    function updateShoutbox(){
        //just for the fade effect
        messageList.hide();
        loading.fadeIn();
        //send the post to shoutbox.php
        $.ajax({
            type: "POST", url: "shoutbox.php", data: "action=update",
            complete: function(data){
                loading.fadeOut();
                messageList.html(data.responseText);
                messageList.fadeIn(2000);
            }
        });
    }
    //check if all fields are filled
    function checkForm(){
        if(inputUser.attr("value") && inputMessage.attr("value"))
            return true;
        else
            return false;
    }
    
    //Load for the first time the shoutbox data
    updateShoutbox();
    
    //on submit event
    $("#form").submit(function(){
        if(checkForm()){
            var nick = inputUser.attr("value");
            var message = inputMessage.attr("value");
            //we deactivate submit button while sending
            $("#send").attr({ disabled:true, value:"Sending..." });
            $("#send").blur();
            //send the post to shoutbox.php
            $.ajax({
                type: "POST", url: "shoutbox.php", data: "action=insert&nick=" + nick + "&message=" + message,
                complete: function(data){
                    messageList.html(data.responseText);
                    updateShoutbox();
                    //reactivate the send button
                    $("#send").attr({ disabled:false, value:"sende!" });
                }
             });
        }
        else alert("Bitte ausfüllen!");
        //we prevent the refresh of the page after submitting the form
        return false;
    });
});

Danke für jede Hilfe und jeden Tipp, denn da fällt mir nichts ein dazu.
DANKE

 

[zer0]

Das sollte ganz einfach sein, auch wenn ich mit jQuery keine Erfahrung habe.

...
    //on submit event
    $("#form").submit(function(){
        if(checkForm()){
            var nick = inputUser.attr("value");
            var message = inputMessage.attr("value");
            //we deactivate submit button while sending
            $("#send").attr({ disabled:true, value:"Sending..." });
            $("#send").blur();
            //send the post to shoutbox.php
            $.ajax({
                type: "POST", url: "shoutbox.php", data: "action=insert&nick=" + nick + "&message=" + message,
                complete: function(data){
                    messageList.html(data.responseText);
                    updateShoutbox();
                    //reactivate the send button
                    $("#send").attr({ disabled:false, value:"sende!" });
                    
                    // HIER!
                    inputMessage.value  = ""; // Userfeld leeren!
                }
             });
        }
        else alert("Bitte ausfüllen!");
        //we prevent the refresh of the page after submitting the form
        return false;
    });
...

Das dürfte es gewesen sein! Ist natürlich nur der Auszug!

gruß

 

[xxxmike]

Habe ich gleich versucht, aber geht nicht.

Ich packe hier das Script mal rein, weil es auch nicht schlecht ist im Prinzip:
Nur das mit den Input Feld gefällt mir gar nicht.

Weil es ist ja nicht besonders vorteilhaft, wenn man was reinschreibt, dann man dann est wieder das input feld leeren muss.

Noch mal DANKE für jede Hife, muss ja irgendwie Möglich sein.

DANKE

 

[zer0]

Hallo,

mit inputMessage.attr({ value:"" }); klappts! Habe es selbst ausprobiert! Sorry für den ersten Fehlversuch

Hier wieder der Auszug:

	//on submit event
	$("#form").submit(function(){
		if(checkForm()){
			var nick = inputUser.attr("value");
			var message = inputMessage.attr("value");
			//we deactivate submit button while sending
			$("#send").attr({ disabled:true, value:"Sending..." });
			$("#send").blur();
			//send the post to shoutbox.php
			$.ajax({
				type: "POST", url: "shoutbox.php", data: "action=insert&nick=" + nick + "&message=" + message,
				complete: function(data){
					messageList.html(data.responseText);
					updateShoutbox();
					//reactivate the send button
					$("#send").attr({ disabled:false, value:"Shout it!" });

					inputMessage.attr({ value:"" }); // Hiermit klappts!
				}
			 });
		}
		else alert("Please fill all fields!");
		//we prevent the refresh of the page after submitting the form
		return false;
	});

Gruß

 

[xxxmike]

Hi,
SUPER und Danke. Das ist Mega Cool. Danke für die wirklich schnelle Hife.

D A N K E

 

[xxxmike]

Hallo noch mal,
ich will ja nicht treist erscheinen, aber kann man da was einbauen das der content alle 5 sek oder so automatisch nachgelden werden. Ist mir gar nicht aufgefallen das dieses nicht dabei ist.

Gruß und DANKE

 

[zer0]

Hey,

mit window.setInterval(); get das!

Beispiel:

    //Load for the first time the shoutbox data
    updateShoutbox();
    var timer = window.setInterval(updateShoutbox, 5000); // 5000ms => 5s

Gruß