Trying to clear form input using jQuery, so I can add it back to the form

Question

I have a fairly simple HTML form in which users can enter information about a person. Below this form is a button that allows them to "add more." When a person is clicked, it is copied and added to the page.

The way I did this was to take my HTML file, copy the corresponding section (the part that gets the “added more”), and then save it in a variable in Javascript. It became quite annoying when I had to make changes to the form, since then I would have to make the same changes to the Javascript variable.

My new method is to dynamically create a variable in Javascript. When the page loads, I use jQuery to grab the “add more” part of the code and cache the HTML in the variable. Then, when the "add more" button is clicked, I add this cached HTML to the page.

The problem is the form inputs. Server code automatically populates the form with user data from the database. I want to cache this HTML data without entering forms ...

My current function looks like this:

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;
}

This does not work. I'm also not sure if this is the best approach to solving the problem.

Any ideas?

Answer 1

I do not know why this will not work. I do not see how the function is called or what is passed to it.

, , -, .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();
}

, , .

---

EDIT:

, .

, 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
}

EDIT: .

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 script:

$("#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() .

, .