jquery .html() doesn't preserve input values

Question

I have a button on my web page that, when clicked, does the following:

Gets the contents of a "template table" by calling .html() on that table
Stores the contents of the above call in a variable
Does a global replace on that variable to track table row number
Replaced contents are added to my "real table"

Problem: Values entered by users into input fields in those table rows are not preserved. Here's the code:

function addRowToCluesTable() {
    var t = $("#template").html().replace(/{NUM}/g, stepCount);
    var r = $("#real").html();
    $("#real").html(r + "\n\n" + t);
}

This all works fine EXCEPT that any input fields in the "real" table (non-template) containing values entered by users are lost and all values are returned to their default or empty state. So the flow goes like this: row is added, values entered into real table, another row added, values entered...repeat.

How can I get jquery to preserve the user-supplied input values when dynamically adding rows? Instead of storing real table contents in a variable should I instead append template rows to the end of the real table? If so, what's the best way to do that?

Jason P · Accepted Answer · 2015-02-25 15:24:45Z

1

Try appending the new html instead:

$('#real').append(t);

answered Feb 25, 2015 at 15:24

Jason P

27k3 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery .html() doesn't preserve input values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related