Discussion :

[Pryst]

Bonjour à tous, je viens vers vous car je bloque un petit peu sur la manière de modifier un bouton-lien selon les values de plusieurs select-box.

Je vous partage un petit exemple :

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
16
17
18
19
<label for="age-select">Choisis ton age</label>
 
<select name="age" id="age-select">
  <option value="">--Please choose an option--</option>
  <option value="20">20 ans</option>
  <option value="30">30 ans</option>
  <option value="40">40 ans</option>
  <option value="50">50 ans</option>
</select>
 
<label for="gender-select">Etes-vous : </label>
 
<select name="gender" id="gender-select">
  <option value="">--Please choose an option--</option>
  <option value="0">Une femme</option>
  <option value="1">Un homme</option>
</select>
 
<a class="btn btn-default" href="https://nomdedomaine.fr/201" role="button">Lien</a>

(Dans ce cas la réponse du formulaire serrait : 20 ans et je suis un homme d'où le bouton qui nous emmènerais en /201).

Merci d'avance pour vos conseils.

[Toufik83]

Bonjour,

Quel est le code JS que vous utilisez ?

[Pryst]

Bonjour,
Justement je bloque totalement sur la manière de faire du coup pas de JS en vu pour l'instant.
Merci d'avance

[Toufik83]

Vous êtes le patron, et on bosse pour vous

Code :

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
const btn = document.querySelector('.btn.btn-default'),
  ageSel = document.getElementById("age-select"),
  genderSel = document.getElementById("gender-select");
[ageSel, genderSel]
.forEach(select => {
  select.addEventListener('change', function() {
    let href = btn.getAttribute('href');
    if (this.value !== "" && (this.id == 'age-select' ?
        genderSel.value !== "" : ageSel.value !== "")) {
      if (href.indexOf(".fr/") == -1)
        href = href + "/" + ageSel.value + genderSel.value;
      else href = href.replace(/(?<=\/)\d+$/gi, ageSel.value + genderSel.value);
      btn.setAttribute("href", href);
    } else btn.setAttribute("href", href.substr(0, href.indexOf(".fr") + 3));
  });
});

[unanonyme]

On eut put sélectionner les nodes ainsi

Code :

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

1
2
const r = document.querySelectorAll("#age-select, #gender-select");
[...r].map(v => v.outerHTML).map(v=>console.log(v));

Quitte à écrire les conditions comme vous le faites, et je peux comprendre pourquoi, autant y allez franco ^^

Code :

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

const _0x581a4b=_0x54e9;function _0x18a0(){const _0x16f5d0=['indexOf','335935dHponB','15257286TgiGgf','18LkOkxs','addEventListener','.fr','getAttribute','substr','.btn.btn-default','3QlltLC','setAttribute','value','.fr/','874734kBABkF','1235366orLnoX','age-select','replace','gender-select','change','getElementById','1331232PMxlRt','href','911030HIRlrw','2288512tPvCAF'];_0x18a0=function(){return _0x16f5d0;};return _0x18a0();}(function(_0x45ce19,_0x3e97c7){const _0x47a22c=_0x54e9,_0x3c6d15=_0x45ce19();while(!![]){try{const _0x5c0822=parseInt(_0x47a22c(0x114))/0x1+parseInt(_0x47a22c(0x109))/0x2*(parseInt(_0x47a22c(0x104))/0x3)+parseInt(_0x47a22c(0x112))/0x4+-parseInt(_0x47a22c(0x111))/0x5*(-parseInt(_0x47a22c(0x116))/0x6)+parseInt(_0x47a22c(0x108))/0x7+-parseInt(_0x47a22c(0x10f))/0x8+-parseInt(_0x47a22c(0x115))/0x9;if(_0x5c0822===_0x3e97c7)break;else _0x3c6d15['push'](_0x3c6d15['shift']());}catch(_0x5245b7){_0x3c6d15['push'](_0x3c6d15['shift']());}}}(_0x18a0,0x51f34));function _0x54e9(_0x292109,_0x1fc351){const _0x18a0b8=_0x18a0();return _0x54e9=function(_0x54e965,_0x4c6a05){_0x54e965=_0x54e965-0x100;let _0x268252=_0x18a0b8[_0x54e965];return _0x268252;},_0x54e9(_0x292109,_0x1fc351);}const btn=document['querySelector'](_0x581a4b(0x103)),ageSel=document[_0x581a4b(0x10e)](_0x581a4b(0x10a)),genderSel=document[_0x581a4b(0x10e)](_0x581a4b(0x10c));[ageSel,genderSel]['forEach'](_0x50c25a=>{const _0x4bbc89=_0x581a4b;_0x50c25a[_0x4bbc89(0x117)](_0x4bbc89(0x10d),function(){const _0x4c3552=_0x4bbc89;let _0x254fdb=btn[_0x4c3552(0x101)](_0x4c3552(0x110));if(this[_0x4c3552(0x106)]!==''&&(this['id']==_0x4c3552(0x10a)?genderSel[_0x4c3552(0x106)]!=='':ageSel[_0x4c3552(0x106)]!=='')){if(_0x254fdb[_0x4c3552(0x113)](_0x4c3552(0x107))==-0x1)_0x254fdb=_0x254fdb+'/'+ageSel[_0x4c3552(0x106)]+genderSel['value'];else _0x254fdb=_0x254fdb[_0x4c3552(0x10b)](/(?<=\/)\d+$/gi,ageSel[_0x4c3552(0x106)]+genderSel[_0x4c3552(0x106)]);btn[_0x4c3552(0x105)]('href',_0x254fdb);}else btn[_0x4c3552(0x105)](_0x4c3552(0x110),_0x254fdb[_0x4c3552(0x102)](0x0,_0x254fdb['indexOf'](_0x4c3552(0x100))+0x3));});});

[NoSmoking]

Bonjour,
pour commencer, on va oublier la réponse de unanonyme qui devrait surveiller ce qu'il fume !

... du coup pas de JS en vu pour l'instant.

tu ne vas pas pouvoir t'en passer sur ce coup c'est ce qui fait que les pages sont « dynamiques ».

Vous êtes le patron, et on bosse pour vous

néanmoins Toufik83 on sait tous que tu apprécies d'aider et de partager tes connaissances

Ceci étant j'aurais eu une autre approche en ajoutant un écouteur sur le click, non pas sur les <select> mais sur le lien.

Cela pourrait ressembler à :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.querySelector("a.btn").addEventListener("click", (e) => {
  // récup. des valeurs
  const age = document.getElementById("age-select").value;
  const genre = document.getElementById("gender-select").value;
  // si existent
  if (age && genre) {
    // on affecte le href du lien
    e.target.href = `https://nomdedomaine.fr/${age}${genre}`;
  }
  // sinon annule l'action par défaut
  else {
    e.preventDefault();
  }
});

[Pryst]

C'est top merci beaucoup à vous d'avoir éclairé ma zone d'ombre c'est gentil !