Contrôle d'un champ de formulaire suivant date

Version imprimable

12/03/2020, 12h31
Marcopololo

Contrôle d'un champ de formulaire suivant date

Bonjour,

Je souhaiterais savoir s'il est possible en javascript de forcer la valeur après une certaine date.

En clair :
J'ai une liste déroulante avec 3 possibilités (A, B et C mais je voudrais que après une date fixée dans mon script une seule la valeur A soit possible

Avant de me lancer je voulais savoir si cela est dans les choses faisables.

Merci de votre aide

Marc G.
12/03/2020, 14h55
SpaceFrog

en js c'est bien entendu réalisable ...
Mais contournable...
mieux vaut le forcer en php ( en ne mettant qu'une option sur test de date ) puis le revérifier en php à la soumission
12/03/2020, 19h37
Marcopololo

Merci de l'information.
Donc en php je peux par exemple pour fixer une date utiliser un champ caché. J'utilise RsForm, j'espère que je vais pouvoir en php masquer mes champs de ma liste déroulante.
Je vais regarder les fonctions et j'appelerai au secours si besoin.
Si j'utilise hidden pour masquer les deux choix que je ne veux plus cela devrait pouvoir fonctionner ?
Ou la fonction disable, mais si j'ai bien compris cette ffonction verrouille totalement la liste ?

Marc G.

En partant avec ce code j'affiche bien la valeur que je souhaite pour ensuite faire une fonction conditionnelle avec une date
Code:

1 2 3 4 5 //<code> $db = JFactory::getDbo(); $db->setQuery("SELECT `FieldValue` FROM `#__rsform_submission_values` WHERE `FieldValue`='Open (Non sélective)' LIMIT 1"); return $db->loadResult(); //</code>
Ma première question je voudrais attribuer readonly a cette textbox mais je n'y arrive pas.

Bon j'ai trouvé.
Première phase terminée :

Code:

1
2
3
4
5
6
//<code>
  $db = JFactory::getDbo();
    $db->setQuery("SELECT `FieldValue` FROM `#__rsform_submission_values` WHERE `FieldValue`='Open (Non sélective)' LIMIT 1");
    return $db->loadResult();
$readonly = 'readonly';
    //</code>

13/03/2020, 10h49
NoSmoking

Bonjour,

https://www.developpez.com/template/kit/kitinfo.png Merci de poster les discussions concernant le PHP sur le forum correspondant

Après réflexion j'ai du mal à trouver une solution en php.
Alors je vais essayé de décrire ce que j'essaye de faire. Je bloque sur la seconde partie. J'ai réutilisé la première partie d'un code ou l'on m'a déjà bien aidé.
J'ai une liste déroulante avec 3 valeurs :
Open (non sélective)
Sélective
Manche de Coupe de France

Ma liste déroulante
Code:

1 2 3 4 5 <select name="form[type_competition][]" id="type_competition" style="width:200px;text-align:center;" class="rsform-select-box form-control" aria-required="true"> <option value="Open (Non sélective)">Open (Non sélective)</option> <option value="Sélective">Sélective</option> <option value="Manche de Coupe de France">Manche de Coupe de France</option> </select>
Je souhaiterais que après une certaine date seul Open (non sélective) apparaisse

J'ai fais la première partie mais je n'arrive ps à greffer la gestion de la liste déroulante.
Code:

1 2 3 4 5 6 7 8 Var a = Date(2020,9,15) If number a.textContent.split("/").reverse()))+ 8.64*Math.pow(10,7) < new Date()){ document.getElementById( ... .style.display="none";
Merci de votre aide

Voila ce que j'ai essayé de faire mais cela ne marche pas
8 étant l'id de mon formulaire, type_competition ma liste déroulante et sélective la valeur de ma liste que je veux cacher
Code:

1 2 3 4 5 6 7 Var a = Date(2020,9,15) If (number (a.textContent.split("/").reverse())+ 8.64*Math.pow(10,7) < new Date()){ (document.forms["8"].elements['type_competition`].selectedIndex = "sélective").style.display="none";}

Voilà ce que j'ai fait mais cela ne marche pas, mes champs a et m de ma liste déroulante ne sont pas masqués.

Code html de ma liste déroulante

Code:

1
2
3
4
5
<select name="form[type_competition][]" id="type_competition" style="width:200px;text-align:center;" class="rsform-select-box form-control" aria-required="true">
	<option value="Open (Non sélective)">Open (Non sélective)</option>
	<option value="Sélective">Sélective</option>
	<option value="Manche de Coupe de France">Manche de Coupe de France</option>
	</select>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script language="JavaScript">
 
window.addEventListener("load",function(){
 
  var a = Date(2020,3,13)
  var b = document.getElementById("Sélective");
  var m = document.getElementById("Manche de Coupe de France");
 
  // Si la date du jour est supérieure à la date de la variable a
  If (number (a.textContent.split("/").reverse())+ 8.64*Math.pow(10,7) < new Date()){
  {
  // on masque les champs a et m de la liste déroulante	
	b.style.display == "none";
   	m.style.display == "none";
 
  }
  else
  {
  	b.style.display = "none";
	m.style.display = "none";	
  }
  },false) 
</script>

14/03/2020, 16h31
javatwister

id != value (= true) :roll:
14/03/2020, 16h41
Marcopololo

J'imagine que c'est pour me gratter la tête.
Que veux tu dire ?
Et autre question comme j'utilise la fonction date faut il inverser la chaine de date ?

Compris id est différent de value :D

J'ai avancé et je pense que la première partie fonctionne. Par contre je n'ai pas saisie complètement l'allusion de Javatwister

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
 
 
window.addEventListener("load",function(){
 
  //jour et mois début de la saison
  const mois=3;
  const jour=13;
 
  // Value de ma liste déroulante
  var b = document.getElementById("Sélective");
  var m = document.getElementById("Manche de Coupe de France");
 
  var d = new Date();
  // date de fin apparition ensemble liste déroulante type compétition
  var date_fin = d.getFullYear()+','+(mois)+','+(jour);
 
 
 
  // Si la date du jour est supérieure à la date de la variable a
  If (Number(date_fin.textContent.split(","))+ 8.64*Math.pow(10,7) < new Date()){
  {
  // on masque les champs a et m de la liste déroulante	
	b.style.display = "none";
   	m.style.display = "none";
  }
  else
  {
  	b.style.display = "block";
	m.style.display = "block";	
  }
  },false)

15/03/2020, 10h21
Marcopololo

Si je comprends bien c'est l'utilisation de getElementById qui ne convient pas pour une valeur de liste déroulante ?

Marc G.

J'ai modifié mes variables pour essayer de récupérer les valeurs de ma liste déroulante mais ca ne marche pas mieux.

Code:

1
2
3
4
5
<select name="form[type_competition][]" id="type_competition" style="width:200px;text-align:center;" class="rsform-select-box form-control" aria-required="true">
	<option value="Open (Non sélective)">Open (Non sélective)</option>
	<option value="Sélective">Sélective</option>
	<option value="Manche de Coupe de France">Manche de Coupe de France</option>
	</select>

Code:

1
2
3
4
5
// Value de ma liste déroulante
  var b = form[type_competition].options["Sélective"].value;
  //var b = document.getElementById("Sélective");
   var m = form[type_competition].options["Manche de Coupe de France"].value;
  //var m = document.getElementById("Manche de Coupe de France");

J'essaye de nombreuses façon mais je n'arrive pas à faire fonctionner mon script.
Je pense avoir bien besoin d'aide.

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
 
window.addEventListener("load",function(){
 
  //jour et mois début de la saison
  const mois=3;
  const jour=13;
 
  // Value de ma liste déroulante
  var myList = document.getElementById('type_competition');  
    var masqueList = myList.getElementsByTagName("S&eacute;lective");  
 
  var d = new Date();
  // date de fin apparition ensemble liste déroulante type compétition
  var date_fin = d.getFullYear()+','+(mois)+','+(jour);
 
 
 
  // Si la date du jour est supérieure à la date de la variable a
  If (Number(date_fin.textContent.split(","))+ 8.64*Math.pow(10,7) < new Date()){
 
  // on supprime les champs a et m de la liste déroulante	
	myList.removeChild(masqueList.item(2));
 
  }},false)

15/03/2020, 17h21
NoSmoking
Regarde ce qui se cache derrière document.getElementById !

Je te mets des liens, que peut-être tu liras !
https://club.developpez.com/webdesig...ogo_faq_js.gif
Prend le temps de prendre le temps !

Merci du guide, si si je suis preneur de tout, ayant plus que des lacunes, j'apprends au fur et à mesure mais c'est tellement vaste.

Voilà ce que j'ai fait.
J'ai plusieurs questions, dans ma liste la première liste est une ligne vide, dois je la prendre en compte ?
Et au lieu d'utiliser le numéro de l'option de ma liste es ce que je peux mettre sa valeur ?

Pour la gestion des dates je pensais avoir compris, à priori cela fonctionne. Ayant défini ma construction de date du type (yyyy,m,j) je ne l'ai pas inversée pour le calcul.
Mais j'ai toujours une erreur SyntaxError: unexpected token: '{ mais quand je vérifie je ne trouve pas l'erreur.
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 <script language="JavaScript"> window.addEventListener("load",function(){ //jour et mois début de la saison const mois=3; const jour=13; // Value de ma liste déroulante var list2 = document.getElementById('type_competition').options[2]; var list3 = document.getElementById('type_competition').options[2]; var d = new Date(); // date de fin apparition ensemble liste déroulante type compétition var date_fin = d.getFullYear()+','+(mois)+','+(jour); // Si la date du jour est supérieure à la date de la variable a If (Number(date_fin.textContent.split(","))+ 8.64*Math.pow(10,7) < new Date()){ // on supprime les champs 2 et 3 de la liste déroulante oSelect.options[2].selected = false; oSelect.options[3].selected = false; }},false) </script>

Es ce que j'ai le droit d'écrire cela. J'ai compris que oSelect n'est qu'une fonction

Code:

1
2
3
4
5
6
7
8
 
// Value de ma liste déroulante
  var list2 = document.getElementById('type_competition');
  var list3 = document.getElementById('type_competition');  
 
if.....{
list2.options[2].selected = false;
list3.options[3].selected = false;

Bon après lecture et relecture mon bout de code de conversion de la date pour la fonction if ne fonctionnait pas. Il est peut être pas des plus simple mais voici ce que j'ai fait. Et cette fois j'ai bien des millisecondes à comparer. Ouf. Reste la fonction if...

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
 
<script type="text/javascript">
 
window.addEventListener("load",function(){
 
  //jour et mois début de la saison
  const mois=3;
  const jour=13;
 
  // Value de ma liste déroulante
  var list2 = document.getElementById('type_competition').options[2];
  var list3 = document.getElementById('type_competition').options[3];  
 
 
  var d = new Date();
  // date de fin apparition ensemble liste déroulante type compétition
  var date_fin = d.getFullYear()+','+(mois)+','+(jour);
// conversion dates en millisecondes
  var date_conv = Date.parse(date_fin);
  var date_maint = Date.parse(d);
 
 
  // Si la date du jour est supérieure à la date de la variable a
 if (Number((date_conv)+ 8.64*Math.pow(10,7)) < date_maint){
 
  // on supprime les champs 2 et 3 de la liste déroulante	
	list2.selected = false;
    list3.options[3].selected = false;
  }},false) 
</script>

J'ai l'impression de bien avoir avancé et compris pas mal de choses.
Cela fonctionne presque. J'arrive à supprimer une option mais pas deux.
Faut il passer par For i=1 to... ?

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
 
<script type="text/javascript">
 
window.addEventListener("load",function(){
 
  //jour et mois début de la saison
  const mois=3;
  const jour=13;
 
  // Value de ma liste déroulante
 var maListe = document.getElementById('type_competition');
 
  var d = new Date();
  // date de fin apparition ensemble liste déroulante type compétition
  var date_fin = d.getFullYear()+','+(mois)+','+(jour);
// conversion date
  var date_conv = Date.parse(date_fin);
  var date_maint = Date.parse(d);
 
  //Si date conv est après maintenant alors on supprime sélective et manche de coupe de France de la liste déroulante
  if (Number((date_conv)+ 8.64*Math.pow(10,7)) < date_maint){
 
  // on supprime le champ Manche de coupe de France de la liste déroulante	
 
     maListe.removeChild(maListe.childNodes[2]);
 
  }},false) 
 
</script>

J'ai essayé avec la fonction for i mais cela ne fonctionne pas.

Je souhaite supprimer les valeurs 2 et 3

Code:

1
2
3
4
5
6
<select name="form[type_competition][]" id="type_competition" style="width:200px;text-align:center;" class="rsform-select-box form-control" aria-required="true">
<option value="0"></option>
<option value="1">Open (Non s&eacute;lective)</option>
<option value="2">S&eacute;lective</option>
<option value="3">Manche de Coupe de France</option>
</select>

Code:

1
2
3
4
// on supprime les champs Manche de coupe de France et Sélective de la liste déroulante	
     for (var i = 2; i < maListe.options.length; i++){ 
     maListe.removeChild(maListe.childNodes[i]);
     }

Cela fonctionne mais il m'a fallu mettre en premier ma dernière option ???

Code:

1
2
3
4
 
//  on supprime les champs Manche de coupe de France et Sélective de la liste déroulante		
     maListe.removeChild(maListe.childNodes[3]),
     maListe.removeChild(maListe.childNodes[2]);

16/03/2020, 09h50
SpaceFrog

si tu supprimes la deuxième ... quel ordinalité prend la troisième ?
16/03/2020, 10h09
Marcopololo

En supprimant la deuxième (sup option 3) 0-1-2-3 sont présents
Si je supprimes la première(sup option 2) 0-1 et 3 sont présents
Si je met les deux lignes (sup 2 et sup 3) 0 et 1 sont présents ??????
16/03/2020, 10h27
SpaceFrog

Non l'ordinalité se met à jour

si tu supprimes la deuxième ... ben la troisième devient la deuxième ...
16/03/2020, 10h40
Marcopololo

Donc j'ai utilisé la bonne méthode. Et c'est pour cela qu'avec la fonction for i.... cela ne fonctionnait pas car dès que je supprime une ligne elle se décale forcément.

Merci encore. En tout cas j'ai ramé mais bien appris. Reste mon soucis de gestion année pour lequel j'ai fait un nouveau post.