javascript - Dynamic generated fields and data remain after submission -

i'm working on form have dynamic fields can add , remove input , drop down fields.

my problem don't know how make fields add , data on fields remain after submission.

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

i tried code select tag remain values didn't work.

here sample code.

bootply

i hope can me, thanks.

assuming don't want set server store info, you're left few options here. specifically, client-side storage. i'll cover localstorage it's easiest use , you've mentioned above.

here's localstorage api. if believe interface complicated, recommend giving read through, perhaps along tutorial (personally believe mozilla docs better tut looks more applicable application).

in short, making use of setitem(...) , getitem(...) methods.

localstorage.setitem("my test key", "my test value");

console.log(localstorage.getitem("my test key")); // --> test value

so, application, recommend creating object store values in , appending said object localstorage.

var state = {} // values form feel fit values = getvalues(...); function setvalues(values) {     // values want save     state.values = values     // continues other values want set...    } // save values localstorage localstorage.setitem("application_state", state); 

now retrieving state when user comes website.

// application_state null if have not set state before var state = localstorage.getitem("application_state") || {}; function updatevalues() {     values = state.values;     // render values ui see fit } 

this very brief intro here , encourage read docs on stuff before publishing production-ready site.

hope helps && luck!