I am trying to save some html structure with the values selected and all.
<select id="select-options-beneficiaries" aria-describedby="selector2">
<option selected value="Jhon Doe">Jhon Doe</option>
<option value="Jane Doe">Jane Doe</option>
<option value="New Beneficiary">New Beneficiary</option>
</select>
I am saving this piece of block like this:
var htmlBeneficiariesData = document.getElementById('select-options-beneficiaries').innerHTML;
sessionStorage.setItem('htmlBeneficiariesData', htmlBeneficiariesData);
Now when I try to retrieve the information and prepend it, it doesn't save up the selected value or the values saved in the input.
var sessionBeneficiariesData = sessionStorage.getItem('htmlBeneficiariesData');
$('#plan-beneficiaries-container').prepend(sessionBeneficiariesData);
Is there a way to save the HTML structure including selected values and inputs?
Why do I need to do this? Well, for instance the html is created using JS, so when a button is clicked it creates new HTML like the one above.
So every time you click on the button, a new select and input will be generated. After you finish filling out all the information from the fields that were generated by JS, you go to the next page, and then when you try to go back, the information (HTML and values) are lost (because it was generated by clicking the button) and why this was done this way? Why I cannot change it? because the UX team design it like this.
I do not know what you have for problems ;) For sure that can be done ! It is JAVASCRIPT !!! Everything is possible - even maybe not sense full all the time. This here will do the trick. But for sure that is not elegant nor advised. just for the fun.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<select id="select-options-beneficiaries" aria-describedby="selector2" onchange="silly();">
<option selected value="Jhon Doe">Jhon Doe</option>
<option value="Jane Doe">Jane Doe</option>
<option value="New Beneficiary">New Beneficiary</option>
</select>
<br><br>
<textarea id="x" style="width:800px; height:200px;"></textarea>
<script>
function silly() {
value = document.getElementById("select-options-beneficiaries").value;
console.log(value);
options = document.getElementById("select-options-beneficiaries").childNodes;
var HTML = '<select id="select-options-beneficiaries" aria-describedby="selector2">\n';
for (i = 0; i < options.length; i++) {
var o = options[i].outerHTML;
if (o) {
var test = 'value="' + value + '"';
var x = o.indexOf(test);
o = o.replace(' selected=""', '');
if (o.indexOf(test) > -1) {
o = o.replace('value="', 'selected ' + 'value="');
}
HTML = HTML + o + "\n"
}
}
HTML = HTML + "</select>"
sessionStorage.setItem('htmlBeneficiariesData', HTML);
document.getElementById("x").value=sessionStorage.getItem('htmlBeneficiariesData');
}
silly();
</script>
</body>
</html>
if you want to use your code this here might work also after your html add apiece script first before you save get the selection
value = document.getElementById("select-options-beneficiaries").value;
now add as string to your innerHTML this
'<script>document.getElementById("select-options-beneficiaries").value="'+value+'";</script>\n"
You first will pump now the html with the wrong settings first and correct it afterwards by this piece of code.
The normal way would just store all the form values and recreate all the form values by the saved datas. Usually stored as json object and later on applied by javascript.
This here will put your whole form into a URL Object for example. I use it for POST requests to transmit form datas. With decodeURIComponent you will get the values back and can apply all of them to your form. Or change the decodeURIComponent part to your needs.
function serialize(form) {
if (!form || form.nodeName !== "FORM") {
return;
}
var i, j, q = [];
for (i = form.elements.length - 1; i >= 0; i = i - 1) {
if (form.elements[i].name === "") {
continue;
}
switch (form.elements[i].nodeName) {
case 'INPUT':
switch (form.elements[i].type) {
case 'text':
case 'tel':
case 'email':
case 'hidden':
case 'password':
case 'button':
case 'reset':
case 'submit':
q.push(form.elements[i].name + "=" +
encodeURIComponent(form.elements[i].value));
break;
case 'checkbox':
case 'radio':
if (form.elements[i].checked) {
q.push(form.elements[i].name + "=" +
encodeURIComponent(form.elements[i].value));
}
break;
}
break;
case 'file':
break;
case 'TEXTAREA':
q.push(form.elements[i].name + "=" +
encodeURIComponent(form.elements[i].value));
break;
case 'SELECT':
switch (form.elements[i].type) {
case 'select-one':
q.push(form.elements[i].name + "=" +
encodeURIComponent(form.elements[i].value));
break;
case 'select-multiple':
for (j = form.elements[i].options.length - 1; j >=
0; j = j - 1) {
if (form.elements[i].options[j].selected) {
q.push(form.elements[i].name + "=" +
encodeURIComponent(form.elements[i].options[j].value));
}
}
break;
}
break;
case 'BUTTON':
switch (form.elements[i].type) {
case 'reset':
case 'submit':
case 'button':
q.push(form.elements[i].name + "=" +
encodeURIComponent(form.elements[i].value));
break;
}
break;
}
}
return q.join("&");
}
Have fun :)