Einen div-Container ausblenden, wenn ein bestimmter Wert ausgewählt wurde.

[erik.design]

Hi,
ich neu hier, weis nicht, ob es dieses Thema schon einmal gibt, habe aber über die Suche nichts gefunden.

Also, folgendes Problem: Ich arbeite gerade an einem Kontaktformular und ich habe 3 Anredemöglichkeiten. Das wären Herr,Frau und Familie. Darunter folgen 2 Felder mit Vorname und Nachname. Jetzt möchte ich, dass der Vorname ausgeblendet wird, wenn in Anrede Familie gewählt ist.
Hier ist der Codeausschnitt, es fehlt der Nachname, dieser ist aber schon darunter einprogrammiert.

            <form id="form-1" >
                    <label>Anrede</label>
                    <div class="select-2">
                    <select name="anrede" >
                        <option>Herr</option>
                        <option>Frau</option>
                        <option>Familie</option>
                    </select>
                    </div>
                    <div>
                    <br>
                    <br>
                    <label><strong>Name</strong><input type="text" value="Bitte geben Sie ihren Vornamen an." onBlur="if(this.value=='') this.value='Bitte geben Sie ihren Vornamen an.'" onFocus="if(this.value =='Bitte geben Sie ihren Vornamen an.' ) this.value=''"/></label>
                    </div>

Der Abschnitt, welcher ausgeblendet werden soll ist:

                  </div>
                    <div>
                    <br>
                    <br>
                    <label><strong>Name</strong><input type="text" value="Bitte geben Sie ihren Vornamen an." onBlur="if(this.value=='') this.value='Bitte geben Sie ihren Vornamen an.'" onFocus="if(this.value =='Bitte geben Sie ihren Vornamen an.' ) this.value=''"/></label>
                    </div>

Kann mir da jemand weiterhelfen?

MfG erik.design

 

[Tronjer]

Helfen schon. Aber einen Ansatz musst du dafür liefern und zwar in JavaScript. Überlege dir, wie du die beiden korrespondierenden Elemente adressierst und baue dir einen Eventlistener, der beim Klick auf das erste Element dem zweiten ein display:none gibt.

 

[erik.design]

Ok. Danke. Ich versuche das mal umzusetzen . Da ich bis jetzt relativ wenig mit javascript programmiert habe, werde ich mich da mal erkundigen.