Récupération valeur dynamique pour modification URL

**IT_Project** · 03/01/2019, 09h44

Bonjour,

Je souhaite demander à l'utilisateur de saisir deux dates (avec un input date). Je veux récupérer les valeurs saisies pour les entrer dans une URL (j'ai donc des variables dans mon URL).

J'y suis presque, mais je ne récupère pas une valeur mais un [object Event]. J'ai fait tout un tas de test mais rien à faire, je ne trouve pas la solution.

Voici mon code :

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
<input type="date" id="mySelect" onchange="handler(event);"/> // mon input date qui demande la date à l'user
<p id="affiche"></p> // test - affiche bien dynamiquement la bonne valeur
 
<div class="division" onclick="openInNewTab('https://monreporting.fr/time:(from:%27'+valurl+'T23:00:00.000Z%27,mode:absolute,to:%272019-01-02T10:26:38.772Z%27)) // affiche time:(from:'[object Event]T23:00:00.000
 
<script>
        function handler(e){
                alert(e.target.value); //test - récupère bien la bonne valeur
                valurl = e;
  
                var x = document.getElementById("mySelect").value; // récupère la valeur entrée
                document.getElementById("affiche").innerHTML = x; // test d'affichage
        }
        var valurl = x; //affectation valeur
</script>

J'ai essayé d'épurer le code au maximum pour ne garder que l'essentiel, avec les tests d'affichage des valeurs également.
Je ne suis pas un expert javascript, il y a surement encore beaucoup de lignes inutiles...

Par défaut ou si l'utilisateur ne sélectionne pas de date, j'aimerais que la période soit du 1er janvier de l'année en cours à la date du jour (et que le lien soit tout de même cliquable).

Merci pour votre aide :)

**badaze** · 03/01/2019, 22h15

Comme ça ça fonctionne mais ton url n'est pas bien formée. Personnellement je n'aurais pas fait comme ça (mais je ne suis pas sûr de savoir ce que tu veux faire).

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
<input type="date" id="mySelect" onchange="handler(event);"/> 
<p id="affiche"></p>
 
<div class="division" onclick="window.open('https://monreporting.fr/time:(from:%27' + valurl + 'T23:00:00.000Z%27,mode:absolute,to:%272019-01-02T10:26:38.772Z%27)')">
xxxx
</div> 
 
<script>
        
  function handler(e){
                valurl = document.getElementById("mySelect").value; // récupère la valeur entrée
                document.getElementById("affiche").innerHTML = valurl; // test d'affichage
        }
        var valurl = "";
</script>

J'ai mis window.open à la place de ton openInNewTab que je n'ai pas.

**IT_Project** · 04/01/2019, 11h48

Cela fonctionne merci beaucoup !

**CosmoKnacki** · 04/01/2019, 17h26

Tu dois bannir tout code javascript de tes attributs html et utiliser un fichier dédié à ton code javascript.

Voilà comment je procéderai:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<html><head><meta charset="utf-8"/></head><body>
 
<label for="dateFrom">début: </label>
<input type="date" id="dateFrom"/>
 
<label for="dateTo">fin: </label>
<input type="date" id="dateTo"/>
<br/>
<a href="" id="interval" target="_blank">***</a>
 
<script src="scriptdate.js"></script>
 
</body></html>

Code scriptdate.js :

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
'use strict';
{ // on encapsule pour éviter de polluer l'espace de nom
 
    // on créer un objet avec les deux inputs de l'intervalle pour alléger l'écriture
    const di = {
        from: document.getElementById('dateFrom'),
        to  : document.getElementById('dateTo')
    }
 
    function updateLink() {
        let from = di.from.valueAsDate,
            to = di.to.valueAsDate,
            interval = document.getElementById('interval');
        interval.setAttribute('href', `https://monreporting.fr/time.php?from=${encodeURIComponent(from.toISOString())}&to=${encodeURIComponent(to.toISOString())}`);
        interval.replaceChild(document.createTextNode(`${from.toLocaleDateString()} - ${to.toLocaleDateString()}`), interval.firstChild);
    }
 
    // on attache les gestionnaires d'événement
    di.from.addEventListener('change', () => {
        if (di.from.value > di.to.value)
            di.to.value = di.from.value;
 
        updateLink();
    }, false);
 
    di.to.addEventListener('change', () => {
        if (di.from.value > di.to.value)
            di.from.value = di.to.value;
 
        updateLink();
    }, false);
 
    // on initialise avec les dates par défaut
    di.from.valueAsDate = new Date(Date.UTC(new Date().getFullYear(), 0, 1));
    di.to.valueAsDate = new Date();
    updateLink();
}

À toi d'adapter le template du lien à ta guise.

Récupération valeur dynamique pour modification URL

JavaScript

Vue hybride

Discussions similaires

Partager

Partager