HTML Form/onsubmit

E

erik SN

0
Hallo zusammen,

ich will zu demonstrationszwecken eine relativ simple HTML Seite basteln was soweit auch kein Problem darstellt, jedoch bin ich auf ein Problem gestoßen an dem ich nicht weiter komme.
Ich würde gern mit "onsubmit" eine textarea innerhalb der Form befüllen leider komm ich hier irgendwie nicht vorran obwohl es mit "onclick" und dem selben Argument funktioniert.
Hier nochmal eine etwas gekürzte Fassung des Codes:

HTML: 
<html>
    <body>
        <form action="" onsubmit="this.form.chattext.value=this.form.sendtext.value">
            <textarea name="chattext"></textarea>
            <input type="text" name="sendtext">
            <input type="button" name="tun"  value="Absenden"  onclick="this.form.chattext.value=this.form.sendtext.value">
        </form>
    </body>
</html>
vielen Dank schonmal für die Mühe ;)
 
Nicht unbedingt ;)
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.submit

Und hier mal ein etwas angepasstes Beispiel von w3schools, weil ich zu faul war selbst was zu schreiben.
HTML: 
<!DOCTYPE html>
<html>
<body>

<form id='hehe' action="demo_form.asp">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" id="test" name="LastName" value="Mouse"><br>
</form>
<script>
document.getElementById('test').addEventListener('change',function(event){
document.getElementById('hehe').submit();
});
</script>
<p>Click the "Submit" button and the form-data will be sent to a page on the server called "demo_form.asp".</p>

</body>
</html>


Edit:
abgesehen davon kannst du kein this benutzen, du bist nicht im Kontext eines Objektes und window hat so erstmal nichts mit der Form zu tun.
 
Na der Punkt is das ich etwas eintragen und mit Return bestätigen will, wordurch ja automatisch ein Submit ausgeführt wird.
Ich dachte es gibt hier vielleicht eine möglichkeit dies ohne Script umzusetzten.

wenn ich den Code wie folgt ändere Blinkt der Text auch kurz in der Textarea auf verschwindet dann aber wieder, weshalb ich denke das eine Lösung in dieser Art funktionieren kann.

HTML: 
<html>
    <body>
        <form action="" onsubmit="chattext.value=sendtext.value">
            <textarea name="chattext"></textarea>
            <input type="text" name="sendtext">
            <input type="button" name="tun"  value="Absenden"  onclick="form.chattext.value=form.sendtext.value">
        </form>
    </body>
</html>
 
Zuletzt bearbeitet:
So gehts:

HTML: 
<html>
    <body>
        <form method="post" action="" onsubmit="chattext.value=sendtext.value; return false">
            <textarea name="chattext"></textarea>
            <input type="text" name="sendtext">
            <input type="button" name="tun"  value="Absenden"  onclick="chattext.value=sendtext.value">
        </form>
    </body>
</html>

Man muss noch mit einem "return false" das neu laden der Seite Verhindern
 
Für das Protokoll:
das "return false" geht zwar, man sollte aber mittlerweile preventDefault() verwenden.
Und für dich.
Klar kannst du allen möglichen kompakten JS-Kram inline in das HTML schreiben, aber es wird dann sehr schnell, sehr unübersichtlich und man hat nicht so die Freiheiten/Möglichkeiten wie man sie hat wenn man es "ordentlich" macht(siehe preventDefault()) und normalerweise kannst du überall JS-Dateien referenzieren.

Gruß
Fluffy
 
Es wundert mich jetzt aber schwer, dass ein Button, der nicht vom Typ "submit" ist, ein Formular absendet. Seit Version 5 wird mit HTML immer suspekter..
 
Naja, es ist nicht erst seit HTML5 so.
Siehe hier .
Aber das Feature ist nicht besonders bekannt.


Wenn du so willst ist <button> ein erweiterter Use-Case von <input type="submit"> und dank der Attribute von <button> ist es auch vielseitiger einsetzbar.(Siehe form-owner oder diverse Möglichkeiten, Attribute eines Formulares zu überschreiben, was JS in diesen Bereichen überflüssiger und die Form leichter erweiterbar/wartbarer macht und das Formular dann endlich, endlich, endlich etwas selbsterklärender wird ohne das man JS-Code (im schlimmsten Fall von fragwürdiger Qualität) lesen muss.)
 
Zuletzt bearbeitet von einem Moderator:
Wir reden hier aber doch von <input type="button" ...>-Elementen und nicht von <button ...>-Elementen? Und <input type="button" ...> sollte kein onsubmit-Event eines Formulars ausführen, wenn dies nicht im onclick/...-Event aktiv erzeugt wird.
 
Wiso nicht?
Dem Formular kann es doch egal sein, was das Element, welches es abschickt für sich definiert hat.
Denn du schickst das Formular ja ab, und somit erzeugt das Abschicken des Formulares, egal wie, das onsubmit-Event, und nicht i.w. JS was in einem anderen Event-Listener ausgeführt wird.
Siehe hier, Punkt 18.2.3.
Gruß

Fluffy

P.s.:
Das macht Drupal mit den Form-Arrays auch so, die erzeugen <input type="button"> und arbeiten dann damit auf dem Formular.
 
Zuletzt bearbeitet von einem Moderator:
Ok, vielleicht sollte ich mich konkreter ausdrücken:

Code: 
<html>
<head>
</head>
<body>
<form action="#" method="get" onsubmit="alert('Pingpong!')">
<input type="button" value="Submit mich"/>    
</form>
</body>
</html>

=> onsubmit wird NICHT ausgeführt.

Code: 
<html>
<head>
</head>
<body>
<form action="#" method="get" onsubmit="alert('Pingpong!')">
<input type="submit" value="Submit mich"/>    
</form>
</body>
</html>

=> onsubmit wird ausgeführt ;)

Fazit: Man kann mit einem Button kein submit-Event bei einem Formular auslösen, solange man es nicht über ein zweites Element manuell auslöst (z.B. onclick).
 
Deswegen ja auch (zusammengefasst)
Code: 
<input type="submit"> == <button> != <button type="button"> == <input type="button"> != <input>

;)

Im ersten Post liegt jedoch genau das o.g. beschriebene Problem vor. Mich wundert auch die Lösung etwas, da niemals ein submit-Event geworfen und damit onsubmit niemals ausgeführt werden sollte.

edit:
Und weg ist der Post, auf den ich mich bezogen habe.. Nagut, dann halt ohne Bezug :D
 
Ja da hast du recht.
Für <input type="button"> und <button type="button"> gibt es kein vordefiniertes Verhalten und somit kein Submit des Formulares.
Denn da passiert einfach garnichts.
Noch nichteinmal das # in der URL.
Aber für input mit type!="button" und button mit type !="button" gibt es ein vordefiniertes verhalten daher ist Button nicht gleich Button.
Deine Aussage kannst du also so nicht verallgemeinern.
Gruß

Fluffy

Edit:
Hmm habe ich meinen alten Post nicht schnell genug gelöscht, und du hast auf einen Post geantwortet der nicht mehr existiert.
Naja. Hatte ihn falsch gelesen. ist schon spät.

Edit2:
Ja stimmt.
Bin aber davon ausgegangen das es ein Übertragungsfehler ins Board war oder es im Hintergrund JS gibt was das erledigt und es vergessen wurde anzugeben.
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben