A voir également:
- Javascript insertion dynamique d'input - prb
- Tableau croisé dynamique - Guide
- Telecharger javascript - Télécharger - Langages
- Insertion signature word - Guide
- Insertion liste déroulante excel - Guide
- Insertion sommaire word - Guide
2 réponses
Alain_42
Messages postés
5361
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
894
11 sept. 2011 à 21:55
11 sept. 2011 à 21:55
Salut,
essayes de t'inspirer de cet exemple de code, pris sur le site www.siteduzero.com
essayes de t'inspirer de cet exemple de code, pris sur le site www.siteduzero.com
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ajout input dynamiquement</title>
<script type="text/javascript">
function refresh(event){
//On sélectionne le premier et le deuxième fieldset
var liste = document.getElementById("liste_deroulante");
var text_fieldset = document.getElementById("zone_text");
//On récupère la position de notre champ texte
var node_source = (document.all)?event.srcElement:event.target;
var position = node_source.previousSibling.nodeValue.split(" ")[1];
//On récupère la valeur dans la champ texte
var labels = text_fieldset.getElementsByTagName("label");
var label = labels[position-1];
var input = label.getElementsByTagName("input")[0];
//On met à jour la liste déroulante
var option = liste.getElementsByTagName("option")[position-1];
option.firstChild.nodeValue = input.value;
}
function del(event){
//on sélectionne le premier fieldset et on récupère tous les label qu'il y a à l'intérieur
var text_fieldset = document.getElementById("zone_text");
var labels = text_fieldset.getElementsByTagName("label");
//On récupère le noeud qui émet l'évènement et sa position grâce au texte Valeur x
var node_source = (document.all)?event.srcElement:event.target;
var position = node_source.previousSibling.firstChild.nodeValue.split(" ")[1];
//On décale d'un cran inférieur tous les éléments situés après l'élément à supprimer
for(var i=position;i<labels.length;i++){
var label = labels[i];
var input = label.getElementsByTagName("input")[0];
input.setAttribute("name","nom"+i);
label.firstChild.nodeValue = "Valeur "+i+" ";
}
//Suppression de la zone de texte, du lien et du saut de ligne
var label = labels[position-1];
var lien = label.nextSibling;
var br = lien.nextSibling;
text_fieldset.removeChild(label);
text_fieldset.removeChild(lien);
text_fieldset.removeChild(br);
//Suppression de l'élément d'option
var liste = document.getElementById("liste_deroulante");
var select = liste.getElementsByTagName("select")[0];
var option = select.getElementsByTagName("option")[position-1];
select.removeChild(option);
}
function add(){
//On compte le nombre de label et on sélectionne le premier fieldset
var count = document.getElementsByTagName("label").length;
var text_fieldset = document.getElementById("zone_text");
count ++;
//création du label( <label>Valeur x <input type="text" name="nomx" value="" /></label>)
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("name","nom"+count);
input.setAttribute("value","");
if(document.all) input.attachEvent("onkeyup",refresh);
else input.addEventListener("keyup",refresh,true);
var nom_label = document.createTextNode("Valeur "+count+" ");
var label = document.createElement("label");
label.appendChild(nom_label);
label.appendChild(input);
////cas avec bouton supprimer //ne marche pas !!!
//Création des élement br et p ( <p class="lien">Supprimer</p><br /> )
/*
var br = document.createElement("br");
var p_del = document.createElement("p");
var bouton_del=document.createElement("input");
input.setAttribute("type","button");
input.setAttribute("name","BT_"+count);
input.setAttribute("value","Supprimer");
if(document.all) bouton_del.attachEvent("onkeyup",del);
else bouton_del.addEventListener("keyup",del,true);
p_del.appendChild(bouton_del);
*/
//cas avec lien Supprimer /// fonctionne
var del_text = document.createTextNode("Supprimer");
var lien_del = document.createElement("p");
lien_del.setAttribute("class","lien");
lien_del.setAttribute("className","lien");
if(document.all) lien_del.attachEvent("onmouseup",del);
else lien_del.addEventListener("mouseup",del,true);
lien_del.appendChild(del_text);
//On raccroche ici tous nos éléments virtuels à une balise de notre fichier XHTML. Ils sont alors affichés
text_fieldset.appendChild(label);
//text_fieldset.appendChild(lien_del);
text_fieldset.appendChild(bouton_del);
text_fieldset.appendChild(br);
//Ajout d'un élément d'option vide dans notre liste ( <option value=""></option> )
var liste = document.getElementById("liste_deroulante");
var select = liste.getElementsByTagName("select")[0];
var option = document.createElement("option");
var texte = document.createTextNode("valeur"+count);
option.setAttribute("value","nom"+count);
option.appendChild(texte);
select.appendChild(option);
}
</script>
</head>
<body>
<p id="testbox">If you see information appearing in the current box when you click in a text field javascript is enabled on your computer</p>
<div class="javascript">
<form action="" method="post">
<fieldset id="zone_text">
<!-- <p class="lien" onClick="javascript:add()">Ajouter un champ texte</p><br /> -->
<input type="button" class="lien" onClick="javascript:add()" value="Ajouter un champ texte" /><br />
</fieldset>
<fieldset id="liste_deroulante">
<select name="liste">
</select>
<input type="submit" value="Valider" /><br /><br />
</fieldset>
</form>
</p>
<script type="text/javascript">
add();
</script>
</body>
</html>
