Попытка очистить входные данные формы с помощью jQuery, чтобы я мог добавить его обратно в форму

Question

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

Для этого я взял свой HTML-файл, скопировал соответствующий раздел (часть, которая получает "добавлено больше"), а затем сохранил его в переменной в Javascript. Это стало довольно раздражающим, когда мне пришлось вносить изменения в форму, как тогда мне пришлось бы вносить те же изменения в переменную Javascript.

Мой новый метод заключается в динамическом создании переменной в Javascript. Когда страница загружается, я использую jQuery, чтобы извлечь часть кода "добавить больше" и кэшировать HTML-код в переменную. Затем, когда нажимается кнопка "Добавить еще", я добавляю кешированный HTML-код на страницу.

Проблема с формами ввода. Серверный код автоматически заполняет форму данными пользователя из базы данных. Я хочу кэшировать эти данные HTML без ввода формы...

Моя текущая функция выглядит так:

function getHTML($obj, clean)
{
    if (clean)
    {
        var $html = $obj.clone();

        $html.find('input').each(function() { $(this)[0].value = ''; });
    }
    else
    {
        var $html = $obj;
    }

    var html = $html.wrap('<div></div>').parent()[0].innerHTML;
    $html.unwrap();

    return html;
}

Не работает Я также не уверен, что это лучший подход к решению проблемы.

Есть идеи?

Answer 1

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

Я думаю, что я бы сделал по-другому, чтобы создать .clone() действительно ли вы "чистите" входы. Тогда вы не оборачиваете и не разворачиваете элемент, который находится в DOM. Просто используйте if() заявление, чтобы решить, стоит ли его чистить.

Что-то вроде этого:

function getHTML($obj, clean) {
    var $clone = $obj.clone();
    if (clean) {
        $clone.find('input').each(function() { this.value = ''; });
    }
    return $clone.wrap('<div></div>').parent()[0].innerHTML;
}

Или немного больше jQuery и меньше кода:

function getHTML($obj) {
    return $obj.clone().find('input').val('').end().wrap('<div/>').parent().html();
}

Немного менее эффективно, но если он запускается только один раз при загрузке страницы, то, возможно, это не проблема.

Или, если он все равно будет превращен в объект jQuery, почему бы просто не вернуть его?

function getHTML($obj) {
    return $obj.clone().find('input').val('').end();
}

Теперь вы вернули очищенный клон оригинала, который можно вставить в любое время.

---

РЕДАКТИРОВАТЬ:

Сейчас не могу понять, почему мы не можем получить новую строку.

Вот функция, которая будет возвращать элементы DOM. Кроме того, я в тупике!

function getHTML($obj, clean) {
    var $clone = $obj.clone();
    if (clean) {
        $clone.find('input').each(function() {
            this.value = '';
        });
    }
    return $clone.get();  // Return Array of DOM Elements
}

РЕДАКТИРОВАТЬ: работает сейчас.

Я бросил большую часть JQuery, и использовал .setAttribute("value","") вместо this.value,

Дайте ему попытку:

function getHTML($obj, clean) {
    var clone = $obj[0].cloneNode(true);
    var inputs = clone.getElementsByTagName('input');
    console.log(inputs);
    for(var i = 0, len = inputs.length; i < len; i++) {
        inputs[i].setAttribute('value','');
    }
    return $('<div></div>').append(clone)[0].innerHTML;
}

Answer 2

Я бы обернул часть формы, которая должна быть клонирована в <fieldset>:

<form id="my_form">
    <fieldset id="clone_1">
        <input name="field_1_1">
        <input name="field_2_1">
        <input name="field_3_1">
    </fieldset>
</form>
<a href="#" id="fieldset_clone">Add one more</a>

Тогда для сценария jQuery:

$("#fieldset_clone").click(function(event) {
    // Get the number of current clones and set the new count ...
    var cloneCount = parseInt($("fieldset[id^=clone_]").size());
    var newCloneCount = cloneCount++;

    // ... then create new clone based on the first fieldset ...
    var newClone = $("#clone_1").clone();

    // .. and do the cleanup, make sure it has
    // unique IDs and name for server-side parsing
    newClone.attr('id', 'clone_' + newCloneCount);
    newClone.find("input[id^=clone_]").each(function() {
        $(this).val('').attr('name', ($(this).attr('name').substr(0,7)) + newCloneCount);
    });

    // .. and finally insert it after the last fieldset
    newClone.insertAfter("#clone_" + cloneCount);
    event.preventDefault();
});

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

Кроме того, если вы хотите добавить опцию удаления наборов (можно добавить слишком много по ошибке или по любой другой причине), поместив их в <fieldset> который имеет уникальный идентификатор, поможет получить к нему доступ и сделать .remove() в теме.

Надеюсь это поможет.