Appeler une fonction JS conditionnellement

**goofyto8** · 16/09/2015, 16h49

Bonjour,
Dans un formulaire contenant deux boutons radio et un champ de texte
Je voudrai appliquer une fonction JS (un simple traitement de chaine de caractères) à l'intérieur du champ de texte; fonction appelée par l'évènement onblur.
Mais seulement si un des boutons radio du formulaire est choisi. Dans le cas où c'est l'autre bouton radio, la fonction ne doit pas être appelée par onblur.

Comment procéder ?

J'ai essayé, à l'intérieur du script JS de mettre une condition par rapport à la valeur d'un bouton radio du document HTML (if radio_button.value=="xxx") mais ça ne fonctionne pas.

Faut-il mettre la condition dans le document HTML à l'intérieur de balises <form> </form> et non pas dans le script javascript ?

**NoSmoking** · 16/09/2015, 18h06

Bonjour,
ce qui serait bien c'est que tu nous montres ce que tu as réalisé, HTML + JS.

**goofyto8** · 17/09/2015, 12h07

Bonjour,
Voici le HTML et le JS

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Choisir mode d'envoi des documents</TITLE>
<META http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<META NAME="description" CONTENT ="  choix mode envoi">
 
<script type='text/javascript' language="javascript" >

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
// test si saisie adresse mail est conforme
function testAdresseEmail(valeur)
{
  var arobace = false
  var point = false
  var positionArobace = -1
  var positionPoint = -1
 
 
  //examen de la saisie caractère par caractère avec detection @ et .
 
  for (var i = 0; i <= valeur.length; i++)
  {
    if (valeur.charAt(i) == "@")
    {
      arobace = true
      positionArobace = i
    }
    else if (valeur.charAt(i) == ".")
    {
      point = true
      positionPoint = i
    }
  }
 
  // verification présence de @ et . et leur bon ordre positionement dans la saisie 
 
  if ((arobace && point) && (positionArobace < positionPoint))
  {
    // adresse email conforme
    alert(" adresse email correcte ")
    return true
  }
  else
  {
    // adresse email non conforme
 
    alert(" adresse email incorrectement saisie ")
    return false
  }
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
</script>
</HEAD>
 
<BODY BGCOLOR="#FDF5E6">
  <h1><font size="+1" color="#0066FF">CHOIX DU MODE DE RECEPTION DES DOCUMENTS </h1>
  <!-- ici le début du formulaire avec les paramétrages pour traitement PHP  -->
  <FORM name='choix_envoi_documentation' action='traitement.php' method='POST'>
    <hr>
    <p><font size="+1" color="#0066FF">J'indique mon choix pour la reception de la documentation </font></p>
    <p align="left">
      <input type="radio" name="choix_envoi" value="par courrier postal"> <b><font color="#FF0033">PAR COURRIER POSTAL.</font></b></p>
    <p align="left">
      <input type="radio" name="choix_envoi" value="par mail"> <b><font color="#FF0033">PAR COURRIEL</font></b></p>
    <p align="left"> <b></b>
      <B><I><FONT COLOR="#000000" size="+1"><BR>
 
    <BR>
    <input type="text" name="emailAdresse" size="55"  onBlur="testAdresseEmail(this.value)">
    </FONT></I></B>
      <BR>
      <BR>
      <B>&nbsp;</B>
      <!-- bouton-image pour envoi des donnees du formulaire  -->
      <input type="submit" name="ok" value="soumettre"> </p>
  </FORM>
  <!-- fin du formulaire -->
</BODY>
 
</HTML>

Je ne voudrai pas que la fonction testAdresseEmail soit appelée si l'utilisateur a coché le bouton "envoi postal" et saisi son adresse postale (car ça n'aurait aucun sens).

Est-ce que dans le code JS , il est possible de mettre une condition, faisant référence à un élément HTML; sous la forme if (choix_envoi.value=="par courrier postal") ?

**NoSmoking** · 17/09/2015, 21h54

Il y en a des choses à dire

balise <FONT> obsolète en HTML5 qu'il vaut mieux mettre en oeuvre dès à présent
CSS inline beurk !
<script type='text/javascript' language="javascript" > l'attribut langage est obsoléte
pour tester une adresse mail il y a des regExp plein le web, inutile de réinventer l'existant

• Pour en venir à ce qui t'intéresse il te faut tester si le radio bouton est coché, si il ne l'est pas pas de test de validité.
• Il te faut mettre cette vérification également sur le submit de ton formulaire sinon tu ne fais le travail qu'à moitié.

Nota : quoiqu'il arrive les vérification coté serveur sont IMPERATIVES.

• Il "faut" lui mettre une ID à ton élément afin de pouvoir le récupérer dans la fonction, puisque l'on va l'a mettre également sur le onsubmit. Une fois cela fait il suffira de tester si il est coché.

• Sur base du HTML suivant, revu, corrigé et en passant le champ en type="email" pour le futur

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 <h1>CHOIX DU MODE DE RECEPTION DES DOCUMENTS</h1>
 <form action='traitement.php' method='POST' onsubmit="return testAdresseEmail()" >
   <hr>
   <h2>J'indique mon choix pour la réception de la documentation</h2>
   <p><label><input type="radio" name="choix_envoi" value="courrier" id="choix_poste">PAR COURRIER POSTAL.</label></p>
   <p><label><input type="radio" name="choix_envoi" value="mail"     id="choix_mail">PAR COURRIEL</label></p>
   <p><input type="email" id="adr_mail" name="emailAdresse" onBlur="testAdresseEmail(this.value)"></p>
   <p><input type="submit" name ="ok" value="soumettre"></p>
 </form>

ta fonction pourrait ressembler à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// test si saisie adresse mail est conforme
function testAdresseEmail(valeur) {
 // emprunté à https://github.com/ansman/validate.js/blob/master/validate.js
 var PATTERN = /^[a-z0-9\u007F-\uffff!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9\u007F-\uffff!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z]{2,}$/i
 
  // cela va dépendre de qui à déclenché l'appel de la fonction
 valeur = valeur || document.getElementById('adr_mail').value;
 
 if( document.getElementById('choix_mail').checked){
   if( !PATTERN.test( valeur)){
      alert("Veuillez saisir une adresse courriel valide.")
      return false;
   }
 }
 return true;
}

• Il reste des points faibles comme la soumission si rien n'est coché, si l'on quitte le champ pour changer son choix et surement d'autres choses

Exemple récapitulatif

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE HTML>
<html>
<head>
<title>Choisir mode d'envoi des documents</title>
<meta>
<style type="text/css">
html,
body {
    margin: 0;
    padding: 0;
    font-size: 100%;
    background-color: #FDF5E6;
    font: 1em/1.5 Verdana, sans-serif;
}
#main {
    width: 40em;
    margin: 0 auto;
}
h1 {
    color: #0066FF;
    font-size: 1.25em;
}
h2 {
    color: #0066FF;
    font-size: 1.1em;
}
form {
    margin: auto;
}
label {
    color: #ff0033;
    font-size: 1em;
    font-weight: bold;
}
#adr_mail {
    width: 26em;
}
</style>
<script>
// test si saisie adresse mail est conforme
function testAdresseEmail(valeur) {
 // emprunté à https://github.com/ansman/validate.js/blob/master/validate.js
 var PATTERN = /^[a-z0-9\u007F-\uffff!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9\u007F-\uffff!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z]{2,}$/i
 valeur = valeur || document.getElementById('adr_mail').value;
 
 if( document.getElementById('choix_mail').checked){
   if( !PATTERN.test( valeur)){
      alert("Veuillez saisir une adresse courriel valide.")
      return false;
   }
 }
 return true;
}
</script>
</head>
<body>
<div id="main">
 <h1>CHOIX DU MODE DE RECEPTION DES DOCUMENTS</h1>
 <form action='traitement.php' method='POST' onsubmit="return testAdresseEmail()" >
   <hr>
   <h2>J'indique mon choix pour la réception de la documentation</h2>
   <p><label><input type="radio" name="choix_envoi" value="courrier" id="choix_poste">PAR COURRIER POSTAL.</label></p>
   <p><label><input type="radio" name="choix_envoi" value="mail"     id="choix_mail">PAR COURRIEL</label></p>
   <p><input type="email" id="adr_mail" name="emailAdresse" onBlur="testAdresseEmail(this.value)"></p>
   <p><input type="submit" name ="ok" value="soumettre"></p>
 </form>
</div>
</body>
</html>

**goofyto8** · 18/09/2015, 14h37

J'ai modifié mon code (mais sans faire un copier/coller de celui que tu m'as proposé.)

En fait, dans ce que tu m'as indiqué, et qui m'a donné une solution, c'était de récupérer la valeur d'un élement de balise HTML dans le script javascript en utilisant pour se faire :
document.getElementById('email')

Mon code Js fonctionne , tu peux tester !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Choisir mode d'envoi des documents</TITLE>
<META http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<META NAME="description" CONTENT ="  choix mode envoi">
 
 
<script type='text/javascript' language="javascript" >
// test bonne saisie adresse mail
 
function testAdresseEmail(valeur)
{
var arobace=false
var point=false
var positionArobace=-1
var positionPoint=-1
var drapeau=false
 
// si bouton radio  envoi par internet est selectionné
 
if( document.getElementById('email').checked)
{drapeau=true}
 
//examen de la saisie avec detection @ et .
for (var i=0; i<=valeur.length;i++)
{ if (valeur.charAt(i)=="@")
{ arobace=true
positionArobace=i
}
else if(valeur.charAt(i)==".")
{point=true
positionPoint=i
}
}
 
// si bouton radio email est selectionné -> verification présence de @ et . et leur bon ordre positionement dans la saisie 
 
if ((arobace && point && drapeau) && (positionArobace < positionPoint))
{
// adresse email conforme
alert(" adresse email correcte ")
return true
}
else if (drapeau==false)
{return true}
else
{
// adresse email non conforme
 
alert(" adresse email incorrectement saisie ")
return false
}
}
 
</script>
</HEAD>
<BODY  BGCOLOR="#FDF5E6">
<h1><font size="+1" color="#0066FF">CHOIX DU MODE DE RECEPTION DES DOCUMENTS </h1>
 
 
 
<!-- ici le début du formulaire avec les paramétrages pour traitement PHP  -->
<FORM name='choix_envoi_documentation' action='traitement.php'  method='POST' >
 
    <hr>
 
  <p><font size="+1" color="#0066FF">J'indique mon choix de reception pour la documentation </font></p>
  <p align="left"> 
    <input type="radio" name="choix_envoi" id="postal" value="par courrier postal">
    <b><font color="#FF0033">PAR COURRIER POSTAL.</font></b></p>
  <p align="left"> 
    <input type="radio" name="choix_envoi" id="email" value="par mail">
    <b><font color="#FF0033">PAR COURRIEL</font></b></p>
  <p align="left"> <b></b><B><I><FONT COLOR="#000000" size="+1"><BR>
 
    <BR>
    <input type="text" name="emailAdresse" size="55"  onblur="testAdresseEmail(this.value)">
    </FONT></I></B> <BR>
    <BR>
    <B>&nbsp;</B> <!-- bouton-image pour envoi des donnees du formulaire  --> 
    <input type="submit"   name ="ok" value="soumettre" >
  </p>
</FORM>
 
<!-- fin du formulaire -->
 
</BODY>
</HTML>

**NoSmoking** · 19/09/2015, 15h07

Je maintiens quand même

Il y en a des choses à dire

balise <FONT> obsolète en HTML5 qu'il vaut mieux mettre en oeuvre dès à présent
CSS inline beurk !
<script type='text/javascript' language="javascript" > l'attribut langage est obsoléte
pour tester une adresse mail il y a des regExp plein le web, inutile de réinventer l'existant

De plus gérer un flag

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
if( document.getElementById('email').checked)
{drapeau=true}

c'est ce compliquer la vie alors que tu peux englober la fonctionnalité à l'intérieur du if(){...}.

Appeler une fonction JS conditionnellement

JavaScript

Discussions similaires

Partager

Partager