Insertion d'un champ input automatiquement
Résolu
basamiro
Messages postés
27
Statut
Membre
-
eliass00 Messages postés 10 Statut Membre -
eliass00 Messages postés 10 Statut Membre -
Bonsoir,
j'ai une page en html qui permet aux clients de commander des articles, à cet effet, j'ai crée un champ avec des choix multiples comme celà;
du fait qu'un client pourra choisir plusieurs articles, je me demande s'il y a possibilité de faire ceci:
si le client a choisi un article parmi les articles proposé, un champ pareil s'ajoute en bas du premier choix afin qu'il puisse rajouter un nouvel article.
j'ai une page en html qui permet aux clients de commander des articles, à cet effet, j'ai crée un champ avec des choix multiples comme celà;
<td width="420"><select name="sujet"> <option selected> <OPTION value="1" >article1</OPTION> <OPTION value="2" >article1</OPTION> <OPTION value="3" >article1</OPTION> <OPTION value="4" >article1</OPTION> <OPTION value="5" >article1</OPTION> </select></td>
du fait qu'un client pourra choisir plusieurs articles, je me demande s'il y a possibilité de faire ceci:
si le client a choisi un article parmi les articles proposé, un champ pareil s'ajoute en bas du premier choix afin qu'il puisse rajouter un nouvel article.
A voir également:
- Insertion d'un champ input automatiquement
- Touche insertion clavier - Guide
- Insertion sommaire word - Guide
- Insertion video powerpoint - Guide
- Insertion filigrane word - Guide
- Insertion liste déroulante excel - Guide
11 réponses
J'avais fait un truc comme ça, je n'ai pas le temps de fouiller, là...
En gros, le principe :
Tu places tes listes déroulantes dans un <div> que tu peux nommer, par exemple, "zoneAffichage".
Tu rajoutes, sur ton select, un champ "onclick = copie(this)"
Tu crées une fonction javascript
var i=0;
function copie(liste)
{
var liste2 = liste.Clone();
liste2.id = "liste"+i;
i++;
document.getElementById("zoneAffichage").AppendChild(liste2);
}
Je n'ai pas le temps de tester ce code, là. Je ne suis, notamment, pas sûr des fonctions javascript que j'utilise. Tu peux aller faire un tour sur fr.selfhtml.org pour plus de détails.
En espérant t'aider,
Xavier
En gros, le principe :
Tu places tes listes déroulantes dans un <div> que tu peux nommer, par exemple, "zoneAffichage".
Tu rajoutes, sur ton select, un champ "onclick = copie(this)"
Tu crées une fonction javascript
var i=0;
function copie(liste)
{
var liste2 = liste.Clone();
liste2.id = "liste"+i;
i++;
document.getElementById("zoneAffichage").AppendChild(liste2);
}
Je n'ai pas le temps de tester ce code, là. Je ne suis, notamment, pas sûr des fonctions javascript que j'utilise. Tu peux aller faire un tour sur fr.selfhtml.org pour plus de détails.
En espérant t'aider,
Xavier
Merci Xavier au moins t'as reservé un peu de temps pour me répondre je t'en remercie 1001 fois.
je vais tester ta fonction et je te dirai si elle est coorecte ou pas et si j'ai pu la corriger je te le dirai.
Amicalement,
je vais tester ta fonction et je te dirai si elle est coorecte ou pas et si j'ai pu la corriger je te le dirai.
Amicalement,
Allez, j'ai pris 10 minutes pour corriger la piste que je t'avais donnée...
J'espère que ça te suffira.
Xavier
<html>
<body>
<script language="javascript">
var i=0;
function addSelect()
{
i++;
// On récupère l'endroit où devra être ajouté la liste
var divCible = document.getElementById("divCible");
// On récupère la liste modèle
var selModele = document.getElementById("select_modele");
// On la clone dans une nouvelle variable
var nvxSel = selModele.cloneNode(true);
// (pour la présentation, on crée un retour à la ligne)
var br = document.createElement("br");
// On adapte les attributs de la nouvelle liste : nom, id et affichage
nvxSel.name = "select" + i;
nvxSel.id = "select" + i;
nvxSel.style.display = "inline";
// On ajoute tout ça à l'emplacement voulu
divCible.appendChild(nvxSel);
divCible.appendChild(br);
}
</script>
<!-- Création d'une liste modèle, qui ne sera pas visible -->
<select id="select_modele" name="modele" style="display:none;">
<option value="1">element1</option>
<option value="2">element2</option>
<option value="3">element3</option>
<option value="4">element4</option>
</select>
<!-- Bouton permettant la copie de la liste modèle -->
<button onclick="javascript:addSelect();" type="button">Ajouter Liste</button>
<!-- Zone, vide au début, dans laquelle les nouvelles listes seront ajoutées -->
<div id="divCible"></div>
</body>
</html>Essaie de voir comment fonctionne cette petite page, elle fait ce que tu veux faire, et ça marche sous Firefox et Internet Explorer. Va falloir l'adapter à tes besoins, par contre.
J'espère que ça te suffira.
Xavier
Salut,
En javascript ce doit être possible, mais je pense que ce serait plus simple d'utiliser des checkbox, ou encore un select en multiple.
En javascript ce doit être possible, mais je pense que ce serait plus simple d'utiliser des checkbox, ou encore un select en multiple.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
c'est clair que ça sera plus facile mais je veux pas alourdir ma page de commande du fait que je possède au moins 200 produits d'où l'idée de mettre une seule fois un champ à choix multiple et une fois le choix fait automatiquement j'ajoute le meme champs moins l'article choisi.
Merci quand même pour l'interet que vous portiez à ma demande
Merci quand même pour l'interet que vous portiez à ma demande
c'est clair que ça sera plus facile mais je veux pas alourdir ma page de commande du fait que je possède au moins 200 produits d'où l'idée de mettre une seule fois un champ à choix multiple et une fois le choix fait automatiquement j'ajoute le meme champs moins l'article choisi.
Merci quand même pour l'interet que vous portiez à ma demande
Merci quand même pour l'interet que vous portiez à ma demande
