Retain dynamically generated input fields via jquery after refresh

Question

I am using the script below to generate input fields as needed. However, upon refresh or when clicking back on the submission error page, the fields and information entered disappear. Is there any way to retain the fields after clicking back or refreshing the page?

$(document).ready(function() {
var MaxInputs       = 67;
var InputsWrapper   = $("#InputsWrapper"); 
var AddButton       = $("#AddMoreFileBox");
var x = InputsWrapper.length;
var FieldCount=8; 
$(AddButton).click(function (event)
{
    if(x <= MaxInputs) 
    {
        FieldCount++; 
        $(InputsWrapper).append('<div><input type="text" class="input" size="22"  
        maxlength="80" name="hostname'+ FieldCount +'" id="field_'+ FieldCount +'"/>
        <input class="left-margin" type="text" SIZE="15" MAXLENGTH="15" name="ipaddr'+ 
        FieldCount +'" id="field_'+ FieldCount +'"/><input class="left-margin" 
        type="text" SIZE="15" MAXLENGTH="15" name="app'+ FieldCount +'" id="field_'+ 
        FieldCount +'"/> <button type="button"class="removeclass">Remove</button> 
        </div>');
        x++; 
    }
return false;
});
   $("body").on("click",".removeclass", function(event){
    if( x > 1 ) {
            $(this).parent('div').remove();
            x--;
    }
 return false;

 }) 
 });

score 0 · Answer 1 · answered Jun 30 '14 at 17:10

If you can use HTML5 features, one way to do this is to use local storage. When creating the input fields, you save in local storage what you did.

That way, when your page is loaded, you can check what is in local storage, detect if the page was previously loaded before, and reconstruct the fields that were previously added dynamically.

Something like this:

$(document).ready(function(){
    $("#myButton").click(function(){
        var htmlAppend = '<input type="text" name="theName" />';
        $("#content").append(htmlAppend);
        //After appropriate checks that local storage is supported...
        localStorage.setItem("htmlAppend", htmlAppend);
    });

    var htmlAppend = localStorage.getItem("htmlAppend");
    if (htmlAppend) {
        $("#content").append(htmlAppend);
    }
});

This is of course just an example to give a direction. Other things you may want to pay attention to:

If several other pieces of HTML can be added through multiple events, you will have to update the local storage rather than just set it. That is: check what is already stored, and append the new content to it if any.
This will NOT save event handlers that you may attach to the dynamic HTML. You will have to encode it is some way in the stored value if you want to achieve that.

score 0 · Answer 2 · edited May 23 '17 at 12:10

Your problem lies with both your implementation of the server-client logic and what the actions that are erasing your elements and their data were designed to do.

When using the back button of a browser (or any shortcut for it) instead of any provided functionality within your system (such as a back button that would trigger an event that would allow you to save the data on the current page before going back), losing whatever work the user hasn't saved is the appropriate course of action (and the same applies for clicking refresh).

My recommendation to address this is to use a mix of whatever server side tools you have at your disposal to save this information whenever these events occur, (Djizeus answer is great, though you might want to take into account non HTML5 compliant browsers, unless your application is not targeted to them) and performing checks and other operations whenever the user triggers these events:

See this example for how to perform operations before the user exists the current page.

I guess retaining the data and the additional input fields after refreshing the page is not important but what happens with the particular form I am working on. When a user submits the form with errors, they are taken to an error page with a back button. When the user clicks on the back button the original data is retained, with the exception of the additional input fields. — ramoncis, Jun 30 '14 at 17:28

Retain dynamically generated input fields via jquery after refresh

2 Answers2

Linked