kostenloser Webspace werbefrei: lima-city


this.form.submit() und onsubmit="" Problem

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    technofan

    Moderator Kostenloser Webspace von technofan

    technofan hat kostenlosen Webspace.

    Hallo Leute,

    ich habe ein Problem mit meiner Shoutbox, die ich gerade dabei bin zu scripten.

    undzwar sieht mein HTML-teil so aus:

    <form id="ShoutboxForm" name="ShoutboxForm" method="post" action="" onsubmit="saveShoutbox(); return false;">
    			<input type="checkbox" name="sendtoTS" id="sendtoTS" /><label for="checkbox">Nachrichten auch an Teamspeak senden</label><br />
    			<textarea class="comment_textarea" name="shouttext" id="shouttext" rows="1" onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }"></textarea>
    		</form>


    Dieses Formular soll OHNE Button abgeschickt werden, dafür sorgt onkeydown="if (event.keyCode == 13) ....
    und dann soll folgendes Script ausgeführt werden:

    // Shoutbox speichern
    function saveShoutbox() {
    	if (xmlHttp) {
        	// Post absetzen
        	xmlHttp.open('POST', './run/send_shoutbox.php') ;
        	xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') ;
    		// Textfeld leeren und Focus setzen
    		xmlHttp.onreadystatechange = function () {
        	    if (xmlHttp.readyState == 4) {
            		document.ShoutboxForm.shouttext.value = '' ;
    				document.ShoutboxForm.shouttext.focus() ;
    				// Box direkt neu laden			
    				get_shoutbox() ;
    			}
        	}
        	// Parameter schicken
        	xmlHttp.send('sbname='+document.ShoutboxForm.shoutname.value+'&sbtext='+document.ShoutboxForm.shouttext.value+'&nocache='+timestamp) ;
    	}
    }


    Dieses Script soll im HTML-teil mit onsubmit="saveShoutbox(); return false;" ausgeführt werden, was aber nicht passiert.
    Es gibt einen Seitenrefresch und das onsubmit wird ignoriert.
    Des Seitenrefresch soll es aber nicht geben, sondern das Formular soll einfach mit dem JS abgeschickt werden... weiß da jemand Rat?

    Grüße
    technofan
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. naja, wen Du bei onKeydown einen submit absetzt,
    dann wird halt das Formular auch gesendet (Browser-Refresh)

    deshalb als Event nicht das Formular absenden, sondern die AJAX Funktion aufrufen

    ... onkeydown="if (event.keyCode == 13) { saveShoutbox(); return false; } ...

    nur so als Idee ...

    hier mal ein TEST / Beispiel
    <html>
    <head>
    <title>TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script type="text/javascript">
    function saveShoutbox(elem) {
    
    /* ---- Variablen ein-sammeln ---- */ 	
    	var timestamp = new Date().getTime(); 
    	var textarea_id = elem.id; 
    	var textarea_msg = elem.value;
    	
    /* ---- Hier anstatt alert() Dein AJAX POST Request ---- */
    	alert("\n ID: " + textarea_id + "\n Text: "+ textarea_msg + "\n Timestamp: "+ timestamp + "\n");
    
    /* ---- Das Element (textarea) leeren ---- */ 
    	elem.value = '';  
    	
    }
    </script>
    
    </head>
    
    <body>
    
    <br>
    
    <textarea id="testfeld" name="test" cols="40" rows="5" onkeydown="if (event.keyCode == 13) { saveShoutbox(this);  return false; }"></textarea>
    
    <br>
    
    </body>
    </html>


    Du brauchst also nichtmal ein <form> Element, es genügt auch nur <textarea> mit einer ID
    aber Du kannst auch gerne das Element über <form> ansprechen .... eigentlich egal.

    Wenn Du timestamp als Variable in JS willst, muss die auch erst erstellt werden

    und anstatt dem alert() einfach Deinen AJAX POST Request mit den Variablen
    und dann fehlt noch eine Ausgabe, ob der POST geklappt hat, bzw. das Ergebnis.

    ich hoffe das hilft weiter :)


    Beitrag zuletzt geändert: 13.10.2013 13:48:34 von prosuche
  4. Autor dieses Themas

    technofan

    Moderator Kostenloser Webspace von technofan

    technofan hat kostenlosen Webspace.

    Das habe ich mir auch gedacht... aber da sollen Daten abgeschickt werden, und wenn ich das so mache, wie du es sagst, dann rufe ich zwar die Funktion auf, aber es werden keine Daten gesendet...
    Also funktioniert das so auch nicht...
  5. Hey

    Das Problem liegt darin, dass du im HTML zwei verschiedene Handler angibt (einer im <form>tag für den und einmal keydown im Textfeld). Weshalb es nicht funktioniert, kann ich leider nicht ganz nachvollziehen, da mit this.form.submit() eigentlich schon onsubmit beachtet werden sollen.
    Ich habe es so angepasst, dass beim Keydown in der Textarea schon die saveShoutbox() funktion aufgerufen wird:

    <form id="ShoutboxForm" name="ShoutboxForm" method="post" action="">
    			<input type="checkbox" name="sendtoTS" id="sendtoTS" /><label for="checkbox">Nachrichten auch an Teamspeak senden</label><br />
    			<textarea class="comment_textarea" name="shouttext" id="shouttext" rows="1" onkeydown="if (event.keyCode == 13) { saveShoutbox(); return false; }"></textarea>
    		</form>


    Habe es mit einem Alert in der Funktion getestet und läuft wunderbar, siehe hier: http://jsbin.com/OnUbamu/2/

    Gruss All-Web
  6. ja, wenn der POST Request "richtig" abgesetzt wird, dann klappt es auch :)

    hier mal ein funktionierendes Beispiel;


    Datei: /test.htm
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <script type="text/javascript">
    
    function getXmlHttpRequestObject() {
    	if (window.XMLHttpRequest) {
    		return new XMLHttpRequest();
    	} 
    	else if(window.ActiveXObject) {
    		return new ActiveXObject("Microsoft.XMLHTTP");
    	} 
    	else {
    		alert("... ActiveXObject Error ... ");
    	}
    }
    
    
    
    function saveShoutbox(elem) {
    	
    	/* ---- Variablen ein-sammeln ---- */ 	
    	var timestamp = new Date().getTime(); 
    	var textarea_id = elem.id; 
    	var textarea_msg = elem.value;
    	
    	/* ---- Hier der AJAX POST Request ---- */
    	
    	
    	var post_ziel = "/run/send_shoutbox.php";
    	
    	var timestamp = new Date().getTime();
    	var textarea_msg = elem.value;
    	var username = document.getElementById("username").value;
    	var ts_send = document.getElementById("sendtoTS").checked;
    	
    	ts_send_nfo = (ts_send === true)?'ja':'nein';
    	var parameter = "sbname="+username+"&amp;sbtext="+textarea_msg+"&amp;nocache="+timestamp+"&amp;sbtots="+ts_send_nfo+""; 
    	
    	/* --- 
    	alert("\n Ziel: " + post_ziel + "\n Daten: "+ parameter + "\n Time: "+ timestamp + "\n"); 
    	--- */
    	
    	var ajax_http = getXmlHttpRequestObject();
    	
    	ajax_http.open("POST", post_ziel, true);
    	
    	ajax_http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    	ajax_http.setRequestHeader("Content-length", parameter.length);
    	ajax_http.setRequestHeader("Connection", "close");
    	
    	ajax_http.onreadystatechange = function() { 
    		if(ajax_http.status == 200) {
    			document.getElementById("result").innerHTML = ajax_http.responseText; 
    		}
    		else { 
    			alert("Error ... Status: " + ajax_http.status); 
    		}
    	}
    	
    	/* ---- Das Element (textarea) leeren ---- */ 
    	elem.value = '';  
    	
    	parameter = parameter.replace(/&amp;/gi,'&'); 
    	ajax_http.send(parameter);
    
    }
    </script>
    
    </head>
    
    <body>
    
    <br />
    <br /> User: <input type="text" id="username" name="user" size="30" maxlength="100" value="Hans_Dampf" />
    <br />
    <br /> Auch an TS senden? <input type="checkbox" id="sendtoTS" name="sendtoTS" value="ja" />
    <br />
    <br /> Nachricht: 
    <br />
    <textarea id="testfeld" name="test" cols="40" rows="5" onkeydown="if (event.keyCode == 13) { saveShoutbox(this);  return false; }"></textarea>
    <br />
    <br />
    
    <div id="result" style="margin:4px; padding:6px; background:#DEDEDE;"></div>
    
    <br />
    <br />
    
    </body>
    </html>



    Datei: /run/send_shoutbox.php
    <?php 
    // ------------------------------------ 
    
    print "<pre>\n"; 
    print_r($_REQUEST); 
    print "</pre>\n"; 
    
    // ------------------------------------ 
    ?>



    anstatt das Ergebnis in <div id="result" ..> auszugeben,
    kannst Du ja auch ne andere Ausgabe (Erfolgs-Meldung) machen

    :)

    Beitrag zuletzt geändert: 13.10.2013 15:28:12 von prosuche
  7. Autor dieses Themas

    technofan

    Moderator Kostenloser Webspace von technofan

    technofan hat kostenlosen Webspace.

    Hmm, na ja... ich habs jetzt mit nem iFrame gemacht, der gleichzeitig auch einen Fortschritt anzeigt, wenn man die nachrichten ans TS sendet und hole die nachrichten dann mit AJAX ab... dadurch habe ich kein Flackern beim Aktualisieren der Nachrichten und die User wundern sich net, warums denn so lange dauert ^^
    Danke trotz dem für eure Hilfe =)
  8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!