刷新

Question

刷新后是否仍然可以看到添加的动态字段。

我发现了一个相关的主题，但它很复杂。 related topic

我想在我的工作中实现它。

拨弄

https://jsfiddle.net/jqj1h4vb/

由于

SCRIPT

$(function()
{
    $(document).on('click', '.btn-add', function(e)
    {
        e.preventDefault();

        var controlForm = $('.controls form:first'),
            currentEntry = $(this).parents('.voca:first'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);

        newEntry.find('input').val('');
        controlForm.find('.btn-add:not(:last)')
            .removeClass('btn-default').addClass('btn-danger')
            .removeClass('btn-add').addClass('btn-remove')

            .html('<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove   ');
    }).on('click', '.btn-remove', function(e)
    {
        $(this).parents('.voca:first').remove();

        e.preventDefault();
        return false;
    });
});

HTML

<div class="container">


        <div class="control-group" id="fields">
            <div class="controls"> 
                <form role="form" autocomplete="off">



                <div class="row">

                    <div class="voca">
                    <div class="col-md-3">
                        <input class="form-control" placeholder="Name this snippet" name="voca" type="text" value="Dynamic Form Fields - Add & Remove BS3">
                    </div>
                    <div class="col-md-3">
                        <input class="form-control" placeholder="Name this snippet" name="vocatrans" type="text" value="Dynamic Form Fields - Add & Remove BS3">
                    </div>
                    <div class="col-md-1">
                        <select class="form-control">
                          <option>1</option>
                          <option>2</option>
                        </select>
                    </div>
                    <button type="button" class="btn btn-success btn-add" >
                        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add more
                    </button>
                    </div>
                    </div>    

                </form>
            <br>

            </div>
        </div>

</div>

Answer 1

在您的小提琴中，再次运行脚本时会删除字段。我没有看到问题所在。如果您的浏览器仍然存在问题。请使用Ctrl + F5刷新。

Answer 2

您可以通过两种方式对此进行归档..

1. 在会话中存储价值和数据。
2. 将值和数据存储在数据库中。

然后在页面加载后，您只需从数据库或会话中获取数据