Creation formulaire hors ligne avec enregistrement en local

**Sergeras** · 18/01/2018, 18h37

Bonjour amis développeurs,

Je suis assez novice dans le Html, donc ma question pourra vous paraître étrange ou stupide,
Mais voilà... J'ai un questionnaire à demander à mes clients (des infos sur leurs projets).

Je souhaiterais passer par du html (car simple, facile, fiable et surtout tout le monde à IE).
Ca évite les pdf excel et autres merdouilles qui ne marche pas chez tout le monde.

Bref, est-il possible d'enregistrer les champs de formulaire sur un fichier texte ou autre.
Genre quand je clique sur submit, ca ouvre la boite de dialogue pour me dire à quel emplacement enregistrer le formulaire.
Puis ca enregistre en format texte ou autre (tout bête) type : nom=.... Prénom=.... ect...

Simplement savoir si c'est possible m'aiderais déjà bcp. Car ca fait déjà quelques jours que je galère.

Merci à vous,
Et bon dev.

**mathieu** · 18/01/2018, 22h11

c'est possible de proposer le téléchargement d'un fichier généré en JavaScript.
cela peut se faire avec ce code par exemple :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// données
 
var contenu = "azérty123";
var typeContenu = "text";
var nomFichier = "sauvegarde " + (new Date()).toLocaleString() + ".txt";
 
 
// lancement du téléchargement
 
var lien = document.createElement("a");
 
document.body.appendChild(lien);
 
lien.href = "data:" + typeContenu + "," + encodeURIComponent(contenu);
lien.download = nomFichier;
lien.click();

si vous avez besoin d'aide pour continuer sur cette voie, il y a un forum JavaScript qui pourra vous aider :
https://www.developpez.net/forums/f2...rt/javascript/

**Sergeras** · 19/01/2018, 08h54

Yes, merci Mathieu pour ton aide.

Bon pour les noobs comme moi,
Voici le code complet à utiliser (dans le bloc note puis l'enregistrer en format .html)
Ca permet d'avoir une bonne base pour commencer et pour tester.

Encore merci Mathieu !!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title>Formulaire</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <script type="text/javascript">
  <!--
  //-->
  </script>
</head>
<body>
<form>
        <h1>Formulaire</h1>
        <p>
            <label for="pseudo">Pseudo</label> :
            <input type="text" name="pseudo" id="pseudo" required>
            <span id="aidePseudo"></span>
        </p>
        <p>
            <label for="mdp">Mot de passe</label> :
            <input type="password" name="mdp" id="mdp" required>
            <span id="aideMdp"></span>
        </p>
        <p>
            <label for="courriel">Courriel</label> :
            <input type="email" name="courriel" id="courriel" required placeholder="utilisateur@domaine.fr">
            <span id="aideCourriel"></span>
        </p>
        <p>
            <input type="checkbox" name="confirmation" id="confirmation">
            <label for="confirmation">M'envoyer un courriel de confirmation</label>
        </p>
        <p>
            <input type="radio" name="abonnement" id="abonewspromo" value="abonewspromo">
            <label for="abonewspromo">M'abonner à la newsletter et aux promotions</label>
            <br>
            <input type="radio" name="abonnement" id="abonews" value="abonews">
            <label for="abonews">M'abonner uniquement à la newsletter</label>
            <br>
            <input type="radio" name="abonnement" id="aborien" value="aborien" checked>
            <label for="aborien">Ne pas m'abonner</label>
            <br>
        </p>
        <p>
            <label for="nationalite">Nationalité :</label>
            <select name="nationalite" id="nationalite">
                <option value="FR" selected>Française</option>
                <option value="BE">Belge</option>
                <option value="SUI">Suisse</option>
                <option value="XX">Autre</option>
            </select>
        </p>
        <input type="submit" value="Envoyer" onclick="fCreation_Fichier(this)">
        <input type="reset" value="Annuler">
    </form>
 
<script type="text/javascript">
  <!--
function fCreation_Fichier(f) {
var r_pseudo = "pseudo="+document.getElementById("pseudo").value;
var r_mdp = "mdp="+document.getElementById("mdp").value;
var r_courriel = "courriel="+document.getElementById("courriel").value;
var r_confirmation = "confirmation="+document.getElementById("confirmation").value;
var r_abonewspromo = "abonewspromo="+document.getElementById("abonewspromo").value;
var r_nationalite = "nationalite="+document.getElementById("nationalite").value;
var typeContenu = "text";
var nomFichier = "sauvegarde " + (new Date()).toLocaleString() + ".txt";
 
// lancement du téléchargement
 
var lien = document.createElement("a");
 
document.body.appendChild(lien);
lien.href = "data:" + typeContenu + "," + encodeURIComponent(r_pseudo + "\r\n" + r_mdp + "\r\n" + r_courriel + "\r\n" + r_confirmation + "\r\n" + r_abonewspromo + "\r\n" + r_nationalite);
lien.download = nomFichier;
lien.click();
 
 
}
  //-->
  </script>
</body>
</html>

Creation formulaire hors ligne avec enregistrement en local

HTML

Vue hybride

Discussions similaires

Partager

Partager