Bonjour à tous !
Je vous expose mon problème
J'ai une page HTML et une autre qui contient le JS
Je souhaite afficher une "alert" si 2 conditions sont réunion à base de "checkboxes" dans un formulaire
Dans mon exemple : si "checkbox h" ET "checkbox j" sont cochées, alors affiche "alert" contenant ce message.
Je précise que je travaille avec Jquery (où il peut parfois y avoir des conflits...)
J'ai essayer de modifier le JS de toute les façons possibles et rien ne fonctionne.
Soit il ne se passe rien
Soit j'ai des erreurs "is null" ou "not defined"
Soit "alert" apparait quand il ne doit pas.
Le code :
(Ici "alert" apparait dès qu'on coche une des cases incriminées alors que les 2 doivent impérativement être cochées...)
HTML
JS
Modifié par Gianni54 (30 Jul 2017 - 14:28)
Je vous expose mon problème
J'ai une page HTML et une autre qui contient le JS
Je souhaite afficher une "alert" si 2 conditions sont réunion à base de "checkboxes" dans un formulaire
Dans mon exemple : si "checkbox h" ET "checkbox j" sont cochées, alors affiche "alert" contenant ce message.
Je précise que je travaille avec Jquery (où il peut parfois y avoir des conflits...)
J'ai essayer de modifier le JS de toute les façons possibles et rien ne fonctionne.
Soit il ne se passe rien
Soit j'ai des erreurs "is null" ou "not defined"
Soit "alert" apparait quand il ne doit pas.
Le code :
(Ici "alert" apparait dès qu'on coche une des cases incriminées alors que les 2 doivent impérativement être cochées...)
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" shrink-to-fit="no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>FORMUALIRE</title>
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="apple-touch-icon-precomposed" href="images/logo.png" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="fichierjs.js"></script>
</head>
<body>
<div data-role="page" id="formulaire">
<div data-role="header" data-theme="b">
<h1>FORMULAIRE</h1>
<a href="#page" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div>
<div data-role="content" data-theme="c">
<div class="content-primary">
<center>
<h3>Bienvenue !</h3>
<p><img src="images/form.jpg" height="30%" width="30%" alt="img formulaire" ></p>
<form method="POST" name="FORM">
<p><B>Motif d'appel :</B></p>
<input type="radio" name="vItem1" id="a" onclick="f_formu()" value="0"/><label for="a"> Aucun</label>
<input type="radio" name="vItem1" id="b" onclick="f_formu()" value="1"/><label for="b"> J'ai soif</label>
<input type="radio" name="vItem1" id="c" onclick="f_formu()" value="2"/><label for="c"> Je suis malade</label>
<p><B>Douleurs :</B></p>
<input type="radio" name="vItem2" id="d" onclick="f_formu()" value="0"/><label for="d"> Aucunes</label>
<input type="radio" name="vItem2" id="e" onclick="f_formu()" value="2"/><label for="e"> Supportables</label>
<input type="radio" name="vItem2" id="f" onclick="f_formu()" value="4"/><label for="f"> Insupportables</label>
<p><label for="vItem3"><B>Facteur aggravants</B></label></p>
<input type="checkbox" name="vItem3.0" id="g" onclick="f_formu(this.checked)" value="1" /><label for="g"> ATCD</label>
<input type="checkbox" name="vItem3.2" id="h" onclick="f_formu(this.checked)" value="2" /><label for="h"> Aucun suivi</label>
<input type="checkbox" name="vItem3.3" id="i" onclick="f_formu(this.checked)" value="4" /><label for="i"> Age supérieur à 60 ans</label>
<p><label for="vItem4"><B>Facteur favorisants</B></label></p>
<input type="checkbox" name="vItem4.0" id="j" onclick="f_formu(this.checked)" value="-3" /><label for="j"> Suivi annuel</label>
<input type="checkbox" name="vItem4.2" id="k" onclick="f_formu(this.checked)" value="-2" /><label for="k"> Age entre 25 et 45 ans</label>
<input type="reset" value="R.A.Z." name="cmdCancel" />
<h3><span id="Result" readonly="readonly"></span></h3>
</form>
</center>
</div>
</div>
<footer>
<div data-role="footer" class="footer-docs" data-theme="c">
<center><p>Formulaire</p></center>
</div>
</footer>
</div>
</body>
JS
/*script formulaire */
function f_formu() {
var Res = 0; // initialisation de la variable qui récupère le résultat
var Obj = this.document.FORM; // Simplification de l'expression du formulaire
var Check1 = document.getElementById("h").checked;
var Check2 = document.getElementById("j").checked;
for (i=1; i<11;i++) // début de la boucle explorant les objets du formulaire (il y en à 18)
{
if (Obj.elements[i].checked == true) // test des objets 'checkés'
{
Res += parseInt(Obj.elements[i].value); // on ajoute les valeurs des objets 'checked'
if (Check1 + Check2 == true)
{
alert ("Attention Vous ne pouvez pas cocher suivi et non suivi !")
}
}
}
// Affichage du résultat
document.getElementById("Result").innerHTML = "Score : " + Res;
Modifié par Gianni54 (30 Jul 2017 - 14:28)
