Dynamic generated fields and data remain after sending

Question

I am working on a form where I have dynamic fields, where I can add and remove input and output fields.

My problem is that I do not know how to add the fields that I add, and the data in these fields remains after sending.

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

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

here is my sample code.

BOOTPLY

Hope you help me, thanks.

Answer 1

Assuming that you do not want to configure the server to store this information, you have only a few options. In particular, client-side storage. I’ll talk about localStorage as it’s easiest to use, and you mentioned it above.

Here's the localStorage API . If you think the interface is too complicated, I would recommend reading it, possibly with a tutorial (Personally, I think that Mozilla Docs should be better, but this question seems more applicable to your application).

In short, you will use 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, and then adding the specified 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 to get the state when the user returns your site.

 // 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 introduction here, and I would advise you to carefully read the documents on this material before publishing it on a production site.

Hope this helps && good luck!

Answer 2

If you want to set the value for the 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 mentioned in this answer :

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

The important point is that when you clone some part and add it again, some elements have a duplicate id . for example, tonnage id is duplicated. This may cause confusion.

Answer 3

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

Now you just scan the $_POST arrays and create all rows of the select and input fields in advance.

I assume that you are already doing this, and your problem is filling in 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

The value of all dynamic fields will remain if you pass the code asynchronously, as shown below.

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

Answer 5

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

• Download the form and create dynamic fields (you've already done this)
• Submit the form and save it on the server (using PHP / MySQL or other server-side scripts)
• Download the form in edit mode, where you get the saved data from the database and based on this you can create dynamic fields at startup, since you already have all the data from the database.

Let me know if this helps.