11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Voila, je n'y comprends rien au javascript (ou presque rien)et j'essai d'appliquer un bout de code trouvé sur le net afin de vérifier la saisie sur un groupe de 3 boutons radio ( en fait il faut que je vérifie 12 groupes de 3 boutons radio.
Voici le bout de code :
<script language="javascript">
<!--
function donneavis()
{      
 if ((document.forms[0].elements[0].checked==false) && (document.forms[0].elements[2].checked==false))    {      
  alert("Vous avez oublié de cocher une réponse, Merci");
  return false;
 }      
  return true;     
 } 
--> 
</script>


et voici ce qui faut ajouter à la balise <form> :
onsubmit="return donneavis()


Voici un bout de code de ma page :

<form action="resultat_test.php" method="post" onsubmit="return donneavis()">     
<ol>
    <li>Avez-vous le regret en amour de n’avoir pas , plus souvent, succombé à la tentation ?</li>
                    <ol type="a"><p>
                        <li><label><input type="radio" name="RadioGroup1" value="a" id="RadioGroup1_0" /> souvent</label></li>
                        <li><label><input type="radio" name="RadioGroup1" value="b" id="RadioGroup1_1" /> parfois</label></li>
                        <li><label><input type="radio" name="RadioGroup1" value="c" id="RadioGroup1_2" /> jamais</label></li>
                    </p></ol><br />    
    <li>Lorsque vous désirez fortement quelque chose, votre désir disparaît il lorsque vous possédez la chose convoitée ?</li>
                   <ol type="a"><p>
                        <li><label><input type="radio" name="RadioGroup2" value="a" id="RadioGroup2_0" /> non</label></li>
                        <li><label><input type="radio" name="RadioGroup2" value="b" id="RadioGroup2_1" /> quelquefois</label></li>
                        <li><label><input type="radio" name="RadioGroup2" value="c" id="RadioGroup2_2" /> oui, en règle générale</label></li>
                    </p></ol><br />
    <li>A l’époque de l’adolescence des conflits affectifs vous ont-ils opposé à vos parents ?</li>                 
                   <ol type="a"><p>
                        <li><label><input type="radio" name="RadioGroup3" value="a" id="RadioGroup3_0" /> oui de façon sérieuse et durable</label></li>
                        <li><label><input type="radio" name="RadioGroup3" value="b" id="RadioGroup3_1" /> non pas de heurts sérieux</label></li>
                        <li><label><input type="radio" name="RadioGroup3" value="c" id="RadioGroup3_2" /> quelques heurts passagers</label></li>
                   </p></ol><br />
<p>
<input type="submit" value="Résultat" name="envoyer">
<input type="reset" value="Recommencer" name="recommencer"> 
</p>
</form>



Donc je n'arrive pas à tout vérifier !

D'avance merci

@+

naje83

ps : http://www.lavie-autrement.com/test.php
Modifié par naje83 (15 May 2010 - 08:03)
Modérateur
Et l'eau,

Je ne suis pas fortiche en js. Cependant, l'élément ol ne peut pas avoir comme enfant l'élément p.
<<<EDIT
Aussi, l'attribut type à l'élément ol n'existe pas.
EDIT;
Donc ton code html est faux. Smiley cligne

En ce qui concerne ton soucis, je verrais un truc comme ça. Je t'ai fait le début. A toi de terminer le script et de l'améliorer/optimiser.


function valideRadio(){
    var msgErreur = "Vous avez oublié de cocher une réponse, Merci";
                
    var elementRadio1 = document.getElementsByName("RadioGroup1");
                
    if(elementRadio1){
         for(var elementCourant = 0 ; elementCourant < elementRadio1.length ; elementCourant++){
            if(elementRadio1[elementCourant].checked == false){ 
                alert(msgErreur);
                return false;
            }else{
                return true;
            }
        } 
    }
}



<form action="resultat_test.php" method="post" onsubmit="valideRadio();">      
<ol> 
    <li>Avez-vous le regret en amour de n’avoir pas , plus souvent, succombé à la tentation ?</li> 
                    <ol>
                        <li><label><input type="radio" name="RadioGroup1" value="a" id="RadioGroup1_0" /> souvent</label></li> 
                        <li><label><input type="radio" name="RadioGroup1" value="b" id="RadioGroup1_1" /> parfois</label></li> 
                        <li><label><input type="radio" name="RadioGroup1" value="c" id="RadioGroup1_2" /> jamais</label></li> 
                   </ol>
    <li>Lorsque vous désirez fortement quelque chose, votre désir disparaît il lorsque vous possédez la chose convoitée ?</li> 
                   <ol>
                        <li><label><input type="radio" name="RadioGroup2" value="a" id="RadioGroup2_0" /> non</label></li> 
                        <li><label><input type="radio" name="RadioGroup2" value="b" id="RadioGroup2_1" /> quelquefois</label></li> 
                        <li><label><input type="radio" name="RadioGroup2" value="c" id="RadioGroup2_2" /> oui, en règle générale</label></li> 
                    </ol>
    <li>A l’époque de l’adolescence des conflits affectifs vous ont-ils opposé à vos parents ?</li>                  
                   <ol>
                        <li><label><input type="radio" name="RadioGroup3" value="a" id="RadioGroup3_0" /> oui de façon sérieuse et durable</label></li> 
                        <li><label><input type="radio" name="RadioGroup3" value="b" id="RadioGroup3_1" /> non pas de heurts sérieux</label></li> 
                        <li><label><input type="radio" name="RadioGroup3" value="c" id="RadioGroup3_2" /> quelques heurts passagers</label></li> 
                   </ol>
<p> 
<input type="submit" value="Résultat" name="envoyer"> 
<input type="reset" value="Recommencer" name="recommencer">  
</p> 
</form> 


@+
Modifié par Nolem (14 May 2010 - 22:24)
Un grand merci de m'aider.

Bien je viens de tester le code et cela ne fonctionne pas ou du moins que pour les 2 premiers groupes (il y en a 12) donc je vais m'y pencher dessus afin déjà d'essayer de comprendre. Smiley confused
Deuxième point lorsque le message d'alerte apparait dès que l'on clique le script permet d'aller à la page de résultat.

Encore merci Smiley biggrin

@+

Naje83
Modérateur
Hello,

Là, je viens de rééditer le message. Je me suis aperçu d'une erreur supplémentaire. En rentrant à la maison, je verrais un peu mieux ton soucis.
Modérateur
Re,

En me plongeant franchement dans ton code, je me suis aperçu que c'est du n'importe quoi. Ca sent le Dreamweaver, non ? Je te conseille avant d'entreprendre un langage dynamique tel que le javascript ou le php, d'apprendre le html. Brûler les étapes, c'est l'échec assuré. Sur Alsacreations, tu as la section apprendre qui va beaucoup t'aider. Egalement, passe sur openweb.eu.org. Il y a de très bons articles.

Comme je l'ai dit plus haut, je ne suis pas un fortiche en js. Néanmoins, c'est un script qui fonctionne et il est nettement plus propre d'un point de vue html. Il y a surement une bonne manière de l'optimiser. D'ailleurs, si une personne plus aguerrie que moi peut me faire quelques suggestions, je la remercie par avance. ^^

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
    <head>
        <meta http-equiv="Content-Language" content="fr" />
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <script type="text/javascript">
        // <![CDATA[
            function valideRadio(){
                var formBtnRadio = document.getElementById("btnRadio");
                
                formBtnRadio.onsubmit = function(){
                    var erreur = false;
                    var msgErreur = "Vous avez oublié de cocher une réponse, Merci";
                    var elementRadio1 = document.getElementsByName("RadioGroup1");
                    var elementRadio2 = document.getElementsByName("RadioGroup2");
                    var elementRadio3 = document.getElementsByName("RadioGroup3");
                    
                    if(elementRadio1){
                        for(var i = 0 ; i < elementRadio1.length ; i++){
                            if(elementRadio1[i].checked){
                                erreur = false;
                                break;
                            }else{
                                erreur = true;
                            }
                        } 
                    }
                    if(elementRadio2){
                        for(var i = 0 ; i < elementRadio2.length ; i++){
                            if(elementRadio2[i].checked){
                                erreur = false;
                                break;
                            }else{
                                erreur = true;
                            }
                        } 
                    }
                    if(elementRadio3){
                        for(var i = 0 ; i < elementRadio3.length ; i++){
                            if(elementRadio3[i].checked){
                                erreur = false;
                                break;
                            }else{
                                erreur = true;
                            }
                        } 
                    }
                    if(erreur == true){
                        alert(msgErreur);
                        return false;
                    }
                }
            }
            window.onload = function(){
                valideRadio();
            }
        // ]]>
        </script>
        <title><!-- insertion titre de la page --></title>
    </head>

    <body>
        <form action="resultat_test.php" method="post" id="btnRadio">
            <fieldset>
                <legend>questionnaire</legend>
                <p>Avez-vous le regret en amour de n’avoir pas , plus souvent, succombé à la tentation ?</p> 
                    <ol>
                        <li><input type="radio" name="RadioGroup1" value="a" id="RadioGroup1_0" /><label for="RadioGroup1_0">souvent</label></li> 
                        <li><input type="radio" name="RadioGroup1" value="b" id="RadioGroup1_1" /><label for="RadioGroup1_1">parfois</label></li> 
                        <li><input type="radio" name="RadioGroup1" value="c" id="RadioGroup1_2" /><label for="RadioGroup1_2">jamais</label></li> 
                   </ol>
                <p>Lorsque vous désirez fortement quelque chose, votre désir disparaît il lorsque vous possédez la chose convoitée ?</p> 
                    <ol>
                         <li><input type="radio" name="RadioGroup2" value="a" id="RadioGroup2_0" /><label for="RadioGroup2_0">non</label></li> 
                         <li><input type="radio" name="RadioGroup2" value="b" id="RadioGroup2_1" /><label for="RadioGroup2_1">quelques fois</label></li> 
                         <li><input type="radio" name="RadioGroup2" value="c" id="RadioGroup2_2" /><label for="RadioGroup2_2">oui, en règle générale</label></li> 
                     </ol>
                <p>A l’époque de l’adolescence des conflits affectifs vous ont-ils opposé à vos parents ?</p>                  
                    <ol>
                         <li><input type="radio" name="RadioGroup3" value="a" id="RadioGroup3_0" /><label for="RadioGroup3_0">oui de façon sérieuse et durable</label></li> 
                         <li><input type="radio" name="RadioGroup3" value="b" id="RadioGroup3_1" /><label for="RadioGroup3_1">non pas de heurts sérieux</label></li> 
                         <li><input type="radio" name="RadioGroup3" value="c" id="RadioGroup3_2" /><label for="RadioGroup3_2">quelques heurts passagers</label></li> 
                    </ol>
                <p> 
                    <input type="submit" value="Résultat" name="envoyer" /> 
                    <input type="reset" value="Recommencer" name="recommencer" />  
                </p>
            </fieldset>
        </form> 
    </body>
</html>


Bonne apprentissage. Smiley smile [/i][/i][/i]
Modifié par Nolem (15 May 2010 - 02:41)
Merci Nolem,

ce script semble fonctionner, je vais le continuer pour l'adapter à mon besoin.

Il est vrai que je me serts de dreamweaver, mais je ne l'utilise que comme support et je m'applique à respecter le standart (achat du livre de r. Goetter sur le css2 et le mémento).
Il est vrai aussi que je vérifie et rectifie après coup Smiley confused la validité du code au travers du site http://validator.w3.org/, du coup j'ai vérifié ton code et là chapeau bas (sans commentaire).

Mais je suis tétu et j'y arriverai Smiley cligne .

Mille merci

@+

Naje83
Modérateur
Et l'eau Naje83,

naje83 a écrit :
[...](achat du livre de r. Goetter sur le css2 et le mémento).
Il est vrai aussi que je vérifie et rectifie après coup Smiley confused la validité du code au travers du site http://validator.w3.org/, du coup j'ai vérifié ton code et là chapeau bas (sans commentaire).[...]


J'avoue qu'en me relisant, j'ai été un peu dur dans mes paroles. Erf, on est pas toujours bien réveiller même à 2 heure du mat. Je trouve que ton initiative est très bien et je t'encourage et je t'approuve fortement à lire le livre de Raphaël. En ce qui concerne Dreamweaver, je t'invite à l'utiliser mais seulement en mode code. Oublie le mode wysiwyg et tous les outils qui vont avec (barre inspecteur de code).

Par contre, je n'ai pas la science infuse et je peux me tromper (comme tout le monde d'ailleurs).

Bonne lecture et au plaisir de te lire. ^^