Dynamic generated fields and data remain after submission

Question

I'm working on a form where I have a dynamic fields where I can add and remove input and drop down fields.

My problem is I don't know how to make the fields I add and the data on that fields to remain after submission.

<script type="text/javascript">
  document.getElementById('tonnage').value = "<?php echo $_POST['tonnage'];?>";
</script>

I tried this code for the select tag to remain the values but didn't work.

here is my sample code.

BOOTPLY

I hope you can help me, Thanks.

Answer 1

Assuming you don't want to set up a server to store this info, you're left with only a few options here. Specifically, client-side storage. I'll cover localStorage as it's the easiest to use and you've mentioned it above.

Here's the localStorage API. If you believe that the interface is too complicated, I would recommend giving it a read through, perhaps along with a tutorial (Personally I believe the Mozilla Docs to be better but this tut looks more applicable for your application).

In short, you will be making use of the setItem(...) and getItem(...) methods.

localStorage.setItem("My test key", "My test value");

console.log(localStorage.getItem("My test key")); // --> My test value

So, for your application, I would recommend creating an object to store your values in and then appending said object to localStorage.

var state = {}
// Get values from your form however you feel fit
values = getValues(...);
function setValues(values) {
    // Do this for all the values you want to save
    state.values = values
    // Continues for other values you want to set...   
}
// Save values to localStorage
localStorage.setItem("Application_State", state);

Now for retrieving state when the user comes back your website.

// Application_State is null if we have not set the state before
var state = localStorage.getItem("Application_State") || {};
function updateValues() {
    values = state.values;
    // Render your values to the UI however you see fit
}

This is a very brief intro here and I would encourage you to carefully read the docs on this stuff before publishing it to a production-ready site.

Hope this helps && good luck!

Answer 2

If you want to set value for a select input you just need to set the desired option as selected:

var myValue = "<?php echo $_POST['tonnage'];?>";
$("#tonnage option").each(function(){
   if($(this).val()===myValue)
     $(this).prop('selected',true);
});

another way as mentioned in this answer:

var myValue = "<?php echo $_POST['tonnage'];?>";
$("#tonnage").val("val2");

An important point is that when you clone some part and append it again, some elements appear to have duplicate id. for example tonnage id is duplicate. It may cause misunderstanding.

Answer 3

So after submission, you already have the data in your $_POST.

Now you just loop through the $_POST arrays and create all the select & input field rows beforehand.

I am guessing you are already doing that, and your problem is with populating the data in them.

# Set a json array variable.
var tonnages = <?php echo json_encode($_POST['tonnage']) ?>;
var tablesize = ...
# Do the same for others...

# Now just loop through the select fields.
$("select[name='tonnage[]']").each(function(i, el) {
    $(el).val(tonnages[i]);
});

$("select[name='tablesize[]']").each(function(i, el) {
    ...
});
# Do the same for others...

Hope this helps.

Answer 4

Value of all dynamic fields will remain if you submit code asynchronously as below code.

    $().ready(function () {
        $('form').submit(function () {
            $.post($(this).attr('action'), $(this).serialize(), function (result) {
                console.log(result);
            });
            return false;
        });
    });

Answer 5

I think you need to have all dynamic fields along with selected values even after you submit the form, you can follow below steps to achieve the same:

1. Load the form and generate the dynamic fields (you already did it)
2. Post the form and save it in server (using PHP/MySQL or other server scripts)
3. Load form in edit mode where you get the saved data from database and based upon that, you can generate the dynamic fields on load as you already have all data from database

Let me know if it helps.