Почему переменный родительский класс пуст?

Question

Я пытаюсь переключить класс на родительский элемент (div/form, либо). Мой CSS изменяет видимость некоторых элементов формы на основе этого родительского класса.

Когда класс обновляется в div/form, все входы в форме освобождаются/изменяются без значения. Функциональность в порядке на большинстве входов, но для тех, которые всегда видны, я не хочу потерять значение при скрытии формы.

В принципе, у меня есть базовая форма поиска и расширенная.

EDIT: Ванильный JavaScript (не jQuery) работает так, как ожидалось ... ПОЧЕМУ jQuery?

var d = document.getElementById("div"); 
d.className = d.className + " advanced"; 

Вот полный скрипку: https://jsfiddle.net/psalmody/Lsnsaups/2/

CSS:

#div .search-advanced { 
    display:none; 
} 

#div.advanced .search-advanced { 
    display:inline-block; 
} 

HTML:

<div id="div"> 
<form id="searchForm"> 
<fieldset> 
    <div> 
    <label for="term">Semester:</label> 
    <select id="term"> 
     <option disabled></option> 
    </select> 
    </div> 
    <div> 
    <label for="subj">Subject(s):</label> 
    <input type="text" id="subj"></select> 
    </div> 
    <div class="search-advanced"> 
    <label for="crse">Course Number:</label> 
    <input type="text" id="crse" maxlength="5"> 
    </div> 
    <div class="search-advanced"> 
    <label for="sec">Section:</label> 
    <input type="text" id="sec" maxlength="3"> 
    </div> 
    <div class="search-advanced"> 
    <label for="crn">CRN(s):</label> 
    <input type="text" id="crn"> 
    </div> 
    <div class="search-advanced"> 
    <label for="title">Title:</label> 
    <input type="text" id="title"> 
    </div> 
</fieldset> 
</form> 
</div> 

JQuery:

$(function() { 
    $('#advanced').click(function() { 
     $('#div').toggleClass('advanced') 
    }) 
}) 

Answer 1

Вы используете <button> с типом reset, который устанавливает все элементы управления формы в исходное значение. От HTML specification:

Входной элемент представляет собой кнопку, при активации, сбрасывает форму.