• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

JS Formular via mailto versenden

vierkant

New member
Hallo!
Ich habe ein paar Textfelder dessen Inhalt würde ich gerne via mailto versenden! Leider hab ich keinen Plan wie ich das anstelle!

Hier mal mein bisheriger Code:

Code:
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Online Produktberatung</title>
	<style type="text/css">
		/* das macht aus dem Cursor eine Hand im <select> */
		select{
			cursor: pointer;
		}
        #summe {
margin-left:300px;
}
	</style>
</head>
<body>
<div id="summe">
<input type="text" id="output" value="Ausgabe" readonly = true />
</div> <!-- Ende Gesamtsumme-->

<p>Wieviele Seiten soll ihre Webseite haben?<p>
</p>
<script>
	"use strict";
	function frageseitengroesse(ausw_obj,val) {
		var umfang = document.getElementById('Seitenumfang');
		var kosten = document.getElementById('Seitenumfangkosten');
		if (val == 'Basic') {
			umfang.value = 'Basic';
			kosten.value = '420';
		}
		
		if (val == 'Premium') {
			umfang.value = 'Premium';
			kosten.value = '490';
		}
        if (val == 'Visitenkarte') {
			umfang.value = 'Visitenkarte';
			kosten.value = '200';
		}

		// das Folgende ist sinnvoll, wenn diese Auswahl ein Pflichtfeld ist, denn sie
		// verhindert, dass der Benutzter zurück auf "bitte wählen" kann
		
		if (ausw_obj.options[0].value == '') {
			ausw_obj.options[0] = null;
		}
	}
</script>

<select onchange="frageseitengroesse(this,this.value);output.value = parseFloat(Seitenumfangkosten.value) + parseFloat(reskosten.value) + parseFloat(buchkosten.value) + parseFloat(newskosten.value) + parseFloat(kontaktkosten.value) + parseFloat(wetterkosten.value) + parseFloat(eventkosten.value) + parseFloat(bildkosten.value) + parseFloat(forumkosten.value) + parseFloat(buchungkosten.value) + parseFloat(immokosten.value) + parseFloat(mitglkosten.value) + parseFloat(tourkosten.value) + parseFloat(einsatzkosten.value) + parseFloat(facekosten.value) + parseFloat(twitterkosten.value) + parseFloat(googlekosten.value) + parseFloat(suppkosten.value);"style="width:150px";>
	<option value="">bitte wählen</option>
    <option value="Visitenkarte">1 Seite</option>
	<option value="Basic">weniger als 15 Seiten</option> 
	<option value="Premium">mehr als 15 Seiten</option> 
</select>  

<input type="text" id="Seitenumfang"readonly = true> 
<input type="text" id="Seitenumfangkosten" value="0"readonly = true /> €
<p>
</body>
</html>

Durch den klick auf einen Button sollte sich nun das Standard Mail Programm öffnen, eine neue Nachricht öffnen - meine E-mail Adresse einfügen, einen Betreff einfügen und als Nachricht der Inhalt der beiden Textfelder!

Ist das möglich? Bin Anfänger also seit bitte nachsichtig mit mir!

Lg Jürgen
 
Hallo Jürgen,

ja, das ist möglich. Du kannst nämlich mailto ein paar Informationen mitgeben, die im Mailclient landen sollen.

Das hier kennst Du ja:
<a href="mailto:m.mustermann@domain.de">E-Mail schreiben</a>

An zwei Empfänger ...
<a href="mailto:m.mustermann@domain.de,%20max.m@domain.de">E-Mail an zwei Personen schreiben</a>

Mit Betreff ...
<a href="mailto:m.mustermann@domain.de?subject=Hier%20steht%20der%20Betreff">E-Mail mit Betreff</a>

Mit sichtbarem CC ...
<a href="mailto:m.mustermann@domain.de?cc=max.m@example.org">E-Mail mit Kopie</a>

Mit blindem CC (= BCC) ...
<a href="mailto:m.mustermann@domain.de?bcc=max.m@example.org ">E-Mail mit Blindkopie</a>

Mit Nachricht ...
<a href="mailto:m.mustermann@domain.de?body=Hallo%20Max,%0D%0A%0D%0Ahier%20steht%20die%20Nachricht.">E-Mail schreiben</a>

Du wirst also Deine Wunschtexte vorgeben und die beiden Textfelder via JavaScript ergänzen.

Have fun!
 
Hallo! Danke erstmal! Ich hätte das jetzt so mal versucht:

Code:
<input type="button" value="Absenden"
      onclick=<a href="mailto:m.mustermann@domain.de?body=Seitenumfang.value & Seitenumfangkosten.value ";>

Natürlich hat das nicht funktioniert! Wie gehört den das richtig?

lg Jürgen
 
Nein, nein ... so natürlich nicht.

Zunächst Daten aus dem Select-Feld:
Gib dem Select 'ne ID - das macht es deutlich einfacher für Dich (ohne Dich jetzt mit [0]en zu nerven) - bspw.:

<select id="deineAuswahl" onchange="funktionIstToll()">...</select>

Die Information solltest Du via document.getElementById('deineAuswahl').value bekommen. Aber das ist JavaScript. Um es Dir simpel zu erklären, was da passiert, folgender Source:

Code:
<input type="button" value="Absenden-Test" onclick="alert( document.getElementById('deineAuswahl').value )" />

Damit das aber mit Deiner E-Mail passt, benötigst Du eine Funktion - das habe ich oben schon mit "funktionIstToll" für den anderen Teil angedeutet - macht es lesbarer wie auch übersichtlicher (statt Bandwurm-Sätze).

Demnach kommst Du an Deiner Felder eben am Bequemsten (und schnellsten) via ID.

Wer hat Dir das als Quellcode gegeben? Da sind doch ein paar kräftige Böcke drin ("readonly = true" gibt es nicht an der Stelle, die Verwendung meines Beispiel-Anchors als JavaScript, option.value wird Dir niemals was anzeigen etc.). Aber, sei tapfer! Ich habe hier schon SCHLIMMERES gesehen!!! :D

Um meine Beispiele oben zu verstehen, setzt Du diese mal einfach vor das schließende Body-Tag und klickst auf den Anchor, der bei Seitenaktualisierung zu sehen sein wird. Aber wirklich nur einen Beispiel-Anchor von mir oben ... nix dazu packen! Dann merkst Du schnell selbst, dass Du auf dem Holzweg bist und es nicht funktionieren kann.
 
Zuletzt bearbeitet:
Ja ok! So öffnet sich eine mesagebox:

HTML:
<input type="button" value="Absenden"
      <input type="button" value="Absenden-Test" onclick="alert( document.getElementById('Seitenumfangkosten').value )" />

Aber wie bau ich das jetzt auf mailto um?
 
allgemeiner Kommentar zum Arbeiten mit mailto.

mit mailto delegierst du die ganze Arbeit (mal abgesehen von den Vorgaben) an den Nutzer. d.h. der Nutzer braucht ein E-Mail-Programm (Outlook, Thunderbird), sonst geht gar nix. die Absenderadresse ist demzufolge die des Nutzers und manche Nutzer wollen halt nicht ihre Adresse für ein Webformular hergeben. und natürlich publizierst du damit auch deine eigenen E-Mail-Adresse.
 
Völlig korrekt bzgl. "mailto", Domilich!

Dass Du, vierkant, schon wieder komischen Source gemacht hast, ist Dir bewusst? Den alert() hast Du so von mir nicht bekommen!

Dein Vorgehen lautet:
- Button auf JavaScript Funktion zeigen lassen
- diese Funktion sammelt die Daten gem. alert()-Beispiel ein
- baut String für mailto zusammen
- übergibt String via location

Das dürfte gehen - viel Erfolg.
 
Doch schon:

Die Information solltest Du via document.getElementById('deineAuswahl').value bekommen. Aber das ist JavaScript. Um es Dir simpel zu erklären, was da passiert, folgender Source:

Code:
<input type="button" value="Absenden-Test" onclick="alert( document.getElementById('deineAuswahl').value )" />
Dein Vorgehen lautet:
- Button auf JavaScript Funktion zeigen lassen
- diese Funktion sammelt die Daten gem. alert()-Beispiel ein
- baut String für mailto zusammen
- übergibt String via location

Das dürfte gehen - viel Erfolg.
Versteh ich leider nur Bahnhof! Ist nun mein Projekt zum scheitern verurteilt?

Bin ja schon so weit das ich ein ganzes Formular erstellt habe. Nun sollen diese Informationen mir per mail übermittelt werden!

Und ab da wirds für mich schwierig!

@ Domilich
Was passiert wenn ein User der kein Mailprogramm hat auf diesen Button (mailto) klickt??

Lg Jürgen
 
Also ich probier schon die so lang umher, aber ich komm einfach nicht drauf!

Am ehesten hätt ich mir das so vorgestellt:
HTML:
<input type="button" value="Absenden-Test" onclick="parent.location='mailto:mail@provider.net?subject=(document.getElementById('Seitenumfangkosten').value)" />

Aber auch das funktioniert nicht!

So gehts, aber da sind halt nicht die Werte aus meinem Textfeld drinne:

HTML:
<input type="button" value="Absenden-Test" onClick="parent.location='mailto:mail@provider.net?body=Hier kommt der Text'">
 
Meinst du so?
HTML:
<input type="button" value="Absenden-Test" onclick=subject=(document.getElementById('Seitenumfangkosten').value)"parent.location='mailto:mail@provider.net?" />

geht auch ned
 
Versuch mal das hier. Ich kanns nicht testen, weil ich keinen lokalen Mailclient installiert habe.
HTML:
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>für vierkant</title>
</head>
<body>

<script>
	"use strict";
	function los_gehts() {
		window.open('mailto:mail@provider.net?body='+document.getElementById('mailbody').value,'_blank');
	}
</script>

<input type="text" id="mailbody" value="Hier kommt was rein"><br>
<input type="button" value="Los" onclick="los_gehts();">

</body>
</html>
Das '_blank' sollte man ggf. noch ändern, wenn der Rest klappt, sonst bleibt eventuell im Browser ein komplett leeres Tab stehen.
 
Super danke! Das Funktioniert nun:

HTML:
<script>
	"use strict";
	function los_gehts() {
		window.open('mailto:support@homepagefabrik.net?body='+document.getElementById('suppjanein').value + " " + document.getElementById('suppkosten').value);
       
	}
</script>


<input type="button" value="Los" onclick="los_gehts();">


In der Mail steht das nun in diesem Format:




Wie kann ich da einen Zeilenumbruch einbauen? Damit es so ausschaut:

 
Versuch mal an der Stelle ein \n
Wenn der Code mit PHP generiert wird zwei Backslashe davor setzen anstatt eins.
 
Habs mal so versucht:
PHP:
window.open('mailto:support@homepagefabrik.net?body='+document.getElementById('suppjanein').value \n + " "  + document.getElementById('suppkosten').value);

geht nicht! Auch so gehts nicht
PHP:
\\n
 
Weil das "\n" an der falschen Stelle steht und nicht korrekt im Mail-Client ankommt.

\t, \r, \t, \n (etc.) sind Steuerungszeichen und ergeben in einem String nur an der richtigen Stelle Sinn. Auch solltest Du Leerzeichen (da oben drin) entsprechend maskieren.

Das ergibt:

window.open('mailto:support@homepagefabrik.net?body='+ encodeURIComponent(document.getElementById('suppjanein').value + "\n" + document.getElementById('suppkosten').value));

Das müsste Dein Problem lösen.
 
Dann beachte doch mal bitte die Konsole im Browser - das klingt nach "IDs nicht gefunden", denn dann bricht er so ziemlich alles ab.

Ansonsten: Der Schnippsel oben funktioniert.
 
Zurück
Oben