Je vous expliques mon problème, peut être que quelqu'un pourra gentiment me venir en aide, javascript c'est vraiment pas mon fort, du tout.
Contexte:
Je suis en train de développer un "jeux" pour un projet scolaire (DUT - MMI). J'ai créer un espace membre, dans cet espace membre il est possible de créer plusieurs parties (pour les sauvegarder, en avoir plusieurs simultanément en cours), lors de la création de partie, on a un select pour choisir le nombre de joueur (maximum 5).
En fonction du résultat de ce select, j'aimerais que sans rechargé la page, des inputs de type text s'affiche en fonction du select.
Exemple: Si on sélectionne 3 joueurs, je voudrais qu'en bas, s'affiche 3 nouveaux inputs.
L'intérêt de ceci est de pouvoir affecter le nom des joueurs directement dans ce formulaire, et pouvoir le traiter dans creerpartie.php.
Quelqu'un pourra m'aider? Je suis très en retard sur ce projet
Alors deux petit/e ajout/modification dans ton code HTML : - Ton élément select, il faut que tu lui rajoute un identifiant. - Entre ton élément juste après le div.form-group de ton select, il faut que tu rajoute une div avec un input dedans. Comme ceci :
Ensuite pour le javascript, simple est sobre tu "écoute" l'événement onchange de ton élément HTML selectpour ensuite réécrire le code HTML en fonction de la modification (grâce a une boucle, sur la nouvelle valeur de cette éléments. Comme ceci :
document.getElementById('PlayerNumber').onchange= (e)=> {
let nombre= parseInt(e.target.value);
let newHTML= [];
for(let a=0;a<nombre;a++) {
newHTML.push(`<input type="text" name="joueur${a+1}" placeholder="Nom du jouer N°${a+1}"/>`);
}
document.getElementById('pseudoname').innerHTML= newHTML.join('\n');
};
Edit: Des questions ?
- Edité par Angelisium 13 décembre 2018 à 19:32:19
<script>
document.addEventListener("change",function(e){ //On ajoute un ecouteur d'evenement de type change, et on appelle l'evenement e
var div = document.getElementById("input_nom_joueurs");
div.innerHTML= '';
var x = e.target.value; //On recupere la value du select
for(i=1;i<=x;i++){
var div_input = document.createElement("div");
var label_input = document.createElement("label");
label_input.innerHTML='Joueur '+i;
div_input.appendChild(label_input); //on ajoute le label dans la div input
var input = document.createElement("input");
input.setAttribute("class","form-control");
input.setAttribute("name","creation_joueur_"+i);
input.setAttribute("required","required");
div_input.appendChild(input);
div.appendChild(div_input); //ajoute input dans div
}
})
</script>
Merci beaucoup de ton aide!
Bonne soirée, et à bientot peut être sur Open
- Edité par ThéoLeao 13 décembre 2018 à 20:14:57
Creation d'input en fonction d'un select
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
!