script envoi mail simplifié

Version imprimable

Bonjour,

je debute en javascript, j'ai une page web dans laquelle un tableau contient une liste de personnes , je souhaiterait a l'aide de case a cocher pourvoir simlplement envoyer un mail par le client de messagerie de l'internaute (Mailto), avec les parametres selectionnés dans ce tableau....
par exemple envoyer a toto en "cc" et titi en "to"(destiantaire principal), tata en cc etc.....

voici mon bout de code:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
<table class="smalltable">
  <tbody>
    <tr class="head" style="background: rgb(216, 216, 216) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
      <th width="148" align="center" style="width: 150px;">Client</th>
      <th width="83" align="center">&nbsp;</th>
      <th width="69" align="center" style="width: 70px;">E-mail </th>
      <th width="20" align="center" style="width: 10px;">To</th>
      <th width="21" align="center" style="width: 10px;">Cc</th>
      <th width="21" align="center" style="width: 10px;">Cci</th>
    </tr>
    <tr class="change even">
      <td align="center" valign="middle">toto</td>
      <td align="center" valign="middle">&nbsp;</td>
      <td align="center"></td>
      <td align="center"><input type="checkbox" name="checkbox1" value="toto@toto.fr" /></td>
      <td align="center"><input type="checkbox" name="checkbox12" value="toto@toto.fr" /></td>
      <td align="center"><input type="checkbox" name="checkbox13" value="toto@toto.fr" /></td>
    </tr>
    <tr class="change odd">
      <td align="center" valign="middle">tata</td>
      <td align="center" valign="middle">&nbsp;</td>
      <td align="center"></td>
      <td align="center"><input type="checkbox" name="checkbox21" value="tata@tata.fr" /></td>
      <td align="center"><input type="checkbox" name="checkbox22" value="tata@tata.fr" /></td>
      <td align="center"><input type="checkbox" name="checkbox23" value="tata@tata.fr" /></td>
    </tr>
    <tr class="change even">
      <td align="center" valign="middle">titi</td>
      <td align="center" valign="middle">&nbsp;</td>
      <td align="center"></td>
      <td align="center"><input type="checkbox" name="checkbox31" value="titi@titi.fr" /></td>
      <td align="center"><input type="checkbox" name="checkbox32" value="titi@titi.fr" /></td>
      <td align="center"><input type="checkbox" name="checkbox33" value="titi@titi.fr" /></td>
    </tr>
    <tr class="head" style="background: rgb(216, 216, 216) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
      <th align="center" style="width: 150px;">&nbsp;</th>
      <th align="center">&nbsp;</th>
      <th align="center" style="width: 70px;">E-mail </th>
      <th align="center" style="width: 10px;">to</th>
      <th align="center" style="width: 10px;">Cc</th>
      <th align="center" style="width: 10px;">Cci</th>
    </tr>
    <tr class="change even">
      <td align="center">lolo</td>
      <td align="center">&nbsp;</td>
      <td align="center"></td>
      <td align="center"><input type="checkbox" name="checkbox41" value="lolo@lolo.fr" /></td>
      <td align="center"><input type="checkbox" name="checkbox42" value="lolo@lolo.fr" /></td>
      <td align="center"><input type="checkbox" name="checkbox43" value="lolo@lolo.fr" /></td>
    </tr>
    <tr class="change even">
      <td align="center">&nbsp;</td>
      <td colspan="2" align="center"></td>
      <td align="center">&nbsp;</td>
      <td align="center">&nbsp;</td>
      <td align="center">&nbsp;</td>
    </tr>
    <tr class="change even">
      <td colspan="3" align="center"><a href="#" onclick="SaisieMail();return false;" >Cliquer pour envoyer</a>
          <input name="Reset" type="reset" class="admin" value="Reset" /></td>
      <td align="center">&nbsp;</td>
      <td align="center">&nbsp;</td>
      <td align="center">&nbsp;</td>
    </tr>
  </tbody>
</table>

Auriez-vous une idée ? Avec le fonctionnement en "POST", mes données selectionnées sont publiée dans le corps du message et pas du tout en tant que destinataires....
Merci d'avance, et encore merci de mettre a disposition des sites tels que le votre !!!

A+
king

20/05/2008, 15h24
SpaceFrog

Une petit recherche ?
le sujet à été abordé deux fois sur la première page de ce forum ...
20/05/2008, 16h14
kingbastard

Euhh....oui j'ai bien vu les autres scripts, mais il ne conviennent pas , en fait je ne peux pas utiliser de PHP ou de serveur mail externe au site....J'essaie en fait de me servir de l'Outlook de l'utilisateur de la page.....
d'ou le besoin de correller les clic des boutons-radio correpondant aux choix des champs (to/cc/cci) et la recuperation des variables associées au boutons radios, afin de renvoyer le tout dans un champ mailto

au final j'essaie d'avoir un champ mailto de la sorte:

mailto:toto?cc=titi&bcc=tata&Subject=testdemessagerie&Body=bonjour,blablabla
20/05/2008, 16h17
SpaceFrog

ben même celui là ?
http://www.developpez.net/forums/sho...d.php?t=549773

Je l'avais vu et meme copié en local....

Le debut m'interesse forcement :
Code:

1 2 3 4 5 6 7 8 9 <script type="text/javascript"> function SpreadTheNews(Ami){ var titre=escape("Demande d'information"); var message=escape("bonjour, bla bla bla...."); self.location.href="mailto:"+Ami+"?Subject="+titre+"&body="+message; } function SaisieMail(){
....apres je bloque pour recuperer la valeur des bouton radios "checkbox1" "checkbox2" et les integrer...en fait la verification de mail je m'en passe , car les adresses sont deja dans la page web....

et bien sur :
Code:

1 2 onclick="SaisieMail();return false;"
ok pour le dernier morceau.....

Merci, Merci , merci pour toutes les reponses......Je suis une queue en Javascript.......J'arrive juste a faire des pages web avec dreamweaver, mais le reste...lol

20/05/2008, 17h20
SpaceFrog

c'est dans la FAQ ...
faut boucler sur la collection des options et recupérer les checked ...
21/05/2008, 09h59
kingbastard

Pauvre de moi.......

Je ne comprend pas , désolé....une bonne âme peux elle m'expliquer point par point ? comment recupere t'on les valeurs checkée dans les box ?

Je ne suis pas du tout programmeur, je n'ai jamais fait un script de ma vie ....

J'ai honte.....si si !!!:oops:

Merci encore.....

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//On attrappe tous les inputs
TabInputs=document.getElementsByName('input');
//On prepare un tableau pour y stcoker les checkboxes
TabChecks=new Array();
 
//On parcourre la collection des inputs pour mettre les checkboxes dans l'array
for(i=0;TabInputs[i];i++){
        if(TabInputs[i].type=='checkbox'){TabChecks.push(TabInput[i])
        }
//Voilà maintenant TabChecks ne comporte que les checkboxes de la page 
 
//Verfions maintenant lesquels sont cochés
var Checked= new Array()
 
for (i=0;TabChecks[i];i++){
              if(TabChecks[i].checked){Checked.push(TabChecks[i].name)}
}
 // VOilà TabChecks[i] comporte le nom de tous les checkboxes cochés ...

Citation:

Envoyé par SpaceFrog

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//On attrappe tous les inputs
TabInputs=document.getElementsByTagName('input');
//On prepare un tableau pour y stcoker les checkboxes
TabChecks=new Array();
 
//On parcourre la collection des inputs pour mettre les checkboxes dans l'array
for(i=0;TabInputs[i];i++){
        if(TabInputs[i].type=='checkbox'){TabChecks.push(TabInputs[i])
        }
//Voilà maintenant TabChecks ne comporte que les checkboxes de la page 
 
//Verfions maintenant lesquels sont cochés
var Checked= new Array()
 
for (i=0;TabChecks[i];i++){
              if(TabChecks[i].checked){Checked.push(TabChecks[i].name)}
}
 // VOilà TabChecks[i] comporte le nom de tous les checkboxes cochés ...

Ce code fonctionne chez toi SpaceFrog, parce qu'il ne fonctionnait pas chez moi, j'ai essayé de le modifier un peu et maintenant ça fonctionne chez moi.

Je n'ai pas compris l'instruction dans les boucles for:

Tu écris "Tabchecks[i]" à quoi cela correspond-t-il?

PS: voici ma version de ton code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//On attrape tous les inputs
		TabInputs=document.getElementsByTagName('input');
		//On prépare un tableau pour y stocker les checkboxes
		TabChecks=new Array();
 
		//On parcoure la collection des inputs pour mettre les checkboxes dans l'array
		for(i=0;i<TabInputs.length;i++){
        	if(TabInputs[i].type=='checkbox'){TabChecks.push(TabInputs[i])}
		}
		//Voilà maintenant TabChecks ne comporte que les checkboxes de la page 
		//Vérifions maintenant lesquelles sont cochés
		var Checked= new Array()
 
		for (i=0;i<TabChecks.length;i++){
              if(TabChecks[i].checked){Checked.push(TabChecks[i].name)}
		}

Je pense que ceci a le même fonctionnement que ton code.

Je rencontre un autre problème proche de ça mais je vais ouvrir un nouveau topic pour me faire "engueuler" :yaisse2:

21/05/2008, 15h52
SpaceFrog

une boucle c'est:
valeur de départ ...
condition si oui execution d'une occurence
si non fin de boucle
incrément

TabChecks[i] dans la boucle verifie juste si l'objet existe .. si oui une occurence de boucle
si non fin .
21/05/2008, 15h52
SpaceFrog

Et heu non code de tête sans tester ... :oops:
21/05/2008, 16h12
tusssss

A priori ton code a commencé à fonctionner chez moi quand j'ai changé le getElementsByName en getElementsByTagName.
Il y a aussi une erreur dans la première boucle for au niveau du TabInputs ou il manque un "s".

Enfin bref, maintenant que je comprends ta condition de for, je pense que ce sont les 2 seuls problèmes. Pour un code à la volée, ça m'impressionne un peu, c'est l'expérience qui paye j'imagine.
21/05/2008, 16h33
SpaceFrog

oui :oops: tagName biensur ...
Code corrigé

Heu oui quelques années de javascript derrière moi ...
et quelques posts également sur ce forum ... :mouarf:
22/05/2008, 11h46
kingbastard
merci merci !! Pour vos precieuses informations......

Si j'ai bien suivi le code proposé :
On cree un tableau, on lance une boucle qui va inspecter toutes les checkboxes a la suite , si checkbox coché= integration dans le tableau, sinon : on passe a la suivante , jusqu'a la fin...
donc dans ma variable TabInputs[i], je dois avoir les variables (tata@tata.fr) ? ou juste les noms des checkboxs (checkbox1 , checkbox3) ?

Le but du jeu est d'exploser le tableau pour refaire un tri du style:

Checkbox*1/11/21/31 -> correspondra a un champ "to"(destinataire principal)
checkbox*2/12/22/32 ->correpondra a un champ "cc" (en copie du mail..)
checkbox*3/13/23/33 -> en Cci (bcc).....

pour avoir dans le lien final un truc du style :
Code:

1 2 self.location.href="mailto:"+(checkbox*1)+"?cc="+(checkbox*2)+"&bcc="+(checkbox*3)+"&Subject="+titre+"&Body="+message;
je sait pas trop si c'est jouable....Ou alors avec des expressions regulieres sur les valeurs du tableau, exemple on prend la premiere valeur , on regarde si elle se termine par 1 2 ou 3 et en fonction du resultat on stocke ce resultat dans une variable : $TO / $CC / $CCi avec des ; entre les valeurs de chaque variables....
a la fin , on ecrirait :
Code:

1 2 self.location.href="mailto:"+$TO+"?cc="+$CC+"&bcc="+$CCi+"&Subject="+titre+"&Body="+message;
Et a la fin je serais heureux, et je me dirais " ah ouai c'est vachement bien de savoir programmer" et je serais content et tout et tout......mais...J'ai l'impression que je me suis embarqué dans un truc trop complexe pour moi...
..Je sait ce que je veux, je voit en gros la methode utilisée , mais je n'ai jamais fait de script de ma vie......alors.....:oops:

Merci quand meme pour vos scripts..... et vos coups de main....
a+
23/05/2008, 11h13
kingbastard

question :

comment Parser les valeurs de mon tableau TabChecks[i] , pour en ressortir les valeur contenues dans chaques champs ?..

Merci pour vos reponses....

a+
king

Code:

1
2
3
for(i=0;TabChecks[i];i++){
alert( TabChecks[i].value)
}

23/05/2008, 11h24
tusssss

Dans le code donné, le liste des names des checkboxes cochées sont dans le tableau Checked[] et non dans le TabChecks[].

Pour récupérer tes valeurs, pourquoi tu n'utiliserais pas juste une boucle pour lire les valeurs dans le tableau et les réécrire ailleurs en même temps.
23/05/2008, 11h53
SpaceFrog

par exemple dans un input type hidden ... ou un autre array ...

J'ai construit le script comme j'espere l'avoir compris :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
<script type="text/javascript">
function SpreadTheNews(Ami){
var titre=escape("Demande d'information");
var message=escape("Bonjour,");
self.location.href="mailto:"+document.write(TabChecks[i])+"?Subject="+titre+"&body="+message;	  
}
function SaisieMail(){
//On attrappe tous les inputs
TabInputs=document.getElementsByName('input');
//On prepare un tableau pour y stcoker les checkboxes
TabChecks=new Array();
 
//On parcourre la collection des inputs pour mettre les checkboxes dans l'array
for(i=0;TabInputs[i];i++){
        if(TabInputs[i].type=='checkbox'){TabChecks.push(TabInput[i])
        }
//Voilà maintenant TabChecks ne comporte que les checkboxes de la page 
 
//Verfions maintenant lesquels sont cochés
var Checked= new Array()
 
for (i=0;TabChecks[i];i++){
              if(TabChecks[i].checked){Checked.push(TabChecks[i].name)}
}
 // VOilà TabChecks[i] comporte le nom de tous les checkboxes cochés ...
 
</script>
<table class="smalltable">
  <tbody>
    <tr class="head" style="background: rgb(216, 216, 216) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
      <th width="148" align="center" style="width: 150px;">Client</th>
      <th width="83" align="center">&nbsp;</th>
      <th width="69" align="center" style="width: 70px;">&nbsp;</th>
      <th width="20" align="center" style="width: 10px;">To</th>
      <th width="21" align="center" style="width: 10px;">Cc</th>
      <th width="21" align="center" style="width: 10px;">Cci</th>
    </tr>
    <tr class="change even">
      <td align="center" valign="middle">toto</td>
      <td align="center" valign="middle">&nbsp;</td>
      <td align="center"></td>
      <td align="center"><input type="checkbox" name="checkbox1" value="toto@toto.fr" /></td>
      <td align="center"><input type="checkbox" name="checkbox12" value="toto@toto.fr" /></td>
      <td align="center"><input type="checkbox" name="checkbox13" value="toto@toto.fr" /></td>
    </tr>
    <tr class="change odd">
      <td align="center" valign="middle">tata</td>
      <td align="center" valign="middle">&nbsp;</td>
      <td align="center"></td>
      <td align="center"><input type="checkbox" name="checkbox21" value="tata@tata.fr" /></td>
      <td align="center"><input type="checkbox" name="checkbox22" value="tata@tata.fr" /></td>
      <td align="center"><input type="checkbox" name="checkbox23" value="tata@tata.fr" /></td>
    </tr>
    <tr class="change even">
      <td align="center" valign="middle">titi</td>
      <td align="center" valign="middle">&nbsp;</td>
      <td align="center"></td>
      <td align="center"><input type="checkbox" name="checkbox31" value="titi@titi.fr" /></td>
      <td align="center"><input type="checkbox" name="checkbox32" value="titi@titi.fr" /></td>
      <td align="center"><input type="checkbox" name="checkbox33" value="titi@titi.fr" /></td>
    </tr>
    <tr class="head" style="background: rgb(216, 216, 216) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
      <th align="center" style="width: 150px;">&nbsp;</th>
      <th align="center">&nbsp;</th>
      <th align="center" style="width: 70px;">&nbsp;</th>
      <th align="center" style="width: 10px;">to</th>
      <th align="center" style="width: 10px;">Cc</th>
      <th align="center" style="width: 10px;">Cci</th>
    </tr>
    <tr class="change even">
      <td align="center">lolo</td>
      <td align="center">&nbsp;</td>
      <td align="center"></td>
      <td align="center"><input type="checkbox" name="checkbox41" value="lolo@lolo.fr" /></td>
      <td align="center"><input type="checkbox" name="checkbox42" value="lolo@lolo.fr" /></td>
      <td align="center"><input type="checkbox" name="checkbox43" value="lolo@lolo.fr" /></td>
    </tr>
    <tr class="change even">
      <td align="center">&nbsp;</td>
      <td colspan="2" align="center"></td>
      <td align="center">&nbsp;</td>
      <td align="center">&nbsp;</td>
      <td align="center">&nbsp;</td>
    </tr>
    <tr class="change even">
      <td colspan="3" align="center"><a href="#" onclick="SpreadTheNews();return false;" >Cliquer pour envoyer</a>
          <input name="Reset" type="reset" class="admin" value="Reset" /></td>
      <td align="center">&nbsp;</td>
      <td align="center">&nbsp;</td>
      <td align="center">&nbsp;</td>
    </tr>
  </tbody>
</table>

Le pb :

Je coche les cases , je clique sur envoyer email : il ne se passe rien , pas meme l'ouverture d'Outlook !!! ....Je patauge completement...

Merci à tous ceux qui pourrons m'aider....

26/05/2008, 14h03
tusssss
Citation:

Envoyé par tusssss

Dans le code donné, le liste des names des checkboxes cochées sont dans le tableau Checked[] et non dans le TabChecks[].

Pour récupérer tes valeurs, pourquoi tu n'utiliserais pas juste une boucle pour lire les valeurs dans le tableau et les réécrire ailleurs en même temps.

Deja voila un élément de réponse ici dans ce que j'avais écrit.

Ensuite, pour accéder à ce que tu veux, c'est à dire à priori la value de tes checkboxes, il ne faut pas procéder de la sorte.

Dans le code de saisie mail, essaye de remplacer ca :
Code:

1 2 if(TabChecks[i].checked){Checked.push(TabChecks[i].name)}
par
Code:

1 2 if(TabChecks[i].checked){Checked.push(TabChecks[i].value)}
Ainsi dans le tableau Checked, tu auras les adresses que tu voulais avoir.

Après dans ton autre fonction (SpreadTheNews), tu utilise TabChecks[i] alors qu'il faut utiliser Checked[i].

De plus, tu ne peux pas utiliser checked[i] en dehors d'une boucle et surtout en dehors d'un endroit ou ton i à une valeur...

Bon courage pour ta fonction SpreadTheNews qui est loin de faire ce que à mon avis tu veux faire avec.
27/05/2008, 08h41
kingbastard

Merci Tusss pour ta patience !!! :mouarf:

J'ai corrigé le script , mais bon c'est toujours pas ça , déjà la fonction qui permet de lancer Outlook ne marche pas....'vais pt'ete commencer par là avant de me fourrer dans les histoires de tableaux.......

Un grand merci encore.....

cdt
King
27/05/2008, 09h42
tusssss

La fonction mailto, n'est pas du tout une de mes spécialités, je ne l'ai jamais utilisée...

Pour ce qui est de ca :

Citation:

Dans le code de saisie mail, essaye de remplacer ca :
Code :

if(TabChecks[i].checked){Checked.push(TabChecks[i].name)}

par

Code :

if(TabChecks[i].checked){Checked.push(TabChecks[i].value)}

Je ne suis même pas certain de ma correction après relecture ce matin.

Ce que je peux te dire aussi, c'est qu'en général la fonction document.write n'est pas très appréciée.

Bref, il va te falloir attendre l'avis de quelqu'un d'autre, j'ai atteins les limites de mes connaissances (je suis pas allé bien loin).

Bonne chance