Changer de page à l'aide des balises radio

**Windhoek** · 10/05/2023, 17h08

Bonjour, je suis nouveau en programmation et dans le cadre d'un projet scolaire à rendre je dois faire un genre de formulaire en ligne en utilisant des balises de type radio en JS le problème étant que je n'arrive pas en fonction de la balise radio cochée à emmener mon utilisateur sur une page spécifique, voici un bout de mon code :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function visitesH() {
    window.location.href=("des_visites_historiques.html");
}
function amoureux() {
    window.location.href=("un_amoureux_de_la_nature_ou_de_la_nourriture.html");
}
 
function analyse() {
    if(document.getElementById("proche").checked){
        visitesH();
    }else if(document.getElementById("pasproche").checked){
        amoureux();
    }
}

Ci-dessus mon JS avec une fonction analyse pour renvoyer mon utilisateur sur la bonne page en fonction de la radio cochée et ci-dessous la page html où intervient le choix en radio

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
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="../style.css" type="text/css" />
 <script type='text/javascript' src="../script.js"> </script>
 </head>
 <body><center> 
    <div id="cercle"></div>
 <h2 title="ceci est un titre"> <center> Première question:</h2> <br>
 <h1> <center> Voulez vous plûtot visiter un coin proche de l'eau ou non ?<h1>
 <center> <font size="4">
 <form name='CoinEau' >
 Proche de l'eau : <input type="radio" name="condition" id="proche">  Pas proche de l'eau : <input type="radio" name="condition" id="pasproche">
 </font>
 <br>
 <button onclick="analyse()">Soumettre</button>
</form>
 </body>
</html>

En espérant avoir été clair, je vous demande votre aide, merci d'avance

**mathieu** · 10/05/2023, 21h25

pour envoyer l'utilisateur sur une autre page, vous n'avez pas besoin de faire tous cela et d'utiliser du code javascript.
il suffit de faire 2 liens avec la balise "a" :
https://developer.mozilla.org/fr/doc...HTML/Element/a

**Windhoek** · 10/05/2023, 21h31

Merci déjà pour votre réponse mais le sujet de mon projet scolaire me demande de faire intervenir absolument le JavaScript et les balises radios, c'est pour cela que je me creuse la tête ainsi et que je n'utilise pas davantage de balises HTML. Si vous avez une idée de ce qui ne va pas dans mon code, je vous en serais très reconnaissant.
Bonne soirée.

**Windhoek** · 10/05/2023, 21h52

Bonjour, je suis nouveau en programmation et dans le cadre d'un projet scolaire à rendre je dois faire un genre de formulaire en ligne en utilisant des balises de type radio en JS (c'est la consigne donc je ne peux pas utiliser d'autres balises pour faire ce que je veux faire) le problème étant que je n'arrive pas en fonction de la balise radio cochée à emmener mon utilisateur sur une page spécifique, voici un bout de mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function visitesH() {
    window.location.href=("des_visites_historiques.html");
}
function amoureux() {
    window.location.href=("un_amoureux_de_la_nature_ou_de_la_nourriture.html");
}
 
function analyse() {
    if(document.getElementById("proche").checked){
        visitesH();
    }else if(document.getElementById("pasproche").checked){
        amoureux();
    }
}

Ci-dessus mon JS avec une fonction "analyse" pour renvoyer mon utilisateur sur la bonne page en fonction de la radio cochée et ci-dessous la page html où intervient le choix en radio

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
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="../style.css" type="text/css" />
 <script type='text/javascript' src="../script.js"> </script>
 </head>
 <body><center> 
    <div id="cercle"></div>
 <h2 title="ceci est un titre"> <center> Première question:</h2> <br>
 <h1> <center> Voulez vous plûtot visiter un coin proche de l'eau ou non ?<h1>
 <center> <font size="4">
 <form name='CoinEau' >
 Proche de l'eau : <input type="radio" name="condition" id="proche">  Pas proche de l'eau : <input type="radio" name="condition" id="pasproche">
 </font>
 <br>
 <button onclick="analyse()">Soumettre</button>
</form>
 </body>
</html>

En espérant avoir été clair, je vous demande votre aide, merci d'avance

**CosmoKnacki** · 10/05/2023, 22h36

Commence déjà par avoir un html totalement clean: Il y a des balises qui se chevauchent et certaines sont complètement obsolètes (les balises <font> et center) et n'ont rien à faire dans du html5 (la mise en page, c'est le rôle du CSS). De toute manière la présentation, pour le moment, on s'en fiche, donc autant partir sur un html minimaliste mais correct.

Ensuite, tu vas utiliser les outils de développement de ton navigateur (avec Firefox: outils supplémentaires > outils de développement Ctrl + I, les autres navigateurs ont un équivalent si tu n'utilises pas Firefox) et notamment la console, comme ça tu pourras voir ce qui se passe grâce aux messages d'erreur.

Je t'invite également à lire cette page: https://developer.mozilla.org/fr/doc...nt/input/radio

Changer de page à l'aide des balises radio

JavaScript

Discussions similaires

Partager

Partager