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

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

3 голосов
/ 30 августа 2010

У меня есть довольно простая 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;
}

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

Есть идеи?

Ответы [ 2 ]

1 голос
/ 30 августа 2010

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

Я думаю, что я бы по-другому сделал бы создание .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;
}
0 голосов
/ 30 августа 2010

Я бы обернул часть формы, которую нужно клонировать, в <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().

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

...