刷新后通过jquery保留动态生成的输入字段 [英] Retain dynamically generated input fields via jquery after refresh

问题描述

我使用下面的脚本根据需要生成输入字段。但是，在刷新或点击提交错误页面时，输入的字段和信息消失。

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;

 }) 
 });

推荐答案

客户端逻辑以及删除元素和数据的操作都被设计为执行。

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).

我的建议是解决这个问题的方法是使用您随时可以使用的任何服务器端工具的组合来保存这些信息发生这些事件（Djizeus的回答很好，尽管您可能想要考虑非HTML5兼容的浏览器，除非您的应用程序不针对它们）并执行检查和其他操作用户触发这些事件：

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.

这篇关于刷新后通过jquery保留动态生成的输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！