générer un xml à partir d'un formulaire html

Version imprimable

08/04/2022, 20h41
Casper17

générer un xml à partir d'un formulaire html

Bonjour,
j'ai un fichier xml avec des balises autofermante, d'autre ouvrante puis fermante, avec des attributs dedans etc.
Je vais créer un formulaire en html qui permettra d'avoir les données qui viendront compléter le xml.

ensuite via un bouton ça nou généreré le fichier xml sans avoir besoin d'internet, de php etc...

j'ai trouvé une petite piste mais, je ne vois pas comment pouvoir renseigner les attributs des balises et, les valeurs à l'intérieur des balises. voilà ma piste : https://jsfiddle.net/jmusfs9v/3/ (le code n'est pas de moi)

merci à tous de votre aide
10/04/2022, 09h21
Dave Hiock
\ô/

Citation:

j'ai trouvé une petite piste mais, je ne vois pas comment pouvoir renseigner les attributs des balises et, les valeurs à l'intérieur des balises.

pourrais-tu préciser car visiblement on obtient bien ce que tu souhaites
Code:

1 2 3 4 5 <?xml version="1.0"?> <form> <element name="firstname" value="Prénom"></element> <element name="lastname" value="Nom"></element> </form>
10/04/2022, 10h58
Casper17

Bonjour Dave,
En faite il faudrait que je puisse renseigner les attributs et également entre balise ouvrantes et fermantes.
10/04/2022, 11h20
mathieu

pour mettre le texte à l'intérieur d'une balise, vous pouvez utiliser ça :

Code:

el.appendChild(document.createTextNode(inputs[i].value));

regardez là pour d'autres exemples de codes :
https://www.w3schools.com/js/js_htmldom_nodes.asp
10/04/2022, 12h03
Casper17

Merci Matthieu cette piste est intéressante.
Il va falloir que j'essaie d'articuler tout ça.
Mes notions en JS étant limitées je vais aussi devoir monter en compétences sur le sujet. Je suis preneur de conseils ☺️

\ô/
si je comprend bien tu veux récupérer ce format

Code:

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0"?>
<form>
  <element>
    <name>firstname</name>
    <value>Prénom</value>
  </element>
  <element>
    <name>lastname</name>
    <value>Nom</value>
  </element>
</form>

Il n'est pas utile de créer un élément pour récupérer tes données, tu peux en faire directement la lecture

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function convertToXml(form) {
  const indent = '  ';
  const champs = ['id', 'type', 'name', 'value']; // les champs à récupérer
  const xmldata = ['<?xml version="1.0"?>'];
  xmldata.push("<form>");
 
  const elements = form.querySelectorAll('input[name]');  // les éléments à traiter
  for (let elem of elements) {
    xmldata.push(indent + '<element>');
    champs.forEach((champ) => {
      d = elem.getAttribute(champ) || elem[champ] || 'undefined';
      xmldata.push(indent + indent + '<' + champ + '>' + d + '</' + champ + '>');
    })
    xmldata.push(indent + '</element>');
  }
  xmldata.push('</form>');
  return xmldata.join('\n');
}

10/04/2022, 16h22
Casper17

Merci beaucoup Dave,
Alors c'est ce que je veux faire mais en plus pouvoir aussi écrire les attributs ici "batch". les valeurs (kiki et batch) seront récupéré à partir des données du formulaire HTML.
<name batch="168"> kiki </name>.
Le fichier XML pourra être ensuite télécharger et nommé depuis la page HTML. C'est une utilisation en hors ligne.
Si je ne suis pas clair je vais prendre le temps de faire un cahier des charges de tout ça tout à l'heure en rentrant.

En gros je souhaite faire ceci : https://codepen.io/jon-walstedt/pen/AeeBXV
mais, généré le fichier XML à la fin :)

Encore merci