Valeur dans un span

Version imprimable

Valeur dans un span

Bonjour,

Je rencontre un petit souci en JS, langage que je ne maitrise pas tout a fait.
J'ai une valeur qui se stock dans un span et je ne comprends pas vraiment comment le récupérer pour faire le traitement en php.
Voici le code que j'ai :

Code:

1
2
3
<div class="reportrange float-right form-control" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="icon-calendar"></i>&nbsp;
<span></span> <b class="caret"></b>

Ici pour le JS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
                      function cb(start, end) {
				$(".reportrange span").html(start.format('YYYY-MM-DD') + '_' + end.format('YYYY-MM-DD'));
			         }
			        cb(moment().subtract(29, 'days'), moment());
 
			        $(".reportrange").daterangepicker({
				"buttonClasses": "button button-rounded button-mini nomargin",
				"applyClass": "button-color",
				"cancelClass": "button-light",
				ranges: {
				   'Aujourd\'hui': [moment(), moment()],
				   'Hier': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
				   '7 jours': [moment().subtract(6, 'days'), moment()],
				   '30 jours': [moment().subtract(29, 'days'), moment()],
				   'Le mois': [moment().startOf('month'), moment().endOf('month')],
				   'Mois précédent': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
				}
			}, cb);

comment récupérer la valeur soit dans un input hidden soit directement dans la page de traitement.

Merci,

12/05/2021, 08h03
SpaceFrog

Il faut comprendre la chronologie.
php n'a pas accès aux éléments du DOM
php reçoit éventuellement les valeurs par l'intermédiaire:

- des éléments de formulaire (hidden ou non)
- des paramètres passés en get dans l'url envoyée au serveur
- des requêtes ajax

Coté client, tu peux manipuler les données au moyen de javascript.

Techniquement parlant un span ne contient pas de "valeur", seul les élements de form ont une value...

Pour récupérer le contenu texte ou html de ton span tu dois le récupérer au moyen de JS pour ensuite utiliser une des 3 méthodes énumérées ci-dessus pour l'envoyer au serveur.
Il faut d'abord déterminer quelle méthode tu veux utiliser...
13/05/2021, 10h00
bertrand59789

Bonjour,
récupérer la valeur via $_post par le biais d'un hidden ou par $_get cela me va.
Le souci est que je ne trouve pas ou est stocké la valeur du champ.
13/05/2021, 11h08
Séb.
Citation:

Le souci est que je ne trouve pas ou est stocké la valeur du champ.

Tu dis que la valeur est dans un <span>

Il faut que tu pointes ce span (pour cela tu dois identifier ce qui le distingue), ensuite avec innerText tu peux récupérer son contenu et le placer dans un <input> ou autre en vue d'une transmission à PHP.

Ex. si un ID distingue ton <span> et que tu veux mettre sa valeur dans un champ caché de formulaire :

Code:

<span id="mon-span">Ma valeur à transmettre</span>
Code:

1 2 const spanValue = document.getElementById("mon-span").innerText; document.forms["ton-formulaire"].tonInputHidden.value = spanValue;
Voilà pour le principe ;)

Bonjour,

J'ai essayer le code mais sans succès.
je pense que je place mal le code.

voici ce que j'ai fait :

Code:

1
2
3
4
5
6
7
8
<form method="post" action="" name="action" >
<div class="reportrange float-right form-control" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="icon-calendar"></i>&nbsp;
<span id="mon-span"></span> <b class="caret"></b>
</div>
<input type="hidden" name="d" Value=""/>
<input type="submit" value="envoyer"/> 
</form>

et en bas de la page j'ai mis cela :

Code:

1
2
3
4
<script>
const spanValue = document.getElementById("mon-span").innerText;
document.forms["action"].d.value = spanValue;
</script>

15/05/2021, 09h26
Séb.

1 pièce(s) jointe(s)

Je viens de tester, ça fonctionne : le contenu du span (quand il y en a un) est plus placé dans le <input>.

Pièce jointe 597860
15/05/2021, 10h40
bertrand59789

1 pièce(s) jointe(s)

Bonjour,

J'obtiens cela sur la console.
Pièce jointe 597861

j'ai rajouter un Id sur le input "d" au cas ou.
15/05/2021, 12h05
mathieu

quelle bibliothèque utilisez vous pour l'appel à "daterangepicker" ?
15/05/2021, 14h22
bertrand59789

Bonjour,
La bibliothèque et Jquery.
15/05/2021, 15h19
mathieu

il n'y a pas ça de base dans jquery. ni même avec jquery-ui, il y a seulement un sélecteur de date unique
https://jqueryui.com/datepicker/
15/05/2021, 21h03
Séb.

Citation:

Envoyé par bertrand59789

J'obtiens cela sur la console

À quel moment valorises-tu le <span> ? Tu appelles bien le bout de script APRES la valorisation du <span> ?
Tu ne peux pas valoriser le <input> en même temps (ou à la place) que le <span> ?

Bonjour,
j'ai mis le bout de script après le span

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<label>Rechercher selon une plage de date :</label>
<form method="post" name="action" action="" >
    <div name="mon-div" class="reportrange float-right form-control" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
        <i class="icon-calendar"></i>&nbsp;
        <span id="mon-span"></span> <b class="caret"></b>
    </div>
    <input type="hidden" id="d" name="d" Value="" />
    <input type="submit" value="envoyer"/>                                            
</form>
<script>
const spanValue = document.getElementById("mon-span").innerText;
document.forms["action"].d.value = spanValue;
</script>

24/05/2021, 20h02
Séb.

Ton span ne contient rien, il n'y a donc rien à mettre dans ton input.