jquery .remove() problems - php

Question

ok. i have a dropdown menu. if i select student. an additional field should be added to the form and when i choose teacher..the student specific fields should be remove and teacher input fields should be added.. in short i want to remove #student_profile if i choose #teacher_profile, and vice versa.
heres my code:
Javascript
<script>
$(function() {
$(".fields").hide();
$("#role").change(function() {
switch($(this).val()){
case "3":
$(".fields").hide().parent().find("#student_profile").show();
.find("#teacher_profile").addClass('not-active');
break;
case "2":
$(".fields").hide().parent().find("#teacher_profile").show();
.find("#student_profile").addClass('not-active');
break;
}
});
});
$('#submit').click(function(){
$('div').remove('.not-active');
});
</script>
html form
<form action="add" method="post"/>
<h3>User</h3>
<div><input id="username" name="username"/></div>
<div><label for="password">Password </label> <input name="password" type="password"/></div>
div><label for="role">Role </label>
<select id="role" name="role" class="medium">
<optgroup label="Type of User">
<option value="3" />Student
<option value="2" />Teacher
</optgroup>
</select>
</div>
<div id="student_profile" class="fields">
<div class="field">
<label for="type">Course</label>
<select id="type" name="stdntCourse" class="medium">
<optgroup label="Choose Course">
<option value="BS IT" />BS IT
<option value="BS CS" />BS CS
<option value="BS IS" />BS IS
</optgroup>
</select>
</div>
</div>
<div id="teacher_profile" class="fields">
<div class="field">
<label for="type">Department/label>
<select id="type" name="stdntCourse" class="medium">
<optgroup label="Choose Course">
<option value="BS IT" />cas
<option value="BS CS" />education
<option value="BS IS" />engineering
</optgroup>
</select>
</div>
</div>
<input type="submit" id="submit" value="Add User"/>
</form>

Answer 1

Your html code is quite a mess (invalid) (wrong nesting, wrong self closing tags etc..)
<form action="add" method="post">
<h3>User</h3>
<div><input id="username" name="username"/></div>
<div>
<label for="password">Password </label>
<input name="password" type="password" />
</div>
<label for="role">Role </label>
<select id="role" name="role" class="medium">
<optgroup label="Type of User">
<option value="3">Student</option>
<option value="2">Teacher</option>
</optgroup>
</select>
<div id="student_profile" class="fields">
<div class="field">
<label for="type">Course</label>
<select id="type" name="stdntCourse" class="medium">
<optgroup label="Choose Course">
<option value="BS IT">BS IT</option>
<option value="BS CS">BS CS</option>
<option value="BS IS">BS IS</option>
</optgroup>
</select>
</div>
</div>
<div id="teacher_profile" class="fields">
<div class="field">
<label for="type">Department</label>
<select id="type" name="stdntCourse" class="medium">
<optgroup label="Choose Course">
<option value="BS IT">cas</option>
<option value="BS CS">education</option>
<option value="BS IS">engineering</option>
</optgroup>
</select>
</div>
</div>
<input type="submit" id="submit" value="Add User" />
</form>
In your jquery you have some issues becaus eyou use the ; at wrong places making syntax-errors
Here is a bit simplified version
$(function() {
$(".fields").hide();
$("#role").change(function() {
switch(this.value){
case "3":
$(".fields").hide()
.filter('#student_profile')
.show()
.removeClass('not-active')
.end()
.filter('#teacher_profile')
.addClass('not-active');
break;
case "2":
$(".fields").hide()
.filter('#teacher_profile')
.show()
.removeClass('not-active')
.end()
.filter('#student_profile')
.addClass('not-active');
break;
}
}).change();
$('#submit').click(function(){
$('div').remove('.not-active');
});
});
You also need to invoke the .change() at the first time manually to initialize the form.
Working demo at http://jsfiddle.net/gaby/qTgGY/1/