Хорошо, теперь у меня есть рабочие формы, зависящие от выпадающего меню. Например, если я выберу элемент 1 в раскрывающемся списке, появится какой-нибудь элемент Div, а если я выберу пункт 2, появится другой элемент Div .. Моя проблема в том, что даже другой элемент Div скрыт , он по-прежнему будет получать значения записей скрытых типов ввода в div. Есть ли способ, которым, если div скрыт, ввод сообщений не будет отправлен?
вот мой jquery
$(function() {
$(".forms").hide();
$("#myselect").change(function() {
switch($(this).val()){
case "student":
$(".forms").hide().parent().find("#Form1").show();
break;
case "teacher":
$(".forms").hide().parent().find("#Form2").show();
break;
}
});
});
вот мой взгляд
<form>
<select id="myselect">
<option value="student">student</option>
<option value="teacher">teacher</option>
</select>
<div id="Form1" class="forms">
//some input here like <input type="text" name="studentName"/>
</div>
<div id="Form2" class="forms">Form 2 Contents</div>
//some input here like <input type="text" name="teacherName"/>
</form>
EDIT
я пробовал это с помощью .remove (). но он все еще читает данные постов из # student_profile
$(function() {
$(".fields").hide();
$("#role").change(function() {
switch($(this).val()){
case "3":
$(".fields").hide().parent().find("#student_profile").show();
break;
case "2":
$(".fields").hide().parent().find("#teacher_profile").show();
$("#student_profile").remove();
break;
}
});
});
РЕДАКТИРОВАТЬ вот мой реальный код
<form action="add" method="post" class="form label-inline uniform" />
<h3><a href="#">User</a></h3>
<div class="field"><label for="username">Username </label> <input id="username" name="username" size="50" type="text" class="medium" /></div>
<div class="field"><label for="password">Password </label> <input id="password" name="password" size="50" type="password" class="medium" /></div>
<div class="field">
<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
<option value="1"/>Admin
</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 class="field">
<label for="type">Year</label>
<select id="type" name="stdntYear" class="medium">
<optgroup label="Student Year">
<option value="1st" />1st
<option value="2nd" />2nd
<option value="3rd" />3rd
<option value="4th" />4th
</optgroup>
</select>
</div>
</div>
<div class="field"><label for="regdate">Registration Date </label> <input id="regdate" name="regdate" size="20" type="text" class="large" /></div>
<br />
<h3><a href="#">User Profile</a></h3>
<div class="field"><label for="fname">First Name </label> <input id="fname" name="fname" size="50" type="text" class="large" /></div>
<div class="field"><label for="fname">Middle Name </label> <input id="mname" name="mname" size="50" type="text" class="large" /></div>
<div class="field"><label for="lname">Last Name </label> <input id="lname" name="lname" size="50" type="text" class="large" /></div>
<div class="field"><label for="nickname">Nickname</label> <input id="nickname" name="nickname" size="50" type="text" class="large" /></div>
<div class="field"><label for="birthday">Birthday</label> <input type="text" size="20" name="birthday" id="birthday" class="large"/></div>
<div class="field">
<label for="type">Sex</label>
<select id="type" name="sex" class="medium">
<optgroup>
<option value="M" />Male
<option value="F" />Female
</optgroup>
</select>
</div>
<div class="field"><label for="address">Address</label> <input id="address" name="address" size="50" type="text" class="large" /></div>
<div class="field"><label for="city" class="">City </label> <input id="city" name="city" size="20" type="text" class="medium" /></div>
<div class="field"><label for="country" class="">Country </label> <input id="country" name="country" size="20" type="text" class="medium" /></div>
<div class="field"><label for="zcode">Zip Code </label> <input id="zcode" name="zcode" size="20" type="text" class="medium" /></div>
<!--
<div class="field clearfix">
<label for="lname">File Upload </label>
<input style="opacity: 0;" class="file" type="file" />
</div>
---->
<!----
<div class="controlset field">
<span class="label">Preferred Location</span>
<div class="controlset-pad">
<input name="radio1" id="radio1" value="1" type="radio" /> <label for="radio1">Option 1</label><br />
<div class="clear"></div>
<input name="radio1" id="radio2" value="1" type="radio" /> <label for="radio2">Option 2</label><br />
<div class="clear"></div>
<input name="radio1" id="radio3" value="1" type="radio" /> <label for="radio3">Option 3</label><br />
</div>
</div>
<div class="controlset field">
<span class="label">Something Else </span>
<div class="controlset-pad">
<input name="approved" id="check1" value="1" type="checkbox" /> <label for="check1">Some Option 1</label><br />
<div class="clear"></div>
<input name="pending" id="check2" value="1" type="checkbox" /> <label for="check2">Some Option 2</label><br />
<div class="clear"></div>
<input name="actives" id="check3" value="1" type="checkbox" /> <label for="check3">Some Option 3</label><br />
</div>
</div>
<div class="field"><label for="description">Description</label> <textarea rows="7" cols="50" id="description" name="description"></textarea></div>
<br />
---->
<div class="buttonrow">
<input type="button" class="btn" value="Back" onClick="history.go(-1);return true;">
<input type="reset" class="btn btn-black" value="Reset"/>
<input type="submit" id="submit" class="btn btn-grey" value="Add User"/>
</div>
</form>