<form action="" method="POST">
<div class="uk-flex-column">
<label for="entry">Сообщение *: </label>
<div class="item-block">
<textarea name="entry" id="entry" required="required" rows="7" onkeyup="commFns.countChars.call(this, $('#maxLen')[0], event)"></textarea>
</div>
</div>
<div>
<!-- <div class="min700 name">Имя : </div> -->
<label for="name">Имя</label>
<input type="text" class="item-block" name="name" id="name" value="" placeholder="Имя">
</div>
<div>
<label for="email">Почта * (для обратной связи) : </label>
<input type="text" class="item-block" required="required" name="email" id="email" value="" placeholder="email">
</div>
<div class="right uk-margin">
<input id="c_subm" type="button" class="button uk-width-expand" value="Добавить">
</div>
<h6 class="uk-margin-remove uk-text-center uk-h4">По желанию:</h6>
<!-- <p style="margin: 0;text-align: center;" class="bold">По желанию:</p> -->
<div class="uk-flex-wrap uk-flex-between">
<div>
<label for="tg" class="uk-width-1-3 uk-display-inline-block">Телеграм</label>
<input type="text" class="item-block" name="tg" id="tg" value="" placeholder="@NicName">
</div>
<div>
<label for="Site" class="uk-width-1-3 uk-display-inline-block">Сайт</label>
<input type="text" class="item-block" name="Site" id="Site" value="" placeholder="http://site.net">
</div>
<div>
<label for="CMS" class="uk-width-1-3 uk-display-inline-block">CMS</label>
<input type="text" class="item-block" name="CMS" id="CMS" value="">
</div>
</div>
</form>
<hr>
<h1>TEST</h1>
<button onclick="F.save()">Сохранить</button>
<button onclick="F.restore()">Восстановить</button>
var F={
save: ()=>{
var form= document.querySelector('form'),
formData = [].reduce.call(form.querySelectorAll('input,select,textarea'), (a,c)=>{
if(!c.name) return a;
a[c.name]= [c.tagName, c.value, c.placeholder];
return a;
}, {});
localStorage.setItem('myForm', JSON.stringify(formData));
// console.log(localStorage.getItem('myForm'));
form.remove();
},
restore: ()=>{
var fNode= document.createElement('form'),
form= JSON.parse(localStorage.getItem('myForm'));
Object.keys(form).forEach(i=>{
var node= document.createElement(form[i][0]);
fNode.append(node);
node.name= i;
node.value= form[i][1];
node.placeholder= form[i][2];
});
document.body.append(fNode);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.