Changer le href d'un bouton selon les réponses de select box

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:

---

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.

Bonjour,

Quel est le code JS que vous utilisez ?

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

Vous êtes le patron, et on bosse pour vous :weird:

Code:

---

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)); }); });

---

On eut put sélectionner les nodes ainsi

Code:

---

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:

---

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));});});

---

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

Citation:

---

Envoyé par Pryst

... 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 ».

Citation:

---

Envoyé par Toufik83

Vous êtes le patron, et on bosse pour vous :weird:

---

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:

---

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(); } });

---

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