Кнопка Создать, чтобы добавить еще одну группу входов в форму в передней части сайта

Question

У меня есть форма, которая будет использоваться для бронирования автомобилей. Прямо сейчас у меня есть только группа полей, показывающих информацию об одном транспортном средстве. Я хотел бы иметь кнопку или ссылку, по которой пользователь может нажать, чтобы «добавить другое транспортное средство», которое добавило бы группу полей, связанных с транспортным средством и информацией об аренде (дата получения, дата отказа, тип транспортного средства и т. Д.).

Я нашел какой-то код, который должен делать то, что я хочу, но по какой-то причине я не могу заставить его работать. У меня такое ощущение, что это что-то простое, но я так долго на него смотрю, что не могу понять, что это такое.

На данный момент мне просто нужна ссылка «Добавить другое транспортное средство», чтобы добавить указанный мной контент (сейчас только пункт «Тестирование»). Мне пока не нужно беспокоиться об отправке данных формы, поскольку это нужно будет обрабатывать через Modx. (И мне нужно идти по одному шагу за раз!)

Вот ссылка на страницу, над которой я работаю: http://www.cedrent.com.au/contact-form-test.html

Соответствующий скрипт находится непосредственно перед тегом закрывающей головы, и он должен добавляться к div «vehicleFields», расположенному в середине формы.

Любая помощь будет принята с благодарностью.

Answer 1

Вы можете группировать и клонировать связанные поля, используя метод clone()

http://api.jquery.com/clone/

Просто оберните $("#vehicleFields") другим div, чтобы вы могли глубоко клонировать $("#vehicleFields") и добавить его в оболочку.

Упрощенный образец, как показано ниже http://jsfiddle.net/Quincy/ZA56n/1/

Но имейте в виду, что если вы сделаете это, вы должны сначала удалить атрибуты id элементов в $("#vehicleFields"). Потому что id должен быть уникальным для одного html и использование clone() также скопирует идентификатор, что нарушает это правило.

$(function(){

$("#addVehicle").click(function() {
    $("#vehicleFieldsWrapper .vehicleFields").clone().appendTo($("#vehicleFieldsWrapper "));

});

  });