Faire disparaitre des inputs

26 juil. 2021, 16:04

Bonjour à tous,

Je travail sur un projet et je but sur un problème.
J'ai un formulaire et j'ai des champs a cacher en fonction d'un selecteur.
Je ne sais pas comment faire, si quelqu'un sur le forum sais comment faire pourrait-il m'aider ?

<form action="<?=htmlspecialchars($_SERVER['PHP_SELF'])?>" method="post">

<div class="container">
<div class="row d-flex justify-content-center align-items-center">

<div class="col-5 col-lg-2 offset-lg-0 mb-3">
<select name="liens"
id="liens"
class="form-control">
<option value="">Liens *</option>
<?php foreach(ARRAY_LIENS as $value):?>
<option value="<?=$value?>" <?=$value==$liens ? 'selected' : ''?> ><?=$value?></option>
<?php endforeach?>
</select>
<?= htmlentities($error['liens'] ?? '', ENT_QUOTES, 'UTF-8')?>
</div>

<div class="col-5 col-lg-2 d-flex mb-3 texteFond">
<div class="form-check me-2">
<input class="form-check-input"
type="radio"
value="1"
name="civility"
id="civilityO"
<?= (!empty($civility) && $civility == "1") ? 'checked' : '' ?>>
<label class="form-check-label" for="civility0">Mme</label>
</div>

<div class="form-check me-2">
<input class="form-check-input"
type="radio"
value="2"
name="civility"
id="civility1"
<?= (!empty($civility) && $civility == "2") ? 'checked' : '' ?>>
<label class="form-check-label" for="civility1">Mlle</label>
</div>

<div class="form-check">
<input class="form-check-input"
type="radio"
value="3"
name="civility"
required
id="civility2"
<?= (!empty($civility) && $civility == "3") ? 'checked' : '' ?>>
<label class="form-check-label" for="civility2">Mr</label>
</div>
<div class="error"><br><?= htmlentities($error['civility'] ?? '', ENT_QUOTES, 'UTF-8')?></div>
</div>

<div class="col-10 col-lg-4">
<div class="form-floating mb-3">
<input type="text"
class="form-control"
minlenght ="2"
maxlength="25"
name="name"
id="name"
placeholder="Votre nom"
pattern="<?=REGEX_NO_NUMBER?>"
required
value="<?= htmlentities($_POST['name'] ?? '', ENT_QUOTES, 'UTF-8')?>">
<div class="error"><?= htmlentities($error['name'] ?? '', ENT_QUOTES, 'UTF-8')?></div>
<label for="name">Nom *</label>
</div>
</div>

<div class="col-10 col-lg-4 offset-lg-0">
<div class="form-floating mb-3">
<input type="text"
class="form-control"
minlenght ="2"
maxlength="25"
name="firstname"
id="firstname"
placeholder="Votre prénom"
pattern="<?=REGEX_NO_NUMBER?>"
required
value="<?= htmlentities($_POST['firstname'] ?? '', ENT_QUOTES, 'UTF-8')?>">
<div class="error"><?= htmlentities($error['firstname'] ?? '', ENT_QUOTES, 'UTF-8')?></div>
<label for="firstname">Prénom *</label>
</div>
</div>

</div>
</div>

c'est un bout de code.
Et voila la fonction js mais cela ne fonctionne pas au top.

const select = document.querySelector('select');
const birthday = document.querySelector('#birthday');
const mail = document.querySelector('#mail');
const mailConf = document.querySelector('#mailConf');
const telHome = document.querySelector('#telHome');
const telWork = document.querySelector('#telWork');
const salary = document.querySelector('#salary');
const commentaire = document.querySelector('#commentaire');
const falcultaty = [birthday,mail,mailConf,telHome,telWork,salary,commentaire];

select.onchange=(event)=>{
var selectedOption = event.target.value;
console.log(event.target.value);
if (selectedOption != "Mere" || selectedOption != "Pere"){
falcultaty.forEach(element=>{
element.classList.add("d-none");
})
} else {
falcultaty.forEach(element=>{
element.classList.remove("d-none");
})
}
}

Merci par avance de vos retours.

@+ filou

27 juil. 2021, 14:25

Bonjour,

La condition suivante n'est pas correcte :

if (selectedOption != "Mere" || selectedOption != "Pere")

-> Si l'option sélectionnée est "Mere", l'option sera donc différente de "Pere" et inversement. Cette condition sera donc toujours vraie.

Il faudrait plutôt utiliser l'opérateur && (et) à la place de || (ou) :

if (selectedOption != "Mere" && selectedOption != "Pere")

Bonne journée,

28 juil. 2021, 13:27

Bonjour,
Merci cela fonctionne.

28 juil. 2021, 16:05

Je reviens vers vous car j'ai un autre soucis, j'ai du modifier mon fichier JS par rapport a mon select car quand j'arrive il est sur la valeur par defaut (liens *)
Je souhaiterai que quand j'arrive sur la page, le select est sur liens*, de se fait cela affiche pas le formulaire ou masque les champs.
Ensuite en sélectionnant représentant legal1 tout les champs par contre un autre que certain champs.

L'autre soucis que je rencontre est que quand j'actualise quand le sélecteur est sur représentant légal 1 il me fait comme ci j'étais sur un autre.
Je sais pas si je suis clair dans mon explication.
Voici mon code js :

// Fonction pour faire disparaitre input formulaire representant legal
const select = document.querySelector('select');

const labelcity = document.querySelector('#labelCivility');
const labelName = document.querySelector('#labelName');
const labelFirstname = document.querySelector('#labelFirstname');
const labelAdress = document.querySelector('#labelAdress');
const labelBirthday = document.querySelector('#labelBirthday');
const labelBirthdayMail = document.querySelector('#labelBirthdayMail');
const labelTels = document.querySelector('#labelTels');
const labelMail = document.querySelector('#labelMail');
const labelMailConf = document.querySelector('#labelMailConf');
const labelTelHome = document.querySelector('#labelTelHome');
const labelTelWork = document.querySelector('#labelTelWork');
const labelSalary = document.querySelector('#labelSalary');

const falcultaty = [labelBirthday,labelMail,labelMailConf,labelTelHome,labelTelWork,labelSalary];
//const falcultaty2 = [labelCivility,labelName,labelFirstname,labelAdress,labelBirthdayMail,labelTels];

document.addEventListener('DOMContentLoaded', function(event) {
var selectedOption = event.target.value;
if (selectedOption != "Representant legal 1"){
falcultaty.forEach(element=>{
if(element) element.classList.add("d-none");
})
} else {
falcultaty.forEach(element=>{
if(element) element.classList.remove("d-none");
})
}
});

select.onchange=(event)=>{
var selectedOption = event.target.value;
console.log(event.target.value);
if (selectedOption != "Representant legal 1"){
falcultaty.forEach(element=>{
if(element) element.classList.add("d-none");
})
} else {
falcultaty.forEach(element=>{
if(element) element.classList.remove("d-none");
})
}
};

// document.addEventListener('DOMContentLoaded', function(event) {
// var selectedOption = event.target.value;
// if (selectedOption = "Liens *"){
// falcultaty2.forEach(element=>{
// if(element) element.classList.add("d-none");
// })
// } else {
// falcultaty2.forEach(element=>{
// if(element) element.classList.remove("d-none");
// })
// }
// });

// select.onchange=(event)=>{
// var selectedOption = event.target.value;
// console.log(event.target.value);
// if (selectedOption = "Liens *"){
// falcultaty2.forEach(element=>{
// if(element) element.classList.add("d-none");
// })
// } else {
// falcultaty2.forEach(element=>{
// if(element) element.classList.remove("d-none");
// })
// }
// };

// Fin fonction pour faire disparaitre input formulaire representant legal

Merci pour votre aide
@+ Filou

28 juil. 2021, 17:04

Le problème vient de la récupération de l'option sélectionnée au chargement de la page.

Ce qui fonctionne :
Dans la fonction onchange appliqué sur le select, on récupère l'option sélectionnée grâce à l'instruction var selectedOption = event.target.value;
Dans cette instruction, "event" correspond à l'évènement déclenché lorsque l'élément change (onchange), "event.target" correspond à l'élément qui a changé (la balise select) et "event.target.value" retourne la valeur de l'élément qui a changé.
On récupère donc la valeur (value) de l'élément qui a changé (event.target). Cet élément est bien la balise html select puisque la fonction onchange est appliqué sur cet élément via select.onchange=...

Ce qui ne fonctionne pas :
Dans la fonction onload déclenchée au chargement de la page, "event" correspond à l'évènement déclenchée lorsque la page est chargée (DOMContentLoaded), "event.target" correspond alors au document html qui a été chargé (puisque la fonction onload est appliqué sur l'élément document via l'instruction document.addEventListener()).
On ne peut donc pas utiliser l'instruction event.target.value car on cherche alors à récupérer la valeur du document html, ce qui n'a pas de sens.

Dans la fonction déclenchée au chargement de la page, il faut donc cibler directement la balise select pour en récupérer la valeur. Un exemple avec getElementById() pour récupérer l'élément select :

document.addEventListener('DOMContentLoaded', function(event) {
    var selectedOption = document.getElementById('liens').value;
    // [...]

28 juil. 2021, 18:07

Merci pour votre aide je ne parviens pas le mettre en place, à la place de liens je met falcultaty ?

29 juil. 2021, 11:05

Mes explications ne doivent pas être claires.

Il faut remplacer dans le code js :

document.addEventListener('DOMContentLoaded', function(event) {
    var selectedOption = event.target.value;
    // [...]

Par ce code pour récupérer l'option sélectionnée dans le select #liens au chargement de la page (DOMContentLoaded) :

document.addEventListener('DOMContentLoaded', function(event) {
    var selectedOption = document.getElementById('liens').value;
    // [...]

En développement js, il faut prendre le réflexe de toujours ouvrir la console du navigateur (depuis les Outils de développement du navigateur) pour voir les éventuelles erreurs javascript et ne pas hésiter à abuser de console.log(); pour débugger le code et comprendre comment il fonctionne.

30 juil. 2021, 09:28

Merci pour votre aide ynx .
J'ai réussi a faire mon code JS. Grace a vous.
Voici ce que j'ai fait :

const select = document.querySelector('select');

select.addEventListener('change',function(){
const selectedValue=this.value;
console.log(selectedValue);
if (!selectedValue){
document.querySelectorAll(".flag").forEach(element => {
element.classList.add("blockdisplay");
});
} else {
if(selectedValue==1){
document.querySelectorAll(".flag").forEach(element => {
element.classList.remove("blockdisplay");
});
} else {
document.querySelectorAll(".flag").forEach(element => {
element.classList.add("blockdisplay");
});
document.querySelector("#bloc1").classList.remove("blockdisplay");
document.querySelector("#bloc3").classList.remove("blockdisplay");
}
}
})

Par contre on me dit que je peux simplifier mon code en factorisant avec une fonction, mais je ne vois pas.
Moi est le JS ça fait deux. Je débute dans le code.
Merci encore à vous pour votre aide et merci au forum.

@+ Filou

30 juil. 2021, 13:50

En effet si il y a du code dupliqué, on peut factoriser ce code dans une fonction.

Par exemple si on reprends la dernière version du code :

const select = document.querySelector('select');

select.addEventListener('change', function() {
  const selectedValue=this.value;

  if (!selectedValue){
    document.querySelectorAll(".flag").forEach(element => {
      element.classList.add("blockdisplay");
    });
  } else {
    if (selectedValue == 1){
      document.querySelectorAll(".flag").forEach(element => {
        element.classList.remove("blockdisplay");
      });
    } else {
      document.querySelectorAll(".flag").forEach(element => {
        element.classList.add("blockdisplay");
      });
      document.querySelector("#bloc1").classList.remove("blockdisplay");
      document.querySelector("#bloc3").classList.remove("blockdisplay");
    }
  }
});

-> on remarque que les lignes 7-8-9 et les lignes 16-17-18 sont identiques, le code est duppliqué.

On peut donc déplacer ce code dans une fonction (pour l'exemple je nomme cette fonction addDisplayBlockClassOnFlag() mais tu peux la renommer comme tu souhaites) et appeler cette fonction à l'endroit où le code était dupliqué :

const select = document.querySelector('select');

select.addEventListener('change', function() {
  const selectedValue=this.value;

  if (!selectedValue){
    addDisplayBlockClassOnFlag();
  } else {
    if (selectedValue == 1){
      document.querySelectorAll(".flag").forEach(element => {
        element.classList.remove("blockdisplay");
      });
    } else {
      addDisplayBlockClassOnFlag();
      document.querySelector("#bloc1").classList.remove("blockdisplay");
      document.querySelector("#bloc3").classList.remove("blockdisplay");
    }
  }
});

function addDisplayBlockClassOnFlag() {
  document.querySelectorAll(".flag").forEach(element => {
    element.classList.add("blockdisplay");
  });
}

Faire disparaitre des inputs

Qui est en ligne