Weitere Felder einblenden

[Achot]

Hallo,

vielleicht könnt ihr mir weiterhelfen. Ich habe folgendes HTML

<label for="ansprechpartner">Ansprechpartner</label>

<select name="ansprechpartner" id="ansprechpartner" required>
	
        <option value="">Bitte wählen</option>			         
	
	<option value="1">Test Eintrag 1</option>
	<option value="2">Test Eintrag 2</option>
	
	<option value="3">Benutzerdefinierte Eingabe</option>			            	

</select>

Wenn der letzte Punkt gewählt wird, soll unter dem <select> eine weitere DIV Box eingeblendet werden mit Feldern wo ich einen neuen Ansprechpartner eintragen kann mit folgenden Werten:

1. Vor-Nachname
2. Telefon / Handy
3. Agenturname

Wie würdet ihr dieses umsetzten?

[Matthias Apsel]

Hallo Achot,

Wenn du Radiobuttons verwenden würdest, könnte das sehr einfach mit CSS gelöst werden.

Bis demnächst
Matthias

[Achot]

Hallo Matthias,

Wenn du Radiobuttons verwenden würdest, könnte das sehr einfach mit CSS gelöst werden.

die Vorgabe ist leider es mit einem <select> umzusetzen :/ Da kann ich leider auch nichts dagegen machen.

[m.]

Mahlzeit,

Wie würdet ihr dieses umsetzten?

Wenn es Selectboxen sein müssen wird es nur mit Javascript gehen. Wenn im Projekt bereits jQuery eingebunden ist, würde ich das gleich mit nutzen.

[Achot]

Hallo,

Wenn es Selectboxen sein müssen wird es nur mit Javascript gehen. Wenn im Projekt bereits jQuery eingebunden ist, würde ich das gleich mit nutzen.

ja, jQuery ist mit im Einsatz in der aktuellen Version.

[m.]

Mahlzeit,

ja, jQuery ist mit im Einsatz in der aktuellen Version.

Dann einfach beide Selectboxen ins HTML schreiben und dann ein

$('#select2').hide();

$("#select1").change(function(e) {
	if ($('#select1 option:selected').val() == 3) {
		$('#select2').show();
	}
}

Dabei ist #select1 die ID der ersten Selectbox, #select2 die ID der zweiten. Habs jetzt nicht getestet, sollte aber klappen.

[Achot]

Hallo,

$('#select2').hide();

$("#select1").change(function(e) {
	if ($('#select1 option:selected').val() == 3) {
		$('#select2').show();
	}
}

danke für deine Hilfe, ich habe auch etwas getestet

$(document).ready(function(){

  $('select#ansprechpartner').change(function(){
	if($(this).val() == 3){
	  $('div#benutzerdefinierte').show();
	}
  });

});   

<div id="firm" style="display: none;">...</div>

[m.]

Mahlzeit,

$(document).ready(function(){

  $('select#ansprechpartner').change(function(){
	if($(this).val() == 3){
	  $('div#benutzerdefinierte').show();
	}
  });

});   

Ich bin mir jetzt nicht zu 100% sicher, aber ich glaube, damit liest die nicht value aus sondern den index der option. Das ist aktuell kein Problem, erst, wenn eine Option dazu kommt. Testen kannst du das indem du value mal änderst. Wenn ich damit falsch liege, ist es natürlich die einfachere Lösung ;)

[Achot]

Hallo,

Ich bin mir jetzt nicht zu 100% sicher, aber ich glaube, damit liest die nicht value aus sondern den index der option. Das ist aktuell kein Problem, erst, wenn eine Option dazu kommt. Testen kannst du das indem du value mal änderst. Wenn ich damit falsch liege, ist es natürlich die einfachere Lösung ;)

hab es mal so abgeändert, dann bin ich auf der sicheren Seite?

<label for="ansprechpartner">Ansprechpartner</label>
<select name="ansprechpartner" id="ansprechpartner" required>
	<option value="">-- Bitte wählen --</option>			         
	
	<option value="1">Test Eintrag 1</option>
	<option value="2">Test Eintrag 2</option>
	<option value="3">Test Eintrag 3</option>
	<option value="4">Test Eintrag 4</option>
	
	<option value="ABC">Benutzerdefinierte Eingabe</option>			            	
</select>

$(document).ready(function(){

  $('select#ansprechpartner').change(function(){
     
    if($(this).val() == 'ABC'){
	 $('div#benutzerdefinierte').show();
     }

     if($(this).val() != 'ABC'){
	$('div#benutzerdefinierte').hide();
     }
  });

}); 

[m.]

Mahlzeit,

hab es mal so abgeändert, dann bin ich auf der sicheren Seite?

Wenn es so wie gewünscht funktioniert, bist du auf der sicheren Seite :)

[Achot]

Hallo,

Wenn es so wie gewünscht funktioniert, bist du auf der sicheren Seite :)

OK :)

[Gunnar Bittersmann]

@@Achot

hab es mal so abgeändert, dann bin ich auf der sicheren Seite?

Nein.

Da du dem WET-Prinzip verfallen bist (write everything twice) anstatt DRY zu bleiben (don’t repeat yourself), birgt dein Code Fehlerpotential.

    if($(this).val() == 'ABC'){
	 $('div#benutzerdefinierte').show();
     }

     if($(this).val() != 'ABC'){
	$('div#benutzerdefinierte').hide();
     }

Es ist nicht sinnvoll, die eingangs formulierte Bedingung in ihrer Negation nochmals zu wiederholen; dafür gibt es else.

LLAP 🖖

[Achot]

Hallo,

Es ist nicht sinnvoll, die eingangs formulierte Bedingung in ihrer Negation nochmals zu wiederholen; dafür gibt es else.

also so?

$(document).ready(function(){

  $('select#ansprechpartner').change(function(){
     
    if($(this).val() == 'ABC'){
	 $('div#benutzerdefinierte').show();
     }

    else{
	$('div#benutzerdefinierte').hide();
     }
  });

});

[Gunnar Bittersmann]

@@Achot

also so?

Eher so, ja.

Ich würde allerdings nicht jQuerys hide()- und show()-Methoden verwenden, sondern das HTML-Attribut hidden setzen bzw. löschen.

Dann ist man in der Darstellung flexibler; könnte bspw. nicht völlig verschwinden lassen, sondern ausgrauen.

LLAP 🖖

[pl]

Hallo,

Wenn der letzte Punkt gewählt wird, soll unter dem <select> eine weitere DIV Box eingeblendet werden mit Feldern wo ich einen neuen Ansprechpartner eintragen kann mit folgenden Werten:

1. Vor-Nachname
2. Telefon / Handy
3. Agenturname

Wie würdet ihr dieses umsetzten?

Über ein Template. So wird primär ein neuer Eintrag nicht im DOM erzeugt sondern in einer dem Template entsprechenden Datenstruktur: Array.unshift({name:'',phone:'',company:''}). Dann wird das Template ins DOM gerendert--

[pl]

Hallo,

Wenn der letzte Punkt gewählt wird, soll unter dem <select> eine weitere DIV Box eingeblendet werden mit Feldern wo ich einen neuen Ansprechpartner eintragen kann mit folgenden Werten:

1. Vor-Nachname
2. Telefon / Handy
3. Agenturname

Wie würdet ihr dieses umsetzten?

Über ein Template. So wird primär ein neuer Eintrag nicht im DOM erzeugt sondern in einer dem Template entsprechenden Datenstruktur: Array.unshift({name:'',phone:'',company:''}). Dann wird das Template ins DOM gerendert

Also mal ehrlich, wer für diesen Supertipp Minus gibt, hat überhaupt keine Ahnung von praktischer Programmierung. Der hat höchstens ein krankhaftes persönliches Problem.

MfG

[m.]

Mahlzeit,

Also mal ehrlich, wer für diesen Supertipp Minus gibt, hat überhaupt keine Ahnung von praktischer Programmierung. Der hat höchstens ein krankhaftes persönliches Problem.

Das Minus ist zwar nicht von mir, aber mal ehrlich, wieso so kompliziert und dann noch ahne möglichen Fallback wenn kein Javascript geht?

[Gunnar Bittersmann]

@@pl

Also mal ehrlich, wer für diesen Supertipp Minus gibt, hat überhaupt keine Ahnung von praktischer Programmierung.

Das war ich und das mag ja sein. Ich habe aber ein bisschen Ahnung von praktischer Webentwicklung. Und ein Prinzip dabei ist, Programmierung weitgehend zu vermeiden, wenn es auch deklarativ geht: HTML, CSS.

Also den entsprechenden Bereich fertig in HTML geschrieben, in ein <fieldset hidden> gepackt. Das einzige, was mit Programmierung zu tun wäre, ist es, das hidden-Attribut je nach Nutzerinteraktion zu löschen bzw. wieder zu setzen.

Und damit das Ganze auch ohne JavaScript funktioniert, setzt man das hidden-Attribut initial nicht mit HTML, sondern mit JavaScript.

Wie Heydon zu sagen pflegt: “Less is less.” (Video 35:39–39:20 · Folien 128–141) 😂

Der hat höchstens ein krankhaftes persönliches Problem.

Die fachlichen Probleme mit deinen Postings sind schon genug.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Ich habe aber ein bisschen Ahnung von praktischer Webentwicklung. Und ein Prinzip dabei ist, Programmierung weitgehend zu vermeiden, wenn es auch deklarativ geht: HTML, CSS.

Es gibt auch deklarative Programmierung. *duck_und_weg*

Bis demnächst
Matthias

[dedlfix]

Tach!

Wenn der letzte Punkt gewählt wird, soll unter dem <select> eine weitere DIV Box eingeblendet werden mit Feldern wo ich einen neuen Ansprechpartner eintragen kann mit folgenden Werten:

1. Vor-Nachname
2. Telefon / Handy
3. Agenturname

Wie würdet ihr dieses umsetzten?

Über ein Template.

So wird primär ein neuer Eintrag nicht im DOM erzeugt sondern in einer dem Template entsprechenden Datenstruktur: Array.unshift({name:'',phone:'',company:''}). Dann wird das Template ins DOM gerendert--

Also statt die Elemente bereits im DOM zu haben und lediglich einzublenden, soll irgendwas komplexeres mit Template verwendet werden? Ist der Aufwand im vorliegenden Fall gerechtfertigt? Was ist der Vorteil dieser Vorgehensweise? Gibt es auch Nachteile?

dedlfix.