Question

I have a pretty simple HTML form where users can enter in information about a person. Below that form is a button which allows them to ‘add more’. When clicked, the ‘person’ form is copied and appended to the page.

The way I used to do this was to take my HTML file, copy out the relevant section (the part that gets ‘added more’) and then save it into a variable in the Javascript. This became rather annoying when I had to make changes to the form as I would then have to make the same changes to the Javascript variable.

My new method is to create the variable dynamically in Javascript. When the page loads, I use jQuery to grab out the ‘add more’ part of the code and cache the HTML into a variable. Then when the ‘add more’ button is clicked, I append that cached HTML to the page.

The problem is with form inputs. The server-side code autofills the form with the user’s data from the database. I want to cache that HTML data with no form inputs…

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

It doesn’t work. I’m also unsure if this is the best approach to solving the problem.

Any ideas?

Answer 1

I don’t know why this wouldn’t work. I can’t see how the function is being called, or what is being passed to it.

I guess one thing I’d do differently would be to create a .clone() whether or not you’re “cleaning” the inputs. Then you’re not wrapping and unwrapping an element that is in the DOM. Just use the if() statement to decide whether or not to clean it.

Something like this:

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

Or a little more jQuery and less code:

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

A little less efficient, but if it only runs once at the page load, then perhaps not a concern.

Or if it is going to be made into a jQuery object eventually anyway, why not just return that?

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

Now you’ve returned a cleaned clone of the original that is ready to be inserted whenever you want.

---

EDIT:

Can’t figure out right now why we can’t get a new string.

Here’s a function that will return the DOM elements. Beyond that, I’m stumped!

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: Works now.

I ditched most of the jQuery, and used .setAttribute("value","") instead of this.value.

Give it a try:

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