this.form.submit() und onsubmit="" Problem
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ausgabe
code
datei
datum
element
ergebnis
form
formular
funktion
gesendet browser
http
nachricht
post
problem
run
senden
teil
test
textfeld
url
-
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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 -
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... -
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 -
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+"&sbtext="+textarea_msg+"&nocache="+timestamp+"&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(/&/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 -
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 =) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
