Bouton vers lien en fonction de l'entrée input

Résolu/Fermé

Fogiel Messages postés 53 Date d'inscription dimanche 12 mai 2013 Statut Membre Dernière intervention 25 juillet 2022 - 10 sept. 2021 à 17:13
jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024 - 11 sept. 2021 à 11:50

Bonjour,
je cherche a faire une zone de recherche avec bouton valider comme ci dessous

et une fois un article rentré (ex : B6660), on clique sur le bouton et ça ouvre un nouvel onglet vers la page B6660.html

j'ai déjà testé pleins de trucs mais rien ne fonctionne :(

A voir également:

Bouton vers lien en fonction de l'entrée input
Fonction si et - Guide
Lien url - Guide
Créer un lien pour partager des photos - Guide
Cliquez sur ce lien. en n'utilisant que le clavier, quel mot obtenez-vous ? ✓ - Forum souris / Touchpad
Verifier un lien - Guide

5 réponses

Réponse 1 / 5

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
10 sept. 2021 à 18:10

Bonjour,

Il aurait été bien de montrer ce qui a été essayé afin de voir ce qui ne fonctionne pas.

Un début de piste très basique : https://jsfiddle.net/yu5t1mL9/

Réaliser ceci uniquement en javascript coté client ne me semble pas idéal : si l'utilisateur saisi une référence d'un article qui n'existe pas, il va simplement arriver sur une page 404.

Il serait peut-être mieux d'avoir un script coté serveur qui traite la soumission du formulaire afin de rediriger vers la page de l'article ou de rediriger vers la même page avec un message d'erreur si la référence ne correspond à aucun article.

Bonne journée,

Réponse 2 / 5

Fogiel Messages postés 53 Date d'inscription dimanche 12 mai 2013 Statut Membre Dernière intervention 25 juillet 2022 219
10 sept. 2021 à 18:47

merci,

ça fait quelques jours que j'essaye mais je n'ai rien enregistré, j'ai bidouillé des trucs, je pense pas que c'était exploitable.
Je n'ai pas précisé que c'est pour un HTML offline. Si l'article que je rente n'existe pas, est-il possible de personnaliser la page d'erreur ?

Je viens d'essayer le code mais ça ne fonctionne pas, je n'ai pas d'onglet qui s'ouvre

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
Modifié le 10 sept. 2021 à 19:21

Ça ne fonctionne pas avec le lien que j'ai mis ou lorsque tu copies le code dans ton fichier html ?

Pour du HTML offline ? Tu veux dire que tu accèdes à ta page html via l'explorateur de fichier (l'url dans la barre d'adresse du navigateur commence par file://) ?
Dans ce cas, il faudra corriger la variable url pour indiquer au début le chemin vers le dossier qui contient les fichiers html des articles.

Réponse 3 / 5

Fogiel Messages postés 53 Date d'inscription dimanche 12 mai 2013 Statut Membre Dernière intervention 25 juillet 2022 219
10 sept. 2021 à 20:08

j'ai créé un fichier js et un fichier html et j'ai copié collé ton code, avec <script src="fichier.js"></script>
quand j'écris B6660 (que j'ai également créé pour le test) et que je clique sur le bouton rien ne se passe, j'ai juste l'url qui passe de :
file:///C:/Users/delat/Desktop/articles/mapagehtml.html
à
file:///C:/Users/delat/Desktop/articles/mapagehtml.html?reference=B6660

en fait j'utilise mon site avec chrome mais sans connexion internet, c'est du local. Publier mon site en ligne ne me sert a rien pour l'utilisation que j'ai avec mon travail.

merci encore ;)

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
11 sept. 2021 à 10:14

A priori le formulaire est envoyé (d'où le changement d'url) et la page doit se recharger tellement vite en local que ça doit donner l'impression que rien ne se passe. Mais le formulaire ne devrait pas être envoyé, le submit devrait être intercepté par javascript.
Une erreur dans la console javascript du navigateur ?

Fogiel Messages postés 53 Date d'inscription dimanche 12 mai 2013 Statut Membre Dernière intervention 25 juillet 2022 219 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
Modifié le 11 sept. 2021 à 10:50

dans la console il y a ça :

apparemment le souci vient de la ligne la :
.addEventListener('submit', event => {

Fogiel Messages postés 53 Date d'inscription dimanche 12 mai 2013 Statut Membre Dernière intervention 25 juillet 2022 219 > Fogiel Messages postés 53 Date d'inscription dimanche 12 mai 2013 Statut Membre Dernière intervention 25 juillet 2022
11 sept. 2021 à 10:55

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525 > Fogiel Messages postés 53 Date d'inscription dimanche 12 mai 2013 Statut Membre Dernière intervention 25 juillet 2022
Modifié le 11 sept. 2021 à 11:00

L'erreur indique qu'on essaye d'appeler "addEventListener" sur un objet null, donc le getElementById() juste avant ne doit pas retourner l'élément attendu.
Quel est l'identifiant html de la balise form ? Quel est l'identifiant demandé dans la fonction getElementById() ?

Pour la dernière ligne il faut bien fermer les blocs dans l'ordre inverse d'ouverture afin de ne pas avoir d'erreur de syntaxe :
- une accolade pour fermer la déclaration de la fonction avec le paramètre event
- une parenthèse pour fermer l'appel de la fonction addEventListener()
- un point-virgule pour terminer l'instruction

Réponse 4 / 5

Fogiel Messages postés 53 Date d'inscription dimanche 12 mai 2013 Statut Membre Dernière intervention 25 juillet 2022 219
Modifié le 11 sept. 2021 à 11:09

document.getElementById('my-search-form').addEventListener('submit', event => {
 event.preventDefault();
  
  var url = '/' + document.getElementById('reference').value + '.html';
  
  window.open(url, '_blank');
});

<form id="my-search-form">
  <input type="search" name="reference" id="reference" value="" placeholder="Exemple: B6660" required>
  <input type="submit" value="Search">
</form>

Pour moi, pas de souci d'id je pense

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
11 sept. 2021 à 11:13

Ah oui je n'ai pas pensé à ajouter un événement pour exécuter le code js après le chargement de la page, si le code js est placé avant le code html, il va être exécuté avant que la balise form soit chargée dans le document et la fonction getElementById() ne va pas trouver l'élément en question.
Essaye simplement de déplacer le code javascript à la fin du code html dans le document en mettant la balise <script> avant la fermeture de la balise </body> :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Article Search</title>
</head>
<body>
    <form id="my-search-form">
        <input type="search" name="reference" id="reference" placeholder="Exemple: B6660" required>
        <input type="submit" value="Search">
    </form>

    <script src="fichier.js"></script>
</body>
</html>

jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024 4 719
11 sept. 2021 à 11:13

Bonjour,

Pour que ça marche il faut, soit attendre (via javascript) que la page aie fini de charger ... soit (et c'est ce qui est recommandé maintenant depuis plusieurs années...) c'est de placer ton code JS ( ou l'appel à tes fichiers JS ) à la fin de ta page .. juste avant le </body> de ton html )

Une autre solution encore... c'est de ne pas utiliser un bouton de type SUBMIT mais de type "BUTTON" afin de ne pas envoyer (submit) le form ...

<form id="my-search-form">
  <input type="search" name="reference" id="reference" value="" placeholder="Exemple: B6660" required>
  <input type="button" value="Search" id="btn_search">
</form>

document.getElementById('btn_search').addEventListener('click', event => {
  var url = '/' + document.getElementById('reference').value + '.html';
  window.open(url, '_blank');
});

NB: le window.open risque de coincer à un moment si jamais ton site n'est pas en https ...

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

Fogiel Messages postés 53 Date d'inscription dimanche 12 mai 2013 Statut Membre Dernière intervention 25 juillet 2022 219
11 sept. 2021 à 11:29

Mais ouiiiii ! je suis bête, je venais justement de remarquer mon erreur avant de lire vos réponses :^)
du coup j'ai bien un onglet qui s'ouvre maintenant mais l'adresse ne fonctionne pas, ça prend le chemin : file:///C:/B6660.html
dans js faut que je mette

var url = '/Users/delat/Desktop/articles/' + document.getElementById('reference').value + '.html';

et tout va bien :)

jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024 4 719
11 sept. 2021 à 11:50

Tu peux donc mettre la discussion en résolue

Discussions similaires

"Aucune application permettant d'ouvrir cette URL"

lien copié

Colis en cours de transport vers votre site de livraison ?

input signal out of range

Rajout de lien sur plusieurs pages