mailto - Emailtext vor dem Absenden per JS bearbeiten/verschönern
Hi
ich habe ein Formular mit Input-Feldern, deren Eingaben per Email verschickt werden sollen. Das Formular wird per c# generiert und ist lokal als html verfügbar (hier kein php möglich). Grundsätzlich funktioniert das Ganze.
Die Namen der Felder und deren Inhalte werden jedoch hintereinander im body eingefügt. Der Übersichtlichkeit wegen, sollen diese jedoch zeilenweise im Body stehen. Darüber hinaus soll noch ein kurzer Text angehängt werden. Die Idee wäre es, vor dem submit noch den Body per jQuery zu bearbeiten. Suche hierzu einen Lösungsansatz.
PS: Bei den Versuchen funktionierte eine Parameterlänge von ca. 1000 Zeichen (Outlook). Ist diese Beschränkung vom Emailprogramm abhängig, das mit mailto gestartet wird? Im Internet gibt es Angaben von 255....ca. 2000.
Lösungsvorschlag von AndreasB
Der hier verwendete Code
<form id="mail-form" action="mailto:x@y.z">
<label>Body:<br><textarea name="body" cols="30" rows="10">Test Body</textarea></label><br>
<label>Add to Body 1:<br><input name="bodyAdditional1" type="text" value="Reihe 1"></label><br>
<label>Add to Body 2:<br><input name="bodyAdditional2" type="text" value="Reihe 2"></label><br>
<button>Send</button>
</form>
<script>
const mailFormElement = document.querySelector('#mail-form');
function onMailFormSubmit(evt) {
// Zuerst sorgen wir dafür, dass der Formular nicht abgeschickt wird.
evt.preventDefault();
// Dann erzeugen wir aus dem Fromular ein FormData Objekt.
const formData = new FormData(mailFormElement);
// Dann holen wir den Body text und die texte aus den Zusatzfeldern.
const bodyText = formData.get('body');
const bodyAdditional1Text = formData.get('bodyAdditional1');
const bodyAdditional2Text = formData.get('bodyAdditional2');
// Hier säubern wir die FormData um nur das nötigste an den MailClient zu schicken.
formData.delete('bodyAdditional1');
formData.delete('bodyAdditional2');
// Hier erstellen wir den Neuen Body Text und schreiben ihn zurück in die FormData.
// Das newline Zeichen (\n) wird später zu einer Entity, die der Client interpretieren kann.
const newBody = `${bodyText}\n${bodyAdditional1Text}\n${bodyAdditional2Text}`;
formData.set('body', newBody);
// heri erzeugen wir die URI aus der Formaction und dem Query String.
const queryString = new URLSearchParams(formData).toString().replace(/\+/g, '%20');
const url = `${mailFormElement.action}?${queryString}`
// Zum Schluss schicken wir das Formular mit Hilfe von window.href ab.
window.location.href = url;
}
// Als erstes registrieren wir einen Eventhandler für das Submit Event auf dem Formular.
mailFormElement.addEventListener('submit', onMailFormSubmit);
</script>