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:ADRESSEMAIL@MAIL.FR?subject=AJOUT DE CHAMP &body=Bonjour%0D%0D" +
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>Not sure what you're building... hopefully this might help:
<form>type=button (since are "submit" by default)on* handlers only when creating brand new elements from in-memory.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 = "ADRESSEMAIL@MAIL.FR";
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>