Textarea bei Kommentarbox submitten

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

10:53, 9.8.2012

So :) Ich habe eine tag/kommentar">Kommentarbox. username, EMail und ihnalt.

[Edit]: OK, ich habe es nun verstanden, zumindest was sein soll. Wenn ich momentan was in "inhalt" eingebe, dann erscheint das gar nicht erst in der Konsole, das meinte er wohl mit "form submitten"

Ich habe nun etwas rausgesucht:

var commentarea      = document.getElementById('inhalt');
    var commentarea_text = document.forms["inhalt"].submit();

    console.log(commentarea_text);

    if (commentarea_text == '' || commentarea_text.trim == '') {

      commentarea.style.border = "2px solid #FF0000";
      valid = false;
    }

document.forms["inhalt"].submit(); ist das rausgesuchte, da stand im Internet, dass man damit "submitten" kann. Stimmt das aber an dieser Stelle?

Ich habe einen roten Rand um username und EMail, falls diese Felder leer sind oder nur aus leerzeichen bestehen, soweit sogut.

Nun brauch ich das Selbe für den inhalt (Beitrag).

Das ist ja nun etwas anderes, da es ja eine textarea ist. Ich gebe euch mal meine Codes:

Kommentarbox an sich:

_

<?php
  if (count($_POST) > 0) {

    echo '<pre>';
    var_dump($_POST);
    echo '</pre>';
  }
?>
<form action="" Method="post">
  <label for="username">Benutzername:</label>
  <br />
  <input type="text" id="username" name="username" size="40" value="" />
  <br />
  <br />
  <label for="EMail">Bitte gib deine Email ein</label>
  <br />
  <input type="text" id="EMail" name="EMail" size="40" value="" />
  <br />
  <br />
  <br />
  <span>Kommentar:</span>
  <br />
  <textarea id="inhalt" name="inhalt" cols="40" rows="12" wrap="physical"></textarea>
  <br />
  <input type="reset" value="Zur&uuml;cksetzen" />
  <input type="submit" value="Absenden [normal]" />
  <input type="button" value="Absenden [js]" onclick="validate();" />
</form>

_

und nun das, um was es geht: die javascript-datei für die roten Ränder etc.:

_

function validate() {

    var valid = true;

    //name ist befüllt ?
    //name ist leer ===> valid = false;
    var username_input = document.getElementById('username');
    var username_value = username_input.value;

    console.log(username_value);

    if (username_value == '' || username_value.trim == '') {

      username_input.style.border = "2px solid #FF0000";
      valid = false;
    }


    //email ist befüllt ?


    var EMail_input = document.getElementById('EMail');
    var EMail_value = EMail_input.value;

    console.log(EMail_value);

    if (EMail_value == '' || EMail_value.trim == '') {

      EMail_input.style.border = "2px solid #FF0000";
      valid = false;
    }


    var commentarea      = document.getElementById('inhalt');
    var commentarea_text = ''; //wie komme ich an den text :)

    console.log(commentarea_text);

    if (commentarea_text == '' || commentarea_text.trim == '') {

      commentareat.style.border = "2px solid #FF0000";
      valid = false;
    }

    //kommentar ist befüllt ?

    // alles in ordnung ?
    if (valid == true) {

      //form submit

      return true;
    } else {

      //form nicht submitten

      return false;
    }
  }

Also: Es geht ab var cinnebtarea = document.getElementById('inhalt'); los. Der "inhalt" soll rot umrandet werden, wenn nichts drinne steht. Nun wurde mir eben gesagt, da das eine Textare ist, geht es anders als davor. Kann mir da jemand helfen :(?

LG Dex.

Beitrag zuletzt geändert: 9.8.2012 11:15:02 von sexyteamlp

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

Moderator

hackyourlife hat kostenlosen Webspace.
11:10, 9.8.2012
Also mal als erstes: wenn du den Titel falsch gewählt hast kannst du ihn jederzeit selbst ändern.

sexyteamlp schrieb:
Nun ja, dann pack ich hier das Nächste rein: Mir wurde gesagt, dass die Form submittet werden soll O.O? dafuq :D
Mit einem Submit-Button? Weil das hast du schon
Wann glaubst du denn sonst, dass deine roten Kästchen und Warnungen kommen? Kann es sein, dass du dabei auf einen "Submit"-Button klickst?

Ansonsten:
```
if (username_value == '' || username_value.trim == '') {
```
```
if (EMail_value == '' || EMail_value.trim == '') {
```
```
if (commentarea_text == '' || commentarea_text.trim == '') {
```
Das kannst du jeweils verkürzen:
```
if(commentarea_text.trim() == '') {
```
Grund: trim entfernt Leerzeichen, aber wenn es sowieso leer ist ändert trim daran nichts.
ploco

ploco hat kostenlosen Webspace.
11:14, 9.8.2012
Der rote Rand funktioniert aufgrund eines ts an deiner Variablen commentarea nicht korrekt.
```
commentarea.style.border = "2px solid #FF0000";
```
Beitrag zuletzt geändert: 9.8.2012 11:14:52 von ploco
Autor dieses Themas
sexyteamlp

sexyteamlp hat kostenlosen Webspace.
11:18, 9.8.2012
ploco schrieb:
Der rote Rand funktioniert aufgrund eines ts an deiner Variablen commentarea nicht korrekt.
```
commentarea.style.border = "2px solid #FF0000";
```
Ja, danke :D das hatte ich dann auch gemerkt :) Oben steht übrigens "Edit" inzwischen :) War doch was anderes :)
hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.
11:26, 9.8.2012
sexyteamlp schrieb:
[Edit]: OK, ich habe es nun verstanden, zumindest was sein soll. Wenn ich momentan was in "inhalt" eingebe, dann erscheint das gar nicht erst in der Konsole, das meinte er wohl mit "form submitten"

Ich habe nun etwas rausgesucht:
```
var commentarea      = document.getElementById('inhalt');
    var commentarea_text = document.forms["inhalt"].submit();

    console.log(commentarea_text);

    if (commentarea_text == '' || commentarea_text.trim == '') {

      commentarea.style.border = "2px solid #FF0000";
      valid = false;
    }
```
document.forms["inhalt"].submit(); ist das rausgesuchte, da stand im Internet, dass man damit "submitten" kann. Stimmt das aber an dieser Stelle?
Diese Verwendung ist leider falsch...

submit() schickt das Formular an den Server, so wie wenn du auf den "Submit"-Button klickst.

Eventuell hilft dir diese Seite: http://de.selfhtml.org/javascript/objekte/index.htm

Und editier bitte nicht ständig den Eröffnungspost, da sich sonst niemand mehr auskennt!

Beitrag zuletzt geändert: 9.8.2012 11:28:10 von hackyourlife
Autor dieses Themas
sexyteamlp

sexyteamlp hat kostenlosen Webspace.
11:44, 9.8.2012
hackyourlife schrieb:
sexyteamlp schrieb:
[Edit]: OK, ich habe es nun verstanden, zumindest was sein soll. Wenn ich momentan was in "inhalt" eingebe, dann erscheint das gar nicht erst in der Konsole, das meinte er wohl mit "form submitten"

Ich habe nun etwas rausgesucht:
```
var commentarea      = document.getElementById('inhalt');
    var commentarea_text = document.forms["inhalt"].submit();

    console.log(commentarea_text);

    if (commentarea_text == '' || commentarea_text.trim == '') {

      commentarea.style.border = "2px solid #FF0000";
      valid = false;
    }
```
document.forms["inhalt"].submit(); ist das rausgesuchte, da stand im Internet, dass man damit "submitten" kann. Stimmt das aber an dieser Stelle?
Diese Verwendung ist leider falsch...

submit() schickt das Formular an den Server, so wie wenn du auf den "Submit"-Button klickst.

Eventuell hilft dir diese Seite: http://de.selfhtml.org/javascript/objekte/index.htm

Und editier bitte nicht ständig den Eröffnungspost, da sich sonst niemand mehr auskennt!
Konnte dir nun ewig nicht antworten, da man ja nicht "doppelposten" darf >.> Nun ja, also: es stimmt, es gibt einen submit-button.

Klicke ich darauf passiert folgendes:

http://www.bilder-hochladen.net/files/big/idgm-40-1385.jpg

Du siehst auch zusätzlich 2 Absensebuttons, einen über javascript und einen als submit-button. Nun weiß ich zB gar nicht, ob es einen unterschied zwischen beiden gibt.

Zumindest zeigt der Submit-Button gar nicht erst an, wenn etwas fehlt/nur leerzeichen vorhanden sind.
Zudem weiß ich gar nicht, wo das ganze hingeht.

(ich schreib diesen Beitrag länger, da ich nicht wieder warten will, bis ich mal schreiben kann)
```
var commentarea      = document.getElementById('inhalt');
    var commentarea_text = document.forms["inhalt"].submit();

    console.log(commentarea_text);

    if(commentarea_text.trim() == '') {

      commentarea.style.border = "2px solid #FF0000";
      valid = false;
    }
```
Es geht ja um diesen Teil, im Besonderen um das hier
```
var commentarea_text = document.forms["inhalt"].submit();
```
Da stand davor nur
```
var commentarea_text =
```
und ich sollte eben raussuchen, was ich brauche, um die "Form zu submitten", was ich selber nicht mal verstehe :D so ganz :D

Die zweite Sache wäre die, dass ich das ganze ja noch in Gaestebucheintrag.txt bringen muss :( Mensch, das ist so viel xD

Und zu deinem Edit-Punkt:

1. Ich hatte auf bearbeiten geklickt, aber da stand nichts von dem Titel des Posts :/ Bin erst seit gestern hier dabei.
2. Ja, ich weiß, immer edit ist blöd. Allerdings war meine Aufgabe, einen roten Rand zu machen. Also habe ich gefragt. Als ich es ausprobiere ohne was zu ändern war der Rand da (deswegen edit)
3. Im 1. Edit-Text hatte ich noch nachgefragt, was form submit überhaupt heißen soll, als ich dann einen Beitrag abschicken wollte und in der Konsole nichts davon stand, war mir klar, dass der Beitrag weitergeleitet werden soll, also irgendwo ankommen. Dafür ist das Form Submit :)
hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.
11:52, 9.8.2012
sexyteamlp schrieb:
```
var commentarea      = document.getElementById('inhalt');
    var commentarea_text = document.forms["inhalt"].submit();

    console.log(commentarea_text);

    if(commentarea_text.trim() == '') {

      commentarea.style.border = "2px solid #FF0000";
      valid = false;
    }
```
Es geht ja um diesen Teil, im Besonderen um das hier
```
var commentarea_text = document.forms["inhalt"].submit();
```
Da stand davor nur
```
var commentarea_text =
```
und ich sollte eben raussuchen, was ich brauche, um die "Form zu submitten", was ich selber nicht mal verstehe :D so ganz :D
Das sollte so aussehen:
```
var commentarea      = document.getElementById('inhalt');
    var commentarea_text = commentarea.value;

    console.log(commentarea_text);

    if(commentarea_text.trim() == '') {

      commentarea.style.border = "2px solid #FF0000";
      valid = false;
    }
```
sexyteamlp schrieb:
Zumindest zeigt der Submit-Button gar nicht erst an, wenn etwas fehlt/nur leerzeichen vorhanden sind.
Zudem weiß ich gar nicht, wo das ganze hingeht.
Das geht alles an deine PHP-Seite und das ist das, was dir oben auf der Seite ausgegeben wird. Warum er beim "Absenden [normal]" kein validate macht? Weil du ihm das im
```
<form>
```
-Tag sagen musst:
```
<form action="" Method="post" onsubmit="return validate();">
```
Achja, du kannst ihm auch sagen wohin das geschickt werden soll. Dafür gibt es das
```
action
```
-Attribut beim
```
<form>
```
-Tag. Also z.b. so:
```
<form action="ziel.php" Method="post" onsubmit="return validate();">
```
Damit wird alles an "ziel.php" geschickt.

Beitrag zuletzt geändert: 9.8.2012 11:55:10 von hackyourlife
Autor dieses Themas
sexyteamlp

sexyteamlp hat kostenlosen Webspace.
11:58, 9.8.2012
hackyourlife schrieb:
sexyteamlp schrieb:
```
var commentarea      = document.getElementById('inhalt');
    var commentarea_text = document.forms["inhalt"].submit();

    console.log(commentarea_text);

    if(commentarea_text.trim() == '') {

      commentarea.style.border = "2px solid #FF0000";
      valid = false;
    }
```
Es geht ja um diesen Teil, im Besonderen um das hier
```
var commentarea_text = document.forms["inhalt"].submit();
```
Da stand davor nur
```
var commentarea_text =
```
und ich sollte eben raussuchen, was ich brauche, um die "Form zu submitten", was ich selber nicht mal verstehe :D so ganz :D
Das sollte so aussehen:
```
var commentarea      = document.getElementById('inhalt');
    var commentarea_text = commentarea.value;

    console.log(commentarea_text);

    if(commentarea_text.trim() == '') {

      commentarea.style.border = "2px solid #FF0000";
      valid = false;
    }
```
sexyteamlp schrieb:
Zumindest zeigt der Submit-Button gar nicht erst an, wenn etwas fehlt/nur leerzeichen vorhanden sind.
Zudem weiß ich gar nicht, wo das ganze hingeht.
Das geht alles an deine PHP-Seite und das ist das, was dir oben auf der Seite ausgegeben wird. Warum er beim "Absenden [normal]" kein validate macht? Weil du ihm das im
```
<form>
```
-Tag sagen musst:
```
<form action="" Method="post" onsubmit="return validate();">
```
Also, mir ist das so langsam peinlich, dass ich hier alles erfragen muss. Mit der Seite komm ich zB nicht so ganz klar, ich bin wie gesagt erst seit 3 Tagen in dem Programmierzeug drin. Ich kann jetzt aus deinem Kommentar gar nicht erkennen, was bei

[code]var commentarea_text = '';[/code]

eingetragen werden sollte. Dein [code=xhtml]<form action="" Method="post" onsubmit="return validate();">[/code]
habe ich bei der php-datei eingefügt. Danach wurde mir der "inhalt" (Beitrag) immer als rotes Kästchen angezeigt (als würde der Beitrag fehlen).

Ich brauche wie gesagt nur den Befehl, dass das geschriebene in der Konsole stehen soll, den Rest würde mein Ausbilder mit mir später machen, also anstatt in die Konsole zu schreiben in die txt-Datei.

Nun muss es aber erstmals in das Kommando kommen ^^

[EDIT]: Ich musste nur commentarea.value; eintragen -.- nun klappt es zumindest. Kann man hier auch persönlich schreiben? So dauert das ja ewig x.x und du hast ja _text.trimg() == ' ') geschrieben, aber das zeigt er als falsche Funktion an, die es nicht gibt :/

LG Dex.

Beitrag zuletzt geändert: 9.8.2012 12:03:10 von sexyteamlp
hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.
12:03, 9.8.2012
sexyteamlp schrieb:
Ich kann jetzt aus deinem Kommentar gar nicht erkennen, was bei
```
var commentarea_text = '';
```
eingetragen werden sollte.
Du sollst hier einfach das eintragen:
```
var commentarea_text = commentarea.value;
```
sexyteamlp schrieb:
Dein
```
<form action="" Method="post" onsubmit="return validate();">
```
habe ich bei der php-datei eingefügt. Danach wurde mir der "inhalt" (Beitrag) immer als rotes Kästchen angezeigt (als würde der Beitrag fehlen).
Das ist ja auch klar, da in der Variablen
```
commentarea_text
```
ja der Text noch nicht übernommen wurde, der sonst auch auf die Console ausgegeben würde... und da die leer ist kommt die Warnung. Wenn du meine Ausbesserung einsetzt (commentarea.value) sollte beides funktionieren...

Autor dieses Themas

sexyteamlp

sexyteamlp hat kostenlosen Webspace.

14:57, 9.8.2012

Für alle, die den fertigen Code brauchen:

function validate() {

    var valid = true;

    var username_input = document.getElementById('username');
    var username_value = username_input.value;

    //name ist befüllt ?
    //name ist leer ===> valid = false;
    if (username_value == '' || username_value.trim == '') {

      username_input.style.border = "2px solid #FF0000";
      valid = false;
    } else {

      username_input.style.border = "1px solid black";
    }

    var EMail_input = document.getElementById('EMail');
    var EMail_value = EMail_input.value;

    //email ist befüllt ?
    if (EMail_value == '' || EMail_value.trim == '') {
        EMail_input.style.border = "2px solid #FF0000";
        valid = false;
    }


    var commentarea      = document.getElementById('inhalt');
    var commentarea_text = commentarea.value;

    //kommentar ist befüllt ?
    if (commentarea_text == '' || commentarea_text.trim == '') {

      commentarea.style.border = "2px solid #FF0000";
      valid = false;
    }


    // alles in ordnung ?
    if (valid == true) {

      document.forms["myform"].submit();
      return true;
    } else {

      return false;
    }
  }

Damit wird die Textarea zumindest ausgegeben. Wer es in einer Textdatei haben will muss noch ein bisschen mehr machen und kann mal hier

http://www.lima-city.de/thread/ausgabe-der-kommentarbox-in-txt-datei-packen

vorbeischauen.

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

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city