How to add all the elements of a dynamic field from a form in an email?-CodePudding

I am desperate (and new to JS, although I am constantly learning).

I am doing an 'email generator' which allows via 'mailto' to open the mail manager and generate the sending of an email. In the long term and when my project is finished, it will allow me to save time at work in sending emails.

The only problem is that I have a dynamic field to insert and it is not taken into account. I would like to be able to add as many fields as I want in the form and that all the content of the fields is found in the email. The code I have is at the bottom of the subject.

I tried adding the elements by doing form.name.value but I only have the first element taken into account. I also tried, in the ajouterInput_text () function, to add a var which takes into account each new element added in the form but nothing works ...

If you have an idea, I'm a pioneer, and at the same time, it will allow me to learn more!

Thank you beforehand !

B4LBU

P.S. I want to have only one html file and not go through php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>AJOUT DE CHAMPS</title>
  </head>

  <!-- FORMULE POUR ENVOI DU MAIL -->
  <script language="javascript">
    function envoyer(formulaire) {
      window.location.href =
        "mailto:[email protected]?subject=AJOUT DE CHAMP &body=Bonjour

"  
        totalchampenplus  
        "";
    }
  </script>

  <body>
    <form name="formulaire" action="" method="post" enctype="text/plain">
      <div id="container">
        <button onclick="ajouterInput_text()">Ajouter un champ texte</button>
        <br />
      </div>

      <!-- AJOUT DU CHAMPS EN PLUS-->
      <script>
        var totalchampenplus = "";
        var id = 0;
        function ajouterInput_text() {
          id  ;
          var container = document.getElementById("container");
          var input = document.createElement("input");
          input.setAttribute("type", "text");
          input.setAttribute("id", id);
          input.setAttribute("name", "champenplus");
          input.setAttribute("placeholder", "Champ n°"   id);
          container.appendChild(input);
          container.innerHTML  = "<br>";
          totalchampenplus =
            totalchampenplus   ", "   document.getElementById(id).innerHTML;
        }
      </script>

      <br />
      <button
        type="submit"
        class="btn btn-outline-success"
        onclick="envoyer(this.form)"
      >
        ENVOYER
      </button>
    </form>
  </body>
</html>

CodePudding user response：

Not sure what you're building... hopefully this might help:

You don't need a <form>
Buttons should be of type=button (since are "submit" by default)
Use addEventListener(). Always. Use on* handlers only when creating brand new elements from in-memory.
Don't destroy your existent fields content.
Iterate your elements and get their values using Array.map() and than Array.join() using your desired delimiter
Use encodeURIComponent

const EL = (sel, PAR) => (PAR || document).querySelector(sel);
const ELS = (sel, PAR) => (PAR || document).querySelectorAll(sel);
const ELNew = (tag, prop) => Object.assign(document.createElement(tag), prop);
const enc = (str) => encodeURIComponent(str);

const EL_fields = EL("#fields");
const EL_add = EL("#add");
const EL_send = EL("#send");

function send() {

  const MAIL = "[email protected]";
  const SUBJ = "AJOUT DE CHAMP";
  let   body = "Bonjour ";
  body  = [...ELS(".field", EL_fields)].map((EL) => EL.value).join("\n");
  
  const href = `mailto:${MAIL}?subject=${enc(SUBJ)}&body=${enc(body)}`;
  
  console.log(href);
  location.href = href; 
}

function add() {
  const EL_input = ELNew("input", {
    type: "text",
    className: "field"
  });
  EL("#fields").append(EL_input);
  EL_input.focus();
}

EL_add.addEventListener("click", add);
EL_send.addEventListener("click", send);

#fields { display: flex; flex-flow:column;}
.field { margin: 3px 0; }

<div id="fields"></div>
<button id="add" type="button">Ajouter</button>
<button id="send" type="button">ENVOYER</button>