如何添加在页面刷新时不会消失的动态输入字段？

Question

I want to add input fields, as well as remove, on clicking a button.

I can add input boxes using jQuery, but I don't know the way to make it permanent. Do I need to save it in the database to make it permanent? I am using the following code with a button:

<div class="input_fields_container">
  <div><input type="text" name="product_name[]">
    <button class="btn btn-sm btn-primary add_more_button">Add More Fields</button>
  </div>
</div>

And the jQuery is as follows:

<script>
$(document).ready(function () {
var max_fields_limit = 10; // Set limit for maximum input fields
    var x = 1; // Initialize counter for text box
    $('.add_more_button').click(function (e) { // Click event to add more fields
        e.preventDefault();
        if (x < max_fields_limit) { // Check conditions
            x++; // Increment counter
            $('.input_fields_container').append('<div><input type="text" name="product_name[]"/><a href="#" class="remove_field" style="margin-left:10px;">Remove</a></div>'); // Add input field
        }
    });  
    $('.input_fields_container').on("click", ".remove_field", function (e) { // User click on remove text links
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});
</script>

How do I make it dynamic, so input field does not disappear on page refresh until I remove it?

Answer 1

Use cookie, run below code in your LOCAL and refresh the page. See magic.

 $(document).ready(function () { var getControl=getCookie("countControls1"); var max_fields_limit = 10; // Set limit for maximum input fields var x = 0; // Initialize counter for text box for(var i=1; i<=getControl; i++) { console.log(i); addControls(); } $('.add_more_button').click(function (e) { // Click event to add more fields addControls(); }); function addControls() { console.log(x); if (x < max_fields_limit) { x++; // Increment counter setCookie("countControls1",x,100); $('.input_fields_container').append('<div><input type="text" id="id'+x+'" name="product_name[]"/><a href="#" class="remove_field" style="margin-left:10px;">Remove</a></div>'); // Add input field } } $('.input_fields_container').on("click", ".remove_field", function (e) { // User click on remove text links $(this).parent('div').remove(); x--; setCookie("countControls1",x,100); }); function setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires=" + d.toGMTString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; $("#div1").html("Add cookie = ",getCookie(cname)); } function getCookie(cname) { console.clear(); var name = cname + "="; var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(';'); //console.log(cname); //console.log(decodedCookie); console.log(ca); for(var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { console.log(c.substring(name.length, c.length)); return (c.substring(name.length, c.length)); } } return ""; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <input type="button" class="add_more_button" value="Add" /> <div class="input_fields_container"></div>