Discussion :

[pitichamo]

bonjour a tous, pour mon site j'ai besoin de creer des input au moment du clic sur un bouton ajouter ça c'est fait j'arrive a le faire mais apres j'ai besoin de recuperer le code des nouveaux elements et le mettre dnas un fichier mais je ne sias pas ou je peux le recuperer je pense que les input sont crées que pendnat que la page est ouverte !!?

est ce que quelcun pourait m'aider ????

[grafik.muzik]

S.V.P. reformule ta question en quelques phrases courtes et claires. Je ne peux pas t'aider car je ne comprends pas ce que tu veux.

[andry.aime]

Salut,
Regarde ici:
https://developer.mozilla.org/fr/Exp..._et_JavaScript

[pitichamo]

bonsoir, je reformule ma question :
dans ma page j'ai un bouton que j'ai appelé :ajouter, il me sert a rajouter des elements input dans la page a chaque fois qu'on click sur le bouton (ça c'est la premiere etape ça c fait)
j'ai besoin de recupérer le code des differents input ajoutés et de le mettre dans un fichier (ce que je n'arrive pas a faire c'est recupérer le code )
et j'ai besoin aussi d'avoir un autre bouton: supprimer qui me permettera de supprimer des elments input en cas de besoin ?
voila j'espere que cette fois j'ai été un peu plus claire

[grafik.muzik]

Oui, c'est clair cette fois

Il faudrait que tu nous indique la méthode que tu utilise pour ajouter tes inputs. Le reste en découle.

Par exemple, si tu utilise quelque chose du genre pour ajouter tes inputs:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
oInput = document.createElement('input'); //on crée l'élément (la balise) input
oInput.id = 'input1'; //on définit l'attribut id du input
oForm = document.getElementById('formulaire1'); //on récupère le noeud formulaire
oForm.appendChild(oInput );//on place le input dans le formulaire

Pour récupérer la valeur du champ, il te suffit alors d'utiliser:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
oInput = document.getElementById('input1');
alert(oInput.value);

Tu peux supprimer ton input à l'aide de la méthode removeChild du DOM.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
oForm = document.getElementById('formulaire1'); //on récupère le noeud formulaire
oInput = document.getElementById('input1'); //on récupère le noeud input
oForm.removeChild(oInput) //on retire le input

Dans certains cas, ceci peut aussi faire l'affaire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
oForm = document.getElementById('formulaire1');
oForm.removeChild(oForm.lastChild());

Envoie-nous ton code s.v.p., ça va nous permettre de te répondre encore plus spécifiquement.

[SpaceFrog]

Peut être parce que javascript n'est pas fait pour ça ?
Javascript ne sait pas enregistrer, sauvergarder...
Tu devras passer par un langage serveur pour cela

[pitichamo]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
// fonction pour ajouter 
var form = document.getElementById("form"); //le noeud parent
var input = document.createElement('input');  //creation de l'element
// les attributs nom et type 
input.setAttribute('name','menu'+i);
input.setAttribute('type','text');
 
form.appendChild(input);

voila mais pour supprimer ????

[pitichamo]

salut SpaceFrog tu as raison pour la sauvegarde j'utiliserais php mais avant ça je dois arriver a ajouter et supprimer des input
apres je dois mettre les valeurs des inputs dans des variable javascript et les utiliser en php !! (je sias que c'est tiré par les cheuveux mais bon !!!)

[grafik.muzik]

// fonction pour ajouter
var form = document.getElementById("form"); //le noeud parent
var input = document.createElement('input'); //creation de l'element
// les attributs nom et type
input.setAttribute('name','menu'+i);
input.setAttribute('type','text');

form.appendChild(input);
voila mais pour supprimer ???

Pour les supprimer, tu récupères le noeud parent (que tu as nommé "form"), puis tu supprime son dernier enfant (le input que tu as créé):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
oForm = document.getElementById("form");
oForm.removeChild(oForm.lastChild());

[grafik.muzik]

salut SpaceFrog tu as raison pour la sauvegarde j'utiliserais php mais avant ça je dois arriver a ajouter et supprimer des input
apres je dois mettre les valeurs des inputs dans des variable javascript et les utiliser en php !! (je sias que c'est tiré par les cheuveux mais bon !!!)

Te faut-il vraiment passer par javascript? Parce que sinon, une simple soumission de formulaire pourrait faire l'affaire.

[pitichamo]

je ne suis pas sur de devoir passer par javascript mais cella dit je viens juste de trouver ma solution pour l'ajout et la suppression donc il reste a recuperer les differentes valeur dans des variable javascript et les utiliser dans des variable php
quelcun pour m'aider ????

[grafik.muzik]

Pour passer le tout à PHP, il faut soumettre le formulaire (avec un input de type submit) à une page PHP défini dans l'attribut action du formulaire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<form method="post" action="page.php">
  [tes autres inputs ici]
  <input type="submit" value="OK" />
</form>

Ensuite dans ta page PHP, il te suffit de consulter les variables à partir de la variable superglobale $_POST

[pitichamo]

salut grafik.muzik, j'ai essayé de faire se que tu as dis mais ça ne marche pas je ne sias vraiment pas comment faire !

[grafik.muzik]

Voici un exemple réduit aux éléments minimum:

page1.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<form method="post" action="page2.php">
	<input type="input" name="menu1" value="Texte entré par l'utilisateur" />
	<input type="submit" value="OK" />
</form>

page2.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<?php
        echo $_POST['menu1'];
?>

Les deux pages doivent être dans le même répertoire. Lorsque tu cliques sur le bouton situé dans page1.html, le serveur envoie ta variable à la page2.php. page2.php écrit ensuite la variable dans la page.

Bien sûr, dans la pratique, il faut filtrer les variables du côté de PHP, question de sécurité.

Dans ton cas à toi, les input de page1.html ne sont pas écrit directement dans la page, il sont générés avec du javascript. Comme le nombre de variables envoyé à PHP est variable, il te faudra surement utiliser une boucle for et une boucle foreach pour récupérer les valeurs du côté de PHP.

[Bovino]

Te faut-il vraiment passer par javascript? Parce que sinon, une simple soumission de formulaire pourrait faire l'affaire.

Attention, les input générés ne seront pas soumis avec IE qui ne reconnait pas ce genre d'ajout dynamique de l'attribut name.
Voir à ce sujet les contributions.

[grafik.muzik]

Attention, les input générés ne seront pas soumis avec IE qui ne reconnait pas ce genre d'ajout dynamique de l'attribut name.

Hum, c'est bien vrai:

Dans Internet Explorer, la propriété name des objets DOM créés à l'aide de createElement ne peut être définie ou modifiée. (mdc)

La solution la plus simple serait donc de générer l'élément avec une méthode de Microsoft, par exemple, un innerHTML?

[pitichamo]

merci a tous j'ai fini par trouvé j'ai utilisé un input de type hidden pour recupere la variable de javascript
c'etait pas aussi compliqué enfin de compte

[SpaceFrog]

Oui ça sert à quoi que le grenouille elle se décarcasse ?

[pitichamo]

resumons la situation on a un formulaire avec un bouton AJOUTER un input, un bouton supprimer un input , et un pour VALIDER
pour l'ajout des input on a fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//code javascript
i=1;
var form = document.getElementById("form"); //le noeud parent
 
var input = document.createElement('input');  //creation de l'element
input.setAttribute('id','menu'+i)
input.setAttribute('type','text');
form.appendChild(input);
 
var inputHidden = document.createElement('input');  //creation de l'element
inputHidden.setAttribute('id','id'+i)
inputHidden.setAttribute('type','hidden');
form.appendChild(inputHidden);
i++;

pour SUPPRIMER des input on a fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
//code javascript
var input = document.getElementById('menu'+i);
input.parentNode.removeChild(input);
 
var inputHidden=document.getElementById('id'+i);
inputHidden.parentNode.removeChild(inputHidden);
i--;

apres pour RECUPERER les valeur on utilise du php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
/*php code*/
if (isset($_POST['id'.$i]))
{
$tab=$_POST['item'.$i];
echo $tab;}

la valeur de chaque input crée est recupérée grace à son id.

maintenant j'ai besoin de faire une sauvegarde du code apres la creation des input c'est possible ça ??