Récupération valeur dynamique pour modification URL

Version imprimable

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:

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 :)

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:

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.

04/01/2019, 11h48
IT_Project

Cela fonctionne merci beaucoup ! :)

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:

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:

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.