Estoy trabajando en un formulario donde tengo campos dinámicos donde puedo agregar y eliminar campos de entrada y desplegables.
Mi problema es que no sé cómo hacer que los campos que agrego y los datos de esos campos permanezcan después del envío.
<script type="text/javascript"> document.getElementById('tonnage').value = "<?php echo $_POST['tonnage'];?>"; </script>Probé este código para que la etiqueta de selección siguiera siendo los valores, pero no funcionó.
aquí está mi código de muestra.
Espero que me puedas ayudar, gracias.
Suponiendo que no desea configurar un servidor para almacenar esta información, solo le quedan algunas opciones aquí. Específicamente, almacenamiento del lado del cliente. localStorage ya que es el más fácil de usar y lo mencionaste anteriormente.
Aquí está la API de almacenamiento local. Si cree que la interfaz es demasiado complicada, recomendaría leerla, tal vez junto con un tutorial (Personalmente, creo que Mozilla Docs es mejor, pero este tutorial parece más aplicable a su aplicación).
En resumen, utilizará los setItem(...) y getItem(...) .
localStorage.setItem("My test key", "My test value");
console.log(localStorage.getItem("My test key")); // --> My test value
Entonces, para su aplicación, recomendaría crear un objeto para almacenar sus valores y luego agregar dicho objeto a 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);Ahora para recuperar el estado cuando el usuario regresa a su sitio web.
// 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 }Esta es una introducción muy breve aquí y lo animo a leer detenidamente los documentos sobre este material antes de publicarlo en un sitio listo para producción.
¡Espero que esto ayude, buena suerte!
Si desea establecer un valor para una entrada select , solo necesita establecer la option deseada como selected :
var myValue = "<?php echo $_POST['tonnage'];?>"; $("#tonnage option").each(function(){ if($(this).val()===myValue) $(this).prop('selected',true); });otra manera como se menciona en esta respuesta :
var myValue = "<?php echo $_POST['tonnage'];?>"; $("#tonnage").val("val2"); Un punto importante es que cuando clona alguna parte y la agrega nuevamente, algunos elementos parecen tener una id duplicada. por ejemplo, la identificación del tonnage está duplicada. Puede causar malentendidos.
Entonces, después del envío, ya tiene los datos en su $_POST .
Ahora simplemente recorre las matrices $_POST y crea todas las filas de campo de select e input de antemano.
Supongo que ya lo está haciendo, y su problema es completar los datos en ellos.
# 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...Espero que esto ayude.