Formularfeld ausblenden mit Dropdownauswahl

[nchristoph]

Hallo,

ich bin gerade an einem Angebotsformular am arbeiten und habe ein kleines Problem.

Ich muss ein Textfeld aus und einblenden, je nachdem welcher Punkt im Dropdownmenü ausgewählt ist.

Hier mein HTML Code

		<div class="stdFORM-label">
		<label for="stdFORM_Holzart" class="stdFORM-required required">: *</label>
		</div>
		<div class="stdFORM-input">
		<select name="formhandler[stdFORM_Holzart]" id="formhandler[stdFORM_Holzart]">
		<option value="other">Angebot f&uuml;r</option>
		<option value="ipe">Angebot f&uuml;r Terrassenholz in IPE</option>
		<option value="massaranduba">Angebot f&uuml;r Terrassenholz in Massaranduba</option>
		<option value="bangkirai">Angebot f&uuml;r Terrassenholz in Bangkirai</option>
		<option value="megawood">Angebot f&uuml;r Terrassenholz in Megawood(WPC)</option>
		<option value="eiche">Angebot f&uuml;r Terrassenholz in Eiche</option>
		<option value="thermoesche">Angebot f&uuml;r Terrassenholz in Thermoesche</option>
		<option value="thermokiefer">Angebot f&uuml;r Terrassenholz in Thermokiefer</option>
		<option value="teak">Angebot f&uuml;r Terrassenholz in Teak</option>
		</select>
					
		</div>
		<div class="stdFORM-label">
			<label for="stdFORM_other" class="stdFORM"><span class="invisible">Erforderlich: </span>: *</label>
		</div>
		<div class="stdFORM-input">
			<input type="text" class="required" name="formhandler[stdFORM_other]" id="formhandler[stdFORM_other]" value="" />
			
		</div>

Ich habe das mit jquery versucht, funktioniert aber nicht, das Feld wird nicht ausgeblendet.

	$(function() {
    $("#formhandler[stdFORM_Holzart]").change(function() {
        var val = $(this).val();
        if(val == 'other') {
            $('input[name="formhandler[stdFORM_other]"]').show();
        } else {
            $('input[name="formhandler[stdFORM_other]"]').hide();
        }
    }).change();
});

Gibt es dafür in HTML selber eine bessere Möglichkeit oder bin ich auf Jquery/JS angewiesen? Wenn ja, wo liegt bitte mein Fehler?

Grüsse

 

[Andreas Dunstheimer]

Soweit ich weiß, ist die Schreibweise in jQuery ja

$('id')

d.h. in Deinem Fall müsste das so lauten:

$('formhandler[stdFORM_other]').show();
bzw
$('formhandler[stdFORM_other]').hide();

Ich habe gerade keine Testumgebung, um das auszuprobieren, aber das wäre einen Versuch wert.


Alternativ ginge es natürlich auch ohne jQuery - also direkt per JavaScript:

document.getElementById('formhandler[stdFORM_other]').style.visibility = 'visible';
bzw.
document.getElementById('formhandler[stdFORM_other]').style.visibility = 'hidden';

Siehe auch hier: http://www.tutorials.de/javascript-ajax/209203-visibility-eines-objekts-anhand-der-id-aendern.html

 

[nchristoph]

Danke ich werds morgen versuchen, wenn ich in der Firma bin und das Ergebnis posten.

//EDIT:

Ich habe es jetzt geschafft, indem ich jetzt einen DIV um die beiden Formularelemente gemacht habe und diesen ausblende.

Leider funktioniert das wieder einblenden nicht.

$('.stdHolzart').change(function(){
if ($(this).val() != 'other')
$('#sonstig').hide();
else
$('#sonstig').show();
});