Création automatique d'un button

Fermé
iheb1985 - 30 juil. 2009 à 20:42
adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 - 5 août 2009 à 11:42
Bonjour,
j'essayai de créer automatiquemnt un button lors du click sur un autre button déjà existant mais ça n'a pas marché
voici le code

<html>
<head>
<script language="javascript">
function ajout()
{

new_but = document.createElement("input");
element_input.parentNode.appendChild(new_but);
new_but.setAttribute("type", "submit");
new_but.setAttribute("id", "choix");
new_but.setAttribute("name", "choix2");
new_but.setAttribute("value", "ok");

}
</script>
</head>
<body>
<div align="center">
<input type="submit" onClick="ajout();">
</div>
</body>
</html>

3 réponses

adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
3 août 2009 à 14:57
Bonjour

voila j'ai légèrement modifié ton code

<html>
<head>
<script language="javascript">
function ajout()
{

new_but = document.createElement("input");
//element_input.parentNode.appendChild(new_but);
new_but.setAttribute("type", "submit");
new_but.setAttribute("id", "choix");
new_but.setAttribute("name", "choix2");
new_but.setAttribute("value", "ok");

var myctn = document.getElementById('container');
var mynewdiv = myctn.insertBefore(new_but,myctn.firstChild);
}
</script>
</head>
<body>
<div align="center">
<input type="button" value="ajout" onClick="ajout();">
</div>
<div id="container" align="center">

</div>
</body>
</html>


Adns
0
Merci bien pour les réponses,
J'ai essayer d'améliorer mon code en ajoutant des select ,une est fixe représentant la catégorie des chansons et une qui se crée automatiquement selon la catégorie choisie,j'ai essayer de créer un bouton d'envoi après le choix de l'artiste(à partir de la deuxième select).Mon problème maintenant et que le bouton reste lorsque je change de catégorie et par la suite j'obtient deux bouton alors que ce n'est pas logique.J'essayai de supprimer le bouton lors du changement de la catégorie avec la fonction "removechild",est ce quelqu'un peut m'aider.Merci et voici le code sur le quel je travaille:

<html>
<html>
<head>
<script language="javascript">
list_choix = {
"Rai" : ["Cheb khaled", "Cheb Hasni", "Cheb Mami"],
"Tounsi" : ["Saber", "Latifa", "Amina"],
"Mesri" : ["Hani Chaker", "Tamer Hosni"],
"Chami" : ["Wael Jassar", "Nancy"],
"Gharbi" : ["Akon", "Enrique Eglesias", "Madonna"],
}

function addButton()

{

var f1 = document.getElementById("categorie");

var button = document.createElement("input");

button.type="submit";

button.value="envoyer";

categorie.appendChild(button);

}



function ajout(selection)
{

nb_select = selection.parentNode.getElementsByTagName("select").length;
if ( selection == selection.parentNode.getElementsByTagName("select") [nb_select-1] ) {
element_select = selection;
selection = selection.options[selection.selectedIndex].value;
if ( list_choix[selection] ) {

new_liste = document.createElement("select");
element_select.parentNode.appendChild(new_liste);
new_liste.setAttribute("id", "choix2");
new_liste.setAttribute("name", "choix2");
new_liste.setAttribute("onchange", "ajout(this)");
new_liste.setAttribute("onchange","addButton()");
for (var i=0; i<list_choix[selection].length; i++) {

new_option = document.createElement("option");

new_liste.appendChild(new_option);
new_option.setAttribute("value", list_choix[selection][i]);
new_option.text = list_choix[selection][i];

}

}
}
else {
selection.parentNode.removeChild(selection.nextSibling);
ajout(selection)
}
}
</script>
</head>
<body>
<div align="center">
<form name="categorie" action="recuperer.php">
<select name="choix1" id="choix1" onChange="ajout(this)">
<option value="0">-------</option>
<option value="Rai">Rai</option>
<option value="Tounsi">Tounsi</option>
<option value="Mesri">Mesri</option>
<option value="Chami">Chami</option>
<option value="Gharbi">Gharbi</option>
</select>
<div> </div>
</form>
</div>
</body>
</html>
0
adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
5 août 2009 à 11:42
Reuh !!

Modifications apportées au code :
- Ajout de choix "vide" pour obligé un onchange
- suppression du bouton si changement du premier select
- Compatible IE6

<html>
<html>
<head>
<script language="javascript">
list_choix = {
"Rai" : ["-------","Cheb khaled", "Cheb Hasni", "Cheb Mami"],
"Tounsi" : ["-------","Saber", "Latifa", "Amina"],
"Mesri" : ["-------","Hani Chaker", "Tamer Hosni"],
"Chami" : ["-------","Wael Jassar", "Nancy"],
"Gharbi" : ["-------","Akon", "Enrique Eglesias", "Madonna"]
}

function addButton()

{


var f1 = document.getElementById("categorie");

var button = document.createElement("input");

button.type="submit";
button.id = "plop";
button.value="envoyer";

categorie.appendChild(button);

}



function ajout(selection)
{
if (document.getElementById("plop"))
categorie.removeChild(document.getElementById("plop"));


nb_select = selection.parentNode.getElementsByTagName("select").length;
if ( selection == selection.parentNode.getElementsByTagName("select") [nb_select-1] ) {
element_select = selection;
selection = selection.options[selection.selectedIndex].value;
if ( list_choix[selection] ) {

new_liste = document.createElement("select");
element_select.parentNode.appendChild(new_liste);
new_liste.id="choix2";
new_liste.name="choix2";
//new_liste.setAttribute("onchange", "ajout(this)");
new_liste.onchange=function(){addButton()}

for (var i=0; i<list_choix[selection].length; i++) {

new_option = document.createElement("option");

new_liste.appendChild(new_option);
new_option.setAttribute("value", list_choix[selection][i]);
new_option.text = list_choix[selection][i];

}

}
}
else {
selection.parentNode.removeChild(selection.nextSibling);
ajout(selection)
}
}
</script>
</head>
<body>
<div align="center">
<form name="categorie" action="recuperer.php">
<select name="choix1" id="choix1" onChange="ajout(this)">
<option value="0">-------</option>
<option value="Rai">Rai</option>
<option value="Tounsi">Tounsi</option>
<option value="Mesri">Mesri</option>
<option value="Chami">Chami</option>
<option value="Gharbi">Gharbi</option>
</select>
<div> </div>
</form>
</div>
</body>
</html>


Bon courage
Adns
0