Je tiens d'abord à vous remercier d'avoir cliqué sur ce topic afin de m'apporter votre aide.
J'explique mon cas !
Je suis actuellement en projet et j'ai besoin d'une interface WEB.
Pour l'interface en elle même, je ne rencontre pas de problème. Cependant, je voudrais pouvoir rediriger vers une autre page via un bouton submit en fonction des choix sélectionnés dans un formulaire.
Vous voyez directe ou je veux en venir ! Je tente des choses mais je n'arrive pas à poser les conditions de la redirection ^^.
Je vous pose mon code en dessous de mon message.
Je tiens à rappeler que je ne veux pas un code tout frais je veux que l'on m'explique ^^.
1- Ton bouton submit est dans un deuxième formulaire or il devrait se retrouver dans le premier.
2- Évite les <br />, favorise le css pour rajouter des espacements entre les blocs. Le <br /> sert à faire un saut à la ligne dans un paragraphe.
3- La syntaxe de ta fonction est mauvaise.
C'est:
function pageADSLRoute ()
et non:
pageADSLRoute function()
4- La redirection dans ta fonction ne sera jamais exécuté parce que tu ne fais à aucun moment appel à ta fonction dans ton code. Regarde du côté de l'attribut onclick en HTML ou de l'événement click en JavaScript.
N'oublie pas de faire un event.preventDefault() pour stopper le comportement par défaut du formulaire.
5- Ne met pas ton css directement dans les balises. Déplace le dans un fichier externe .css que tu appelleras dans ton <head> grâce à la balise <link>.
6- Revois l'indentation de ton code parce qu'actuellement elle est plutôt aléatoire.
Il vaut mieux faire une redirection du côté serveur mais tout dépend de ce que tu veux faire des données récupérées par le formulaire.
"Ils ne savaient pas que c'était impossible, alors ils l'ont fait" Mark Twain
cela n'appelle pas ta fonction mais met la variable pageADSLRoute comme valeur dans ta variable bouton ce qui provoque une erreur dans ton cas.
Pour appeler une fonction, tu dois faire:
bouton = pageADSLRoute()
Ensuite, ton code JavaScript est tout le temps exécuté or d'après ce que j'ai compris, tu veux qu'il soit exécuté que lorsque tu cliques sur le bouton submit de ton formulaire. C'est pour cela que je te propose d'appeler ta fonction à travers un événement click.
Le event.preventDefault() va du coup (si tu passes par un événement click en JavaScript) couper le comportement par défaut de ton formulaire (qui est d'envoyer le contenu du formulaire en POST ou en GET) pour que le code dans ton événement click puisse s'exécuter (regarde sur Google pour plus de détails).
Ensuite, ta récupération de valeurs est mauvaise dans ta fonction.
En JavaScript, on préfère utiliser les id pour cibler un élément.
Ainsi pour récupérer le name d'un de tes champs, tu pourras faire ceci:
Côté Javascript, récupère ton formulaire et ajoute lui un listener pour déclencher ta fonction à chaque fois que l'évènement submit (soumission du formulaire) se produit.
Utilise preventDefault() comme te la conseiller @eclairia, puis récupère la valeur de tes champs, vérifie leurs valeurs et effectue ta redirection.
Mais avant d'attaquer ton script, je te partage quelques améliorations de ton HTML :
<ul> est utilisé pour lister des éléments. Si tu souhaites simplement faire de la mise en forme (tes champs les uns sous les autres), utilise du CSS. La règle est "si tu souhaites faire de la mise en forme, écris du CSS". En respectant cette règle, tu évites également les balises </br> pour espacer tes champs.
Utilise la balise <label> pour donner une légende à tes champs plutôt que <p>. Et pense à donner une valeur aux options de ton select.
Tu peux le placer dans ton script Javascript directement.
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
/**
* TODO1: recup les valeurs de tes champs
* TODO2: faire ta redirection si les conditions sont bonnes
*/
});
Du coups après je déclare mon fichier js au même endroit que le css ?
Comme je ne sais pas où tu déclares ton fichier CSS, je ne peux pas te répondre.
<html>
<head>
<!-- title meta css etc. -->
</head>
<body>
<!-- code HTML, la structure de ta page -->
<script src="tonscript.js"></script>
</body>
</html>
Oui, ça fonctionnera également à condition que ton bouton de soumission ait pour id "myBtn" et que tu ajoutes event en paramètre de ta fonction.
Et effectivement, dans ce cas, tu n'as pas besoin de la variable form.
Comprends-tu la différence entre ce que je te propose et le code que tu me proposes ? Je déclenche une fonction lorsqu'on soumet le formulaire. Et toi, tu déclenches une fonction lorsqu'on click sur le bouton d'ID myBtn.
IlanPELLOQUIN a écrit:
Je m'aperçois également de l'erreur :
Uncaught SyntaxError: Unexpected token <
Par hasard, n'aurais-tu pas ajouté la balise <script> dans ton fichier .js ?
Pas besoin de # pour récupérer ton élément d'ID button. Je t'ai aussi corrigé la suite pour qu'on avance un peu sur ton réel problème : la récupération des valeurs de tes select.
document.getElementById("button").addEventListener('click', choixRedirectionPage);
function choixRedirectionPage(event) {
event.preventDefault();
// le reste de ta fonction
}
IlanPELLOQUIN a écrit:
Tu voudrais dire qu'il ne reconnais pas directement les choix des options dans les "select" en les appelants par leur "value" ?
Non, ce n'est pas magique. Tu dois les récupérer.
EDIT: retire le onclick="choixRedirectionPage()" dans ton code HTML.
En faite quand je regarde dans la console j'ai l'impression que l'erreur viens de mon fichier js car il n'a pas l'air d'appeler les autres fichiers !
- Edité par IlanPELLOQUIN 15 février 2019 à 14:50:35
Redirection de page
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
lesjoiesducode / Les points-virgules en JavaScript
lesjoiesducode / Les points-virgules en JavaScript
lesjoiesducode / Les points-virgules en JavaScript
lesjoiesducode / Les points-virgules en JavaScript
lesjoiesducode / Les points-virgules en JavaScript
lesjoiesducode / Les points-virgules en JavaScript
lesjoiesducode / Les points-virgules en JavaScript