Создание формы самообновления

Question

Я создаю форму на веб-странице, но я хочу, чтобы эта форма изменялась при вводе пользователем значений.

Пример: Если у нас есть выпадающее меню: ObjectType

И кто-то выбирает Cars, когда он выбран, я бы хотел, чтобы отображались новые опции ниже. Скажите, Марка, Модель, Год и Примечания.

Принимая во внимание, что если этот человек выберет Vegetables, тогда, возможно, все, что я хочу, это флажок для Root Vegetables.

Мой вопрос: каков наилучший способ сделать это? Моя форма довольно сложна и будет иметь около 20 различных возможных настроек, но я хочу, чтобы эти настройки были отсортированы. Я использовал appendChild() с AJAX-запросами, но у меня просто вышли неупорядоченные поля. Кроме того, случайное медленное соединение заставляет человека ждать появления поля.

Вместо того, чтобы загружать HTML-страницы этими объектами формы (технически частью таблицы), я должен хранить все эти вещи в массиве? Можно ли просто загрузить одну HTML-страницу или XML-объект и использовать selectElementById() для этого результата после его сохранения?

Объекты, которые я загружаю, являются строками, вот пример одного и того, что он должен уметь делать:

<td>
    <strong>Abilities:</strong>
</td>
<td>
    <textarea 
        id ='abilities' 
        name="abilities" 
        style="width:100%" rows="4"  
        onchange='userCreation.updateAbilities()'
        onkeyup='userCreation.updateAbilities()'>
    </textarea>
</td>

У меня есть таблица на моей странице, я создавал новый элемент tr с JavaScript, устанавливая его как innerHTML и затем добавляя дочерний элемент. Есть ли лучший способ сделать это?

Answer 1

Просто сохраните все на странице и просто измените видимость различных разделов на основе взаимодействия с пользователем вместо динамической загрузки элементов через AJAX.

Answer 2

Я бы просто поместил все элементы формы на страницу и скрыл те, которые вы не используете в CSS. Таким образом, вы поддерживаете порядок, и вам не нужно ждать появления полей. Это немного замедлит время загрузки страницы, но сделает вашу жизнь намного проще.

В противном случае, я бы сохранил имя (или что-то еще) каждого поля в массиве или объекте, и когда придет время AJAX, загрузите его, сначала посмотрите его позицию и поместите его туда.