• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Formular / Tabelle weitere Zeile einblenden sobald radio button gedrückt wird

Q

qiwi2000

New member
Guten Tag zusammen,

ich bin schon eine Zeit unterwegs auf der Suche nach einer Lösung - leider bisher ohne Erfolg.

Ich habe ein HTML-Formular.
Im oberen Bereich gibt es eine Auswahl mit drei Radio Buttons.
Nun möchte ich, sobald Button zwei geklickt wird, dass eine weitere
Zeile mit einem Formularfeld erscheint - welches vorher nicht zu sehen war.
Also nicht erst nach einem Reload der Seite - sondern sobald ich geklickt habe.

Mein Ansatz:
Code: 
<script>
if(document.getElementById('ungekuendigt').checked) {
  document.write("JAJA");
}else if(document.getElementById('gekuendigt').checked) {
  document.write("<tr><td>Hallo</td><td>Hallo</td></tr>");
}else if(document.getElementById('ausgelaufen').checked) {

}
</script>

funktioniert nur bei einem Reload.


Wer kann mir hier helfen?

Vielen Dank!!!
 
Zuletzt bearbeitet:
qiwi2000 schrieb:
Nun möchte ich, sobald Button zwei geklickt wird,
Zum Vergrößern anklicken....
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener mit 'click'

qiwi2000 schrieb:
dass eine weitere
Zeile mit einem Formularfeld erscheint - welches vorher nicht zu sehen war.
Zum Vergrößern anklicken....
ein bereits existierendes element (ausgeblendet mit display none) sichtbar machen: element.style.display = 'initial';

ps: weg mit document.write(), das ist hier kompletter müll und für 99% aller verwendungszwecke ungeeignet
 
Hallo und Danke für die Antworten.
Mit Display none bekomme ich aber auch nichts gebacken.
Ich habe folgendes versucht:
Code: 
<script>
document.getElementById("tabelle1").style.display = "none";
</script>

<div id="tabelle1">
<tr><td>Kündigungsdatum</td><td></td></tr>
</div>

Aber diese Zeile wird trotzdem angezeigt.
Ich dachte, so kann ich den kompletten Container ausblenden.
Den Script hinter das DIV zu schreiben hat übrigens auch nichts gebracht.
 
Ok - nun habe ich #tabelle1 schon in der CSS -Datei auf display: initial gesetzt.
Ist übrigens die einzige ID mit diesem Namen.

Ich habe es nun mit einer Funktion versucht.
Bekomme aber nun in der von Dir ( Danke übrigens) vorgeschlagenen Konsole
folgenden Fehler: Uncaught Type Error: gekuendigt is not a function.

Guut - hier sehe ich aber, dass der zweite Button wenigstens auf den Klick reagiert.
Aber warum ist meine Funktion keine Funktion?

Code: 
<script>
function gekuendigt() {
document.getElementById("tabelle1").style.display = "none";
}
</script>

<tr><td>Status</td><td>
| Ungekündigt<input type="radio" id="ungekuendigt"  name="status" value="1" <?PHP if ($status == 1){ echo "checked";}?>> |  
 Gekündigt<input type="radio" id="gekuendigt" onclick="gekuendigt()" name="status" value="2" <?PHP if ($status == 2){	echo "checked";}?>> | 
 Ausgelaufen<input type="radio" id="ausgelaufen" name="status" value="3" <?PHP if ($status == 3){	echo "checked";}?>> |
</td></tr>

<div id="tabelle1">
<tr><td>Kündigungsdatum</td><td></td></tr>
</div>
 
qiwi2000 schrieb:
Bekomme aber nun in der von Dir ( Danke übrigens) vorgeschlagenen Konsole
folgenden Fehler: Uncaught Type Error: gekuendigt is not a function.
Zum Vergrößern anklicken....
Weil du "gekuendigt" als ID bereits vergeben hast.

Bei Beispielcode aber bitte immer das zeigen, was auch letztendlich im Browser ankommt und kein PHP-Geraffel, das verwirrt unter Umständen nur.
 
Hallo und vielen Dank für Deinen Tipp.
Dieser hat den Fehler in der Konsole beseitigt.
Habe nun einen anderen Namen genommen.
Aber leider tut sich immer noch nichts.
Der Container wird immer noch angezeigt obwohl er auf display: none steht.

Ich habe sogar eine komplett neue CSS-Datei erstellt - in der nur dieser Bereich drinsteht.
Also an der CSS-Datei liegt es mal nicht.
Kann es sein, dass ich JQUERY eingebunden habe? Brauche ich da andere Befehle?

Fazit:
Ich habe auf keiner meiner Seiten mehr einen Fehler (Mit der Hilfe der Konsole gelöst).
Jedoch funktioniert auch mein Verstecken (Ausblenden / Einblenden) der Tabellenzeile nicht.
Ist onclick überhaupt richtig für das, was ich vorhabe?

Danke
################### EDIT
Sooooo
Nun habe ich speziell mal dies komplett neu erstellt.
Ich bekomme das hin, wenn das DIV außerhalb der Tabelle steht.

Code: 
  <script>
function gekuen() {
document.getElementById("hutzel").style.display = "initial";
}
function ungekuen() {
document.getElementById("hutzel").style.display = "none";
}

</script>
<table>
<tr><td>Status</td><td>
| Ungekündigt<input type="radio" id="ungekuendigt"  onclick="ungekuen()"name="status" value="1" > |  
 Gekündigt<input type="radio" id="gekuendigt" onclick="gekuen()" name="status" value="2" > | 
 Ausgelaufen<input type="radio" id="ausgelaufen" name="status" value="3" > |
</td></tr>
<tr><td>Sonstwas</td><td></td></tr>
</table>
<div id="hutzel">
<tr><td>Kündigungsdatum</td><td></td></tr>
</div>

Dann steht es jedoch unter der Tabelle an falscher Stelle.
Wenn ich das DIV vor dem abschließenden Tabellen Tag setze - ist wieder alles sichtbar und nichts reagiert auf Buttons.

Jemand ne Ahnung warum?
Die Konsole zeigt keinen Fehler.
In der neuen CSS steht nur das display:none sonst nix.

################ EDIT
Ich kann folgendes machen was funktioniert.
Ich schließe die Tabelle, füge das DIV ein und öffne die Tabelle wieder für die restlichen Zeilen.
Aber ist das richtig?
 
Zuletzt bearbeitet:
Das wird wohl daran liegen das dein HTML nicht valide ist, siehe selfhtml...table
Innerhalb eines table Elements darf kein div Element kommen.

Hier ein Beispiel:
HTML: 
<!doctype html>
<html>
<head>
    <title>Table hide row</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table, caption, tbody, tfoot, thead, tr, th, td {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid black;
        }

        td {
            padding: 0.25rem;
            text-align: left;
            border: 1px solid black;
        }
    </style>
    <script>
        function gekuen() {
            document.getElementById("hutzel").style.display = "";
        }

        function ungekuen() {
            document.getElementById("hutzel").style.display = "none";
        }
    </script>
</head>

<body>
    <table>
        <tr>
            <td>Status</td>
            <td>
                | Ungekündigt<input type="radio" id="ungekuendigt"  onclick="ungekuen()"name="status" value="1" />
                | Gekündigt<input type="radio" id="gekuendigt" onclick="gekuen()" name="status" value="2" checked="checked" />
                | Ausgelaufen<input type="radio" id="ausgelaufen" name="status" value="3" />
                |
            </td>
        </tr>
        <tr>
            <td>Sonstwas</td>
            <td></td>
        </tr>
        <tr id="hutzel">
            <td>Kündigungsdatum</td>
            <td></td>
        </tr>
</table>
</body>
</html>
 
Super und vielen Dank!
Das scheint die Lösung zu sein.
Nun funktioniert das beim Klicken.
Ich denke - nun ist aber das onclick nicht richtig.
Wenn ich die Seite aufrufe - dann ist die Zeile erst sichtbar. Erst wenn ich auf den Button klicke,
wird das Script aktiv.
Kann ich da irgendwie onload mit reinbringen?

Danke
 
Verpasse der Zeile einfach via CSS ein display:none - dann ist sie per default ausgeblendet.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben