Estoy desesperado (y nuevo en JS, aunque estoy en constante aprendizaje).
Estoy haciendo un 'generador de correo electrónico' que permite a través de 'mailto' abrir el administrador de correo y generar el envío de un correo electrónico. A largo plazo y cuando mi proyecto esté terminado, me permitirá ahorrar tiempo en el trabajo en el envío de correos.
El único problema es que tengo un campo dinámico para insertar y no se tiene en cuenta. Me gustaría poder agregar tantos campos como quiera en el formulario y que todo el contenido de los campos se encuentre en el correo electrónico. El código que tengo está en la parte inferior del asunto.
Intenté agregar los elementos haciendo form.name.value pero solo tengo en cuenta el primer elemento. También intenté, en la función ajouterInput_text () , agregar una var que tenga en cuenta cada nuevo elemento agregado en el formulario, pero nada funciona ...
Si tienes una idea, soy un pionero y, al mismo tiempo, ¡me permitirá aprender más!
Gracias de antemano !
B4LBU
PD: quiero tener solo un archivo html y no pasar por 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>No estoy seguro de lo que está construyendo ... espero que esto pueda ayudar:
<form>type=button (ya que son "enviar" por defecto)on* solo cuando cree elementos completamente nuevos a partir de la memoria. 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>