Récupérer les input d'un formulaire pour un mailto

Version imprimable

Bonjour,
J'ai crée mon formulaire de contact, je voudrais que le mailto récupère automatiquement les valeurs entrées dans les input (nom,sujet...) et non que ça soit des valeurs fixes définies dans mon code HTML...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="formulairecontact">
	<form action="mailto:monmail@mail.com" method="post" name="contact">
		<p>
			<label for="nom">Prénom et nom: <span class="required">*</span></label>
			<input type="text" id="name" name="name" value="" placeholder="Prénom & Nom" required="required" autofocus="autofocus" />
			<br/>
			<label for="email">Adresse mail: <span class="required">*</span></label>
			<input type="email" id="email" name="email" value="" placeholder="adresse@example.com" required="required" />
			<br/>
			<label for="telephone">Téléphone: </label>
			<input type="tel" id="telephone" name="telephone" value="" />
			<br/>
			<label for="enquiry">Raison du mail: </label>
			<select id="raison" name="raison">
				<option value="avis">Je souhaie donner mon avis</option>
				<option value="autre">Autre raison...</option>
			</select>
			<br/>
			<label for="message">Message: <span class="required">*</span></label>
			<textarea id="message" name="message" placeholder="Votre message doit faire plus de 20 caractères..." required="required" data-minlength="20"></textarea>
		</p>
		<input type="submit" value="Envoyer" onclick='document.location.href="index.html";'>
	</form>
</div>

Merci de votre aide.

01/12/2014, 11h24
valaendra

Bonjour,

Tout d'abord, il est nécessaire (mais pas indispensable) de préciser ENCTYPE dans ta balise form afin de "forcer" l'envoi en texte brut :

Code:

<formAction="mailto:mail@domaine.com" method="POST" enctype="text/plain"

Pour le reste, j'ai testé ton formulaire et il ajoute bien les données que j'entre dans le corps du mail.

Il y a par contre, possibilité que ça ne focntionne pas avec tous les navigateurs/cliens emails. Passer la methode de transmission des données à GET peut résoudre certains probleme de compatibilité.
01/12/2014, 20h40
CLeBeR

Bonsoir,
J'ai modifié le code, le problème persiste. Tout est entré dans le corps du message. Voici ce que j'obtiens :

Citation:

name=prenom
email=monbmail@gmail.com
telephone=
raison=avis
message=Voici mon message !

Merci.
03/12/2014, 09h13
Bisûnûrs

Une petite recherche sur le forum aurait pu te donner ça, par exemple :
http://www.developpez.net/forums/d35...me-formulaire/

Bonjour,
J'ai réussi effectivement grâce au JavaScript. Voici mon code HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="formulairecontact">
	<form action="#" onsubmit="temp()" method="post" enctype="text/plain" id="form">
		<p>
			<label for="nom">Prénom et nom: </label><span class="required">*</span>
			<input type="text" id="name" name="Prénom & NOM" value="" placeholder="Prénom & Nom" required="required" autofocus="autofocus" />
			<br/>
			<label for="email">Adresse mail: </label><span class="required">*</span>
			<input type="email" id="email" name="email" value="" placeholder="adresse@example.com" required="required" />
			<br/>
			<label for="telephone">Téléphone: </label>
			<input type="tel" id="telephone" name="Numéro de téléphone" value="" />
			<br/>
			<label for="enquiry">Raison du mail: </label>
			<select id="raison">
				<option value="Je souhaite donner mon avis">Je souhaie donner mon avis</option>
				<option value="Autre raison">Autre raison...</option>
			</select>
			<br/>
			<label for="message">Message: <span class="required">*</span></label>
			<textarea id="message" name="Message" placeholder="Votre message doit faire plus de 20 caractères..." required="required" data-minlength="20"></textarea>
		</p>
		<input type="submit" value="Envoyer">
	</form>
</div>

Code JavaScript :

Code:

1
2
3
function temp(){
	document.getElementById('form').action = "mailto:mail@exemple?subject=" + document.getElementById('raison').value;
}

Merci.

14/12/2014, 00h58
CLeBeR

Bonjour,
je rouvre la discussion car en essayant mon formulaire, je me suis rendu compte qu'il fonctionne sur tous les navigateurs, sauf IE...
Savez-vous d'où cela peut venir ?
Merci.
15/12/2014, 09h42
Bisûnûrs

"Ca ne marche pas" ne veut rien dire.

Essaie toujours en mettant ça pour récupérer la valeur du select :

Code:

document.getElementById("raison").options[document.getElementById("raison").selectedIndex].value
15/12/2014, 09h53
Bovino

Ou plus simplement

Code:

document.getElementById("raison").value

;)

Ceci dit, le plus simple ne serait-il pas de nommer les champs correctement directement dans le HTML afin de ne pas avoir à faire ce genre de manip en JavaScript ? :whistle:
15/12/2014, 10h51
Bisûnûrs

Citation:

Envoyé par Bovino

Ou plus simplement

Code:

document.getElementById("raison").value

En fait c'est ce qu'il fait déjà. En l'absence d'informations, je donne des solutions alternatives. :mrgreen:

Bonsoir,
voici le code fonctionnel, je précise aussi que si l'on met le caractère '&' dans une chaine de caractère, cela coupe la récupération des informations. Si quelqu'un arrive à m'expliquer pourquoi ...
Voici le code :
Code:

1 2 3 4 function recuperation() { document.getElementById('form').action = "mailto:mail@domaine.fr?subject=" + document.getElementById('raison').value + "&body=" + "Prénom et Nom : " + document.getElementById('nom').value + "%0A" +"Téléphone : " + document.getElementById('telephone').value + "%0A" +"Message : " + document.getElementById('message').value; }
Merci.