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

Vue hybride

Discussions similaires

Partager

Partager