У меня есть div (форма), который появляется, когда вы нажимаете кнопку, мне нужно, чтобы jquery сохранял информацию формы. По техническим причинам я не могу использовать PHP, поэтому я обратился к localStorage, который кажется простым, но не очень хорошо работает с моим кодом:
$(document).ready(function(){
var i = 5;
$('.addbox').click(function(){
$('.formdiv').removeClass('formdiv');
$('#formulaire').addClass('formdivdisplay');
});
$('#submit').click(function(){
var titre = $('#titleform').val();
var chemin = $('#chemin').val();
var name = $('#name').val();
var statue = $('#statue').val();
var side = $('#select').val();
localStorage.setItem('titre', titre);
localStorage.setItem('chemin', chemin);
localStorage.setItem('name', name);
localStorage.setItem('statue', statue);
localStorage.setItem('side', side);
i = i + 1;
});
function drawBox(){
var block = '<div class="boxindex'+ i +'"><h1 class="boxtitle animated fadeInUp delay-500ms">'+ localStorage.getItem('titre') +'</h1></div>';
localStorage.setItem('block', block);
$('.container').append(localStorage.getItem('block'));
}
});
HTML-код:
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>Bienvenue sur SAKADO</title>
<!-- Styles -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="scripts/app.js"></script>
<link rel="stylesheet" href="styles/index.css">
<link rel="stylesheet" href="styles/nouvelleoutils.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,700|Space+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<script defer src="https://friconix.com/cdn/friconix.js"></script>
</head>
<body>
<!--design-->
<div id="left"></div>
<div id="right"></div>
<div id="top">
<h1 class="h1 animated fadeInRight">SAKADO</h1>
<div class="divheader">
<a class="a1 active" href="home.html">Accueil</a>
<a class="a2" href="demande.html">Demandes</a>
<a class="a3" href="utilisation.html">Utilisation</a>
</div>
</div>
<div id="bottom">
<div class="addbox"><i class="fi-xwsuxl-plus-solid"></i></div>
</div>
<!--design-->
<div id="page">
<p class="tlegend">Les textes en <span class="Svert">Vert</span> sont les chemins d'accès, en <span class="Sorange">Orange</span> des informations importantes.</p>
<!--Box glossaire-->
<div class="container">
<div class="box">
<h1 class="boxtitle animated fadeInUp delay-500ms">Glossaire du CSG</h1>
<p class="Sbleu statue">Public</p>
<p class="Svert links "><a class="Svert">V:\Operations\GLOSSAIRE ver07-00 du 071212.pdf</a></p>
<a class="boxbtn" href="docs/GLOSSAIRE ver07-00 du 071212.pdf" target="_blank">Obtenir</a>
</div>
<!--Box Site Survey DDO-->
<div class="boxindex2">
<h1 class="boxtitle animated fadeInUp delay-500ms">Site Survey DDO</h1>
<p class="Srouge statue">Privée</p>
<p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_Site Survey\site survey DDO presentation générale.pptx</a></p>
<a class="boxbtn" href="docs/site survey DDO presentation générale.pptx" target="_blank">Obtenir</a>
</div>
<!--OLC modele Galileo-->
<div class="boxindex3">
<h1 class="boxtitle animated fadeInUp delay-500ms">Modèle OLC Galileo</h1>
<p class="Srouge statue ">Privée</p>
<p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_OLC modèle\OLC - VA244 GALILEO FOC-M8 1-3.docx</a></p>
<a class="boxbtn" href="docs/OLC - VA244 GALILEO FOC-M8 1-3.docx" target="_blank">Obtenir</a>
</div>
<!--Modele DM Galileo-->
<div class="boxindex4">
<h1 class="boxtitle animated fadeInUp delay-500ms">Modèle DM Galileo</h1>
<p class="Srouge statue ">Privée</p>
<p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_DM et SC activities 2018\VA244_GALILEO FOC Daily-meeting OPS_OHB_2018-06-21.docx</a></p>
<a class="boxbtn" href="docs/VA244_GALILEO FOC Daily-meeting OPS_OHB_2018-06-21.docx" target="_blank">Obtenir</a>
</div>
<!--Modele M8 Galileo-->
<div class="boxindex5">
<h1 class="boxtitle animated fadeInUp delay-500ms">Modèle M8 Galileo</h1>
<p class="Srouge statue ">Privée</p>
<p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_DM et SC activities 2018\VA244-GALILEO FOC M8 -- DM One.docx</a></p>
<a class="boxbtn" href="docs/VA244-GALILEO FOC M8 -- DM One.docx" target="_blank">Obtenir</a>
</div>
<!--Box "A INSERER"
<div class="boxindex6">
<h1 class="boxtitle animated fadeInUp delay-500ms">"À INSÉRER"</h1>
<p class="statue ">Privée / Public</p>
<p class="Svert links "><a class="Svert">\\</a></p>
<p class="Sorange impt "></p>
<a class="boxbtn" href="docs/" target="_blank">Obtenir</a>
</div>-->
</div>
</div>
<!--Formulaire-->
<div class="formdiv" id="formulaire">
<form>
<h1 id="h1form">Ajouts d'Outils</h1>
<label for="title">Titre de l'outil</label>:<input type="text" id="titleform" name="title"><br /><br />
<label for="title">Entrez le chemin du nouvelle Outil</label>:<input type="text" id="chemin" name="chemin"><br /><br />
<label for="title">Entrez le nom.lextension du fichier</label>:<input type="text" id="name" name="name"><br /><br />
<label for="title">Entrez le Statue de votre Outil</label>:<input type="text" id="statue" name="statue"><br /><br />
<label for="title">Affichage de l'Outil</label>:<select id="select" name="side" form="side">
<option value="droite">Droite</option>
<option value="gauche">Gauche</option>
</select><br /><br />
<input id="submit" type="submit" value="envoyer">
</form>
</div>
</body>
</html>
IЖаль, что когда пользователь нажимает на кнопку «Проверить локальное хранилище» всю эту информацию, а затем выводит код html и css (позже) с данными, которые он только что ввел, и чтобы html-код явно оставался на странице бесконечно долго.
Спасибовы.