Kontaktformular Felder deaktivieren
ich erstelle gerade für ein Projekt ein Kontaktformular. Ich nutze aktuell Materialize CSS als Framework. Bisher funktioniert dies ohne Probleme, jedoch habe ich ein Selectfenster, wo man die Teilnehmeranzahl auswählen kann. Wie kann ich die Felder der Namen für die Teilnehmer deaktivieren, wenn er nur 2 Teilnehmer auswählt? Sollte meines Wissens nach mit JS funktionieren aber wie?+
Der hier verwendete Code
<div class="container"> <div class="row">
<form class="col s12" method="post" action="send_mail.php">
<div class="input-field col s6">
<label for="Nachname"><b>Nachname Lehrkraft:</b></label><br> <input type="text" id="Nachname" name="Nachname" class="validate" required ><br><br> </div> <div class="input-field col s6""> <label for="Name"><b>Vorname Lehrkraft:</b></label><br> <input type="text" id="Name" name="Name" class="validate" required><br><br> </div> <div class="input-field col s6"> <label for="Schule"><b>Schule:</b></label><br> <input type="text" id="Schule" name="Schule" class="validate" required><br><br> </div> <div class="input-field col s6"> <label for="Email"><b>E-Mail:</b></label><br> <input type="text" id="Email" name="Email" class="validate" required><br><br> </div> <div class="input-field col s12"> <label for="Teamnamen"><b>Teamname</b></label><br> <input type="text" id="" name="Teamnamen" class="validate" required><br><br> </div> <div class="input-field col s12">
<select id="Teilnehmer" name="Teilnehmer">
<option value="" disabled selected>Wähle die Teilnehmeranzahl</option> <option value="2">2 Teilnehmer</option>
<option value="3">3 Teilnehmer</option>
<option value="3">4 Teilnehmer</option>
</select> </div>
<div id="mitglieder">
<div class="input-field col s6"> <label for="Name2"><b>Teammitglied 1:</b></label><br>
<input type="text" id="Name2" name="Name2" class="validate" required ><br><br> </div>
<div class="input-field col s6"> <label for="Name2"><b>Teammitglied 2:</b></label><br> <input type="text" id="Name2" name="Name2" class="validate" required ><br><br> </div> <div class="input-field col s6"> <label for="Name3">
<b>Teammitglied 3:</b></label><br> <input type="text" id="Name3" name="Name3" class="validate"><br><br> </div>
<div class="input-field col s6"> <label for="Name4"><b>Teammitglied 4:</b></label><br> <input type="text" id="Name4" name="Name4" class="validate"><br><br> </div>
</div>
<div class="input-field col s12"> <label for="Nachricht"><b>Nachricht:</b></label><br> <textarea id="Nachricht" name="Nachricht" class="materialize-textarea" required></textarea> <br><br> </div> <div class="row"> <button class="btn waves-effect waves-light" type="submit" name="submit">Senden <i class="material-icons right">send</i> </button> </div> </form> </div> </div> <!-- Scripts--> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script>
$('#Teilnehmer').change(function(){
menge=$(this).val();
if(menge<=2){
$('#mitglieder').css('display','none');
}else if(menge>=3){
$('#mitglieder').css('display','block');
}
})
$(document).ready(function() {
$('select').material_select();
});
Waves.attach('.btn', ['waves-button', 'waves-float']);
</script> </body>