Avoir plusieurs balises <noscript>

**bartyo** · 17/06/2019, 15h33

Bonjour à tous et à toutes,

Sur une de mes pages web j'ai besoin d'afficher des boutons si javascript est activé et des submit si celui-ci est désactivé.
Pour cela je pensais utiliser une balise noscript pour chacun de mes boutons. Or il s'avère que si je n'en mets qu'une tout fonctionne et lorsque je mets les deux, la seconde reste inactive quelque soit l'état d'activation de js.
Les submits se nomment : "btn_connecter_noscript" et "btn_rejoindre_noscript".

Ce problème apparait sous firefox et pas sous chrome.

Voici le code de la page :

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
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
95
96
97
98
99
100
<?php include "include/js.php" ?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/global.css" />
        <link rel="stylesheet" href="css/mon_compte.css" />
        <title>Locadist.fr</title>
    </head>
 
    <body>
        <?php include "include/banniere.php"?>
        <div id="contenu">
            <?php include "include/modale.php"?>
            <div id="ariane">
                <a href="./index.php"><span class="visite">Accueil</span></a><span class="chevron"> > </span><a href="./mon_compte.php"><span class="ici">Mon compte</span></a>
            </div>
            <div id="formulaires">
                <div id="champs">
                    <fieldset id="fs_connexion">
                        <legend>Connectez vous</legend>
                        <form method="post" action="./php/connexion.php">
                            <div class="col-70">
                                <div class="row">
                                    <div class="col-50"><label for="mail">E-mail : </label></div>
                                    <div class="col-50" style="text-align:right;"><input type="email" name="mail" id="mail" placeholder="inscription@locadist.fr"/></div>
                                </div>
                                <div class="row">
                                    <div class="col-50"><label for="mdp">Votre mot de passe :</label></div>
                                    <div class="col-50"><input type="password" name="mdp" id="mdp"/></div>
                                </div>
                                <div class="row" id="remember">
                                    <div class="col-50"><input type="checkbox" name="souvenir" id="souvenir"/></div>
                                    <div class="col-40"><label for="souvenir">Se souvenir de moi</label></div>
                                </div>
                                <div class="row" id="oubli">
                                    <a href="">J'ai oublié mon mot de passe</a>
                                </div>
                                <noscript><span><input type="submit" value="Se connecter" class="btn_connecter" id="btn_connecter_noscript"/></span></noscript>
                                <span><input type="button" value="Se connecter" class="btn_connecter" id="btn_connecter_script" style="display:none;"/></span>
                            </div>
                        </form>
                    </fieldset>
                    <fieldset id="fs_rejoindre">
                        <legend>Rejoignez nous !</legend>
                        <form method="post" action="./php/creer_compte.php">
                            <div class="col-80">
                                <div class="row">
                                    <div class="col-50"><label for="prenom">Prénom : </label></div>
                                    <div class="col-40"><input type="text" name="prenom" id="prenom" class="col-90"/></div>
                                    <div class="col-5"></div>
                                </div>
                                <div class="row">
                                    <div class="col-50"><label for="nom">Nom : </label></div>
                                    <div class="col-40"><input type="text" name="nom" id="nom" class="col-90"/></div>
                                    <div class="col-5"></div>
                                </div>
                                <div class="row">
                                    <div class="col-50"><label for="mail_rejoindre">E-mail : </label></div>
                                    <div class="col-40"><input type="email" name="mail_rejoindre" id="mail_rejoindre" placeholder="inscription@locadist.fr" class="col-90"/></div>
                                    <div class="col-5"></div>
                                </div>
                                <div class="row">
                                    <div class="col-50"><label for="mdp_rejoindre">Votre mot de passe :</label></div>
                                    <div class="col-40">
                                        <div class="col-100"><input type="password" name="mdp_rejoindre" id="mdp_rejoindre" class="col-90"/></div>
                                        <div class="row" id="showforce">
                                            <div id="show" class="col-20">Voir</div>
                                            <div id="force" class="col-45">Force :</div>
                                        </div>
                                    </div>
                                    <div class="col-5"></div>
                                </div>
                                <div class="row">
                                    <div class="col-50"><label for="mdp_confirme">Confirmer mot de passe :</label></div>
                                    <div class="col-40"><input type="password" name="mdp_confirme" id="mdp_confirme" class="col-90"/></div>
                                    <div class="col-5"><img id="mdp_valide" src="" style="width:10px"/></div>
                                </div>
                                <div class="row">
                                    <div class="col-50"></div>
                                    <div class="col-40">
                                        <noscript><span><input type="submit" value="Rejoignez nous" class="btn_rejoindre" id="btn_rejoindre_noscript"/></span></noscript>
                                        <span><input type="button" value="Rejoignez nous" class="btn_rejoindre" id="btn_rejoindre_script" style="display:none;"/></span>
                                    </div>
                                    <div class="col-5"></div>
                                </div>
                            </div>
                        </form>
                    </fieldset> 
                </div>
            </div>
        </div>
        <?php include "include/footer.php"?>
        <script src="./js/banniere.js"></script>
        <script src="./js/afficher_bouton.js"></script>
        <script src="./js/compte.js"></script>
        <script src="./js/global.js"></script>
        <script src="./js/stats.js"></script>
    </body>
</html>

Merci d'avance pour votre aide.

Bartyo

**NoSmoking** · 17/06/2019, 18h25

Bonjour,
je ne vois pas pourquoi tu passes par une balise <noscript>, si JavaScript est activé alors il te suffit, après chargement, de modifier l'id et le type de tes <input>.

**bartyo** · 17/06/2019, 19h04

Bonjour,

Effectivement je n'y avais pas pensé. C'est une très bonne idée.

Merci.

Bartyo

Avoir plusieurs balises <noscript>

Conception Web

Discussions similaires

Partager

Partager