Bonjour a tous,

Je debute en Javascript.
Je souhaite dynamiser un peu quelques-uns de mes formulaires en creant des elements html dynamiquement.

Je bloque sur l'ajout d'une liste deroulante et de ses options.

Ci-dessous mon code d'ajout:

function addInput(divName)
{     
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " 
          + "<br><input type='text' name='Input[]'>"
          + "<input type='button' name ='Button[]' value='Remove'>";
          + "<select type='text' name='Select[]'>"
          +	"<option value='USD'>"
         
        
          document.getElementById(divName).appendChild(newdiv);
}

Quelqu'un pourrait-il me dépanner?
Au passage si vous avez quelconques suggestions sur mon code, n'hésitez pas je suis preneur


Merci d'avance.

Dans le html, pour les attribut d'un élément il faut utiliser les guillemets et non les quotes,
tu as mal placé ton point-virgule, je ne comprend pas pourquoi tu met des crochets dans l'attribut name,
en javascript une fin de ligne correspond à une fin d'instruction (le point-vigule étant conseillé mais facultatif) donc pour écrire sur plusieurs lignes il faut utiliser une variable
et tant qu'à faire pourquoi créer une nouvelle div ?

function addInput(divName)
{     
          var elmt = document.getElementById(divName),
               content = elmt.innerHTML;
          content += 'Entry ';
          content += '<br><input type="text" name="Input">';
          content += '<input type="button" name="Button" value="Remove">';
          content += '<select type="text" name="Select">';
          content += '<option value="USD">';         
          elmt.innerHTML = content;
}

J'ai toujours des problèmes pour afficher mes listes déroulantes.
Du coup j'ai opte pour une autre solution, ou je duplique un bloque entier. Apres moultes tentatives cela semble fonctionner correctement ... ouf ;-) Ci-dessous mon code:

var counter = 1;
function add_phone() {
    counter++;
    var newFields = document.getElementById('add_phone').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
        if (theName)
                newField[i].name = theName + counter;
        }
        var insertHere = document.getElementById('add_phone');
        insertHere.parentNode.insertBefore(newFields,insertHere);
}

et mon formulaire:

<form name="add_a_phone" action="Test.php" method="post">

<div id="phone">
	Number 1: 
    <input type="text" name="account_1" value="" />
    <select type='text' name='Select_1'>
    <option value>Mobile</option>
    <option value>Home</option>
    <option value>Work</option>
  	</select>
  	<input type='button' name ='Button_1' value='Remove'>
</div>

<div id="add_phone" style="display: none;">
	Number :
    <input type="text" name="account_" value="" />
    <select type='text' name='Select_'>
    <option value>Mobile</option>
    <option value>Home</option>
    <option value>Work</option>
  	</select>
  	<input type='button' name ='Button_' value='Remove'>
</div>
<input type="button" id="add_phone()" onclick="add_phone()" value="Add" /><br>
<input type="submit" id="Test" value="Save"/>
</form>

Questions:
(i) Ne faudrait-il pas affecter l'attribut ID plutot que l'attribut Name afin de pouvoir supprimer mes enregistrement un-a-un par exemple?

(ii) Je voudrais afficher "Number 1", Number 2", ... "Number i" dans mon formulaire.
Dois-je recreer une bouble pour changer la valeur de mon champ?

(iii) Maintenant J'aimerai pouvoir supprimer mes enregistrements un-a-un.
Quelqu'un peut-il m'aider?

(iv) L'etape finale consistera a enregistrer mes entrees dans une base de donnees.
J'ai tente de recuperer les champs avec un echo mais cela ne m'affiche rien. Quelqu'un a une idee a ce sujet?



Merci

J'avais fais une erreur au niveau des guillemets/quotes peut-être que c'est pour ça que ça ne fonctionnais pas, sinon je te conseillerais de plutôt utiliser innerHTML, c'est bien plus simple et rapide, je te met ici un code pour ajouter et supprimer un enregistrement (à ma manière):

var counter = 1;
function addInput(divName)
{     
          ++counter;
          var elmt = document.getElementById(divName),
               content = elmt.innerHTML,
               id = 'add_phone' + counter;
          content += '<div id="' + id + '">Entry ';
          content += '<br><input type="text" name="Input">';
          content += '<input type="button" name="Button" value="Remove">';
          content += '<select type="text" name="Select">';
          content += '<option value="USD"></div>';         
          elmt.innerHTML = content;
          return id;
}
function removeInput(idInput)
{     
          var elmt = document.getElementById(idInput),
               content1 = elmt.innerHTML,
               parent = elmt.parentNode,
               content2 = parent.innerHTML;
          parent.innerHTML = content2.replace(content1, '');
}
// utilisation :
var id1 = addInput('divName');
removeInput(id1);

Pour les autres qustions :
(ii) Oui il faux faire une boucle dans un cas comme ça, même si j'ai pas bien compris exactement ce que tu voulais faire, pour modifier i éléments, il faut une boucle !

(iv) javascript est un language coté client, il ne peux donc pas accéder à une base de donnée qui se situe sur un server et heureusement pour nous ! Car n'importe qui pourrais modier le code javascript et y accéder...
Par il existe des techniques permettant d'appeler une page coté server (php ou autre) à partir du javascript ce qui permet une grande sécurité et de faire des choses intéressantes en js.
Ces techniques sont regroupées sous le nom d'AJAX et il y a un tuto bien fait là dessus sur le sdz (lien)

Bonjour,

Merci a louf404 pour son aide.
Par contre je galere toujours sur populer ma liste déroulante.
Comment faire pour avoir les options USD, EUR, GBP ...etc. ?
Avec mon code j'ai uniquement une option or je voudrais en avoir plusieurs - bien définies.

J'ai essaye d'en ajouter comme ci-dessous:

[...]

content += '<select type="text" name="Select">';
content += '<option value="USD">';
content += '<option value="EUR">';
content += '<option value="GBP"></div>';

... mais ça ne marche pas


Une idee?

Essaie avec une forme comme ceci :

content += '<select type="text" name="Select">';
content += '<option value="USD">USD</option>';
content += '<option value="EUR">EUR</option>';
content += '<option value="GBP">GBP</option>';
content += '</select>';

Bon au final il est vrai que la méthode de louf404 est assez simple et abordable pour le débutant que je suis.

Voici un code d'ajout qui fonctionne plutôt bien - ça pourra servir a d'autres, sait-on jamais.

La fonction javascript:

var counter = 1;
function addInput(){
counter++;
	//On repère la div dans laquelle ajouter un champ grace à son id
	var target = document.getElementById('extendForm');
	
	var div = document.createElement('div');
	var divIdName = 'Div'+counter;
  	div.setAttribute('id',divIdName);
	content = div.innerHTML;
	 content += 'Element Number '+ counter
	 content += '<input type="text" name="myInput[]">'
	 content += '<select type="text" name="Select[]">'
	 content += '<option value="USD">USD</option>'
	 content += '<option value="EUR">EUR</option>'
	 content += '<option value="GBP">GBP</option>'
	 content += '</select>'
         content += '<input type="button" name="myButton[]" onclick="addInput()" value="Add" />
	 content +='<a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'">';
 	div.innerHTML = content;
 	target.appendChild(div);

Mon code html

<input type="text" name="myInput[]" />
<select type="text" name="Select[]">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
</select>
<input type="button" name="myButton[]" onclick="addInput()" value="Add" />
<!-- Div vide dans laquelle on ajoutera des champs -->
<div id="extendForm"></div>

Le seul truc qui ne fonctionne pas très bien c'est l'ordre des éléments ajouter.
Pour une raison qui m'échappe, les éléments ne sont pas dans l'ordre souhaite, i.e.
(i) Zone de saisie - (ii) Liste déroulante - (iii) Bouton ajout - (iv) Lien Effacer.

Quelqu'un sait pourquoi?


Maintenant je souhaite effacer mes <div> en cliquant sur le Lien "Effacer".
Je n'arrive pas a bien comprendre le code de louf404.
Quelqu'un pourrait-il me guider?


En vous remerciant ...

Bon j'ai resussi a fixer mon problème d'ordre sur les éléments ajoutes.

Par contre pas de succès pour ce qui est de supprimer mes div.
Quelqu'un peut-il m'aider?

Quelques erreurs...

var counter = 1;
function addInput(){
counter++;
	//On repère la div dans laquelle ajouter un champ grace à son id
	var target = document.getElementById('extendForm');
	
	var div = document.createElement('div');
	var divIdName = 'Div' + counter;
  	div.setAttribute('id', divIdName);
	 content += 'Element Number '+ counter;
	 content += '<input type="text" name="myInput[]">';
	 content += '<select type="text" name="Select[]">';
	 content += '<option value="USD">USD</option>';
	 content += '<option value="EUR">EUR</option>';
	 content += '<option value="GBP">GBP</option>';
	 content += '</select>';
         content += '<input type="button" name="myButton[]" onclick="addInput()" value="Add" />';
	 content += '<a href="#" onclick="removeElement(\''+divIdName+'\');">Remove the div "'+divIdName+'"</a>';
 	div.innerHTML = content;
 	target.appendChild(div);
}

Je comprend toujours pas pourquoi tu mets des crochets dans les attributs name ? (je suis pas sur que c'est autorisé)

Je mets les crocher pour pouvoir ensuite récupérer les valeurs de mes éléments en php et les enregistrer dans ma base de données MySql.
En tout cas c'est ce que j'ai compris des forums et tutoriaux.

Par contre je me bats avec la fonction supprimer a m'en arracher les cheveux ...
Je tourne et tourne et tourne en rond ...

Pas besoin de crochets pour récupérer les valeurs dans php, tu auras juste à faire un $_POST['name'] quelque soit le name (crochets ou non)

Pour que le script marche (testé chez moi) :

var counter = 1;
function addInput(){
	var target = document.getElementById('extendForm'),
		divIdName = 'Div' + ++counter;
	content = target.innerHTML;
	content += '<div id="' + divIdName + '">';
	content += 'Element Number ' + counter;
	content += '<input type="text" name="myInput">';
	content += '<select type="text" name="Select">';
	content += '<option value="USD">USD</option>';
	content += '<option value="EUR">EUR</option>';
	content += '<option value="GBP">GBP</option>';
	content += '</select>';
	content += '<a href="#" onclick="removeInput(\'' + divIdName + '\');">Remove the div "' + divIdName + '"</a></div>';
 	target.innerHTML = content;
}
function removeInput(idInput)
{
	var elmt = document.getElementById(idInput);
	elmt.parentNode.removeChild(elmt);
}

Bonjour a tous,

Un grand merci a louf404 pour son aide. Seul petite chose qui ne fonctionnait pas bien était qu'a chaque nouvel ajout, le contenu des input était effacé. J'ai corrigé ce problème.

Je poste mon code final qui fonctionne bien, ça peut servir a d'autre ...

var counter = 1;
function addInput()
{
          var target 		= document.getElementById('Account_1');
          var newdiv 		= document.createElement('div');
          var newdivname	= 'Div' + counter;
          newdiv.setAttribute('id',newdivname);
          content = newdiv.innerHTML;
          content +="Account number:";
          content +="<input type='text' class='AccountNumber' name='AccountNumber[]' id='AccountNumber' size='20'>";
          content +='<select type="text" class="AccountCurrency" name="AccountCurrency[]" id="AccountCurrency">';
          content +='<option value="USD">USD</option>';
          content +='<option value="EUR">EUR</option>';
          content +='<option value="GBP">GBP</option>';
          content +='<option value="JPY">JPY</option>';
          content +='<option value="HKD">HKD</option>';
          content +='<option value="CHF">CHF</option>';
          content +='</select>';
          content +='<a id="AccountDelete" href="#" onclick="removeInput(\'' + newdivname + '\');">[Delete]</a>';
          newdiv.innerHTML = content;
          target.appendChild(newdiv);
          counter++;
}

function removeInput(idInput)
{
	var elmt = document.getElementById(idInput);
	elmt.parentNode.removeChild(elmt);
}

Je souhaite désormais valider avec une fonction javascript les données saisies dans mon formulaire avant envoi. Pas de souci sur la plus plupart de mes éléments dans mon formulaire, sauf sur mes éléments ajoutes dynamiquement.
Je bloque sur le controle de mes inputs rajouter avec la fonction ci-dessus.

Comment les récupérer les inputs un a un et vérifier qu'ils sont non-vide, contiennent uniquement des chiffres ...?

Il suffit de récupérer le formulaire et ensuite tu n'a qu'a utiliser son attribut elements[name] ou si tu n'a pas spécifié de name : childNodes (mais il faux vérifier le type de chilNode pour véréfier qu'elle soient bien des élément html) :

var elmts = document.getElementById('myform').elements;
for(var i in form.elements) {
    if(form.elements[i].value.length == 0) {
       alert('Erreur : le champs' + i + ' est vide');
    }
}

ou avec childodes :

var elmts = document.getElementById('myform').childNodes;
for(var i = 0, l = elmts.length; i < l; ++i) {
    if(elmts[i].nodeType == 1) {
       if(elmts[i].value.length == 0) {
           alert('Erreur : le champs' + elmts[i].id + ' est vide');
        }
    }
}

A savoir que elements ne fonctionne que sur les form tandisque childNodes marche pour tout élément.

C'est bien la mon problème ... Je n'arrive pas a récupérer ces champs en particulier. J'y arrive avec php mais pas avec javascript ...

Mon formulaire a cette tête:

<form id="Form_Fund" method="post" action="Test(a).php" onsubmit="return validateForm();">
	<label>Fund name:</label>
	<input type="text" class="test" name="FundName" id="FundName" size="72" tabindex="1"/>
	<span id="Error"></span>
	<br/>
	<br/>
	<fieldset id="Fieldset_BankAccounts">
	<legend>Bank Accounts Details</legend>
	<div id="Scrollbar">
	<div id="Account_1">
	<span id="Error_NumericField"></span>
	<br/><br/>
	Account number:<input type="text" class="AccountNumber" name="AccountNumber[]" id="AccountNumber" size="20" tabindex="2"/>
	<select type="text" class="AccountCurrency" name="AccountCurrency[]" id="AccountCurrency">
         <option value="USD">USD</option>
         <option value="EUR">EUR</option>
         <option value="GBP">GBP</option>
         <option value="JPY">JPY</option>
         <option value="HKD">HKD</option>
         <option value="CHF">CHF</option>
  	</select>
	<input type="button" id="Button_AddNewAccount" value="Add new" onclick="addInput();">
	<br/>
	</div>
	</div>
	</fieldset>
	<input type="submit" id="Button_SaveNewFund" value="Save"/>
</form>

Lorsque j'ajoute mes inputs avec javascript je crée une nouvelle div que j'ajoute a la div avec l'id Account_1.
Les inputs ont tous le même name.
L'idee, je suppose, est de (i) récupérer la div Account_1, (ii) récupérer les div nouvellement créées et (iii) les elements contenus dans ces div.

Par contre j'y arrive vraiment pas. Je n'arrive même pas a simplement récupérer les champs ...
Une idee?

J'ai teste le code le louf404 mais sans succès.

Ceci ne marche pas ?

var divs = document.getElementById('Account_1').getElementsByTagName('div');
for(var i = 0, l = divs.length; i < l; ++i) {
    if(divs.getElementsByTagName('select')[0].value.length || divs.getElementsByTagName('input')[0].value.length == 0) {
        alert('Erreur : un champs est vide');
    }
}

Par contre quand tu créer une nouvelle div, tu créer des éléments qui ont le même id :s

Non cela ne fonctionne pas ...
Sinon oui, quand je créé des éléments, ils ont le même id. Faut-il un id unique?

C'est la définition de l'id : un identifiant unique

Je comprends pas ... et ca m'ennerve.

Pourquoi le code ci-dessous ne fonctionne pas?

function validateForm()
{
var divs = document.getElementById('Accounts').getElementsByTagName('div');
for(var i = 0, l = divs.length; i < l; ++i){
if (divs.getElementsByTagName('input')[0].value.length == 0){
alert ('blablabla');
}
}

1. Je recupere mes div nouvellement créées. --> ok ca ca marche.
(Au passage, petite question: pourquoi je ne peux pas faire:

var divs = document.getElementById('Accounts').getElementsByTagName('div'); var divs.getElementsByTagName('input')

pour récupérer mes inputs et non les div?



2. Je teste le 1er input de mes div et si un input est vide alors j'affiche "Blablabla".


Mais non, rien ne se passe ??
Au secours

Une bonne âme pour m'aider?
Je tourne en rond sans trouver la solution a mon problème ...

Bonjour a tous,

J'ai modifie mon code et chacun de mes inputs a un id unique de type AccountNumber _1, AccountNumber _2, AccountNumber _3 ...etc.
J'ai vérifié:
- j'arrive bien a récupérer la valeur de mes inputs en utilisant leur id;
- j'arrive a determiner la longueur de ma boucle en comptant le nombre de divs ajoutées.

Mais je n'arrive toujours pas a boucler sur mes inputs et vérifier si oui ou non ils sont vides.
Je n'arrive pas a comprendre pourquoi ce code ne fonctionne pas et j'ai besoin de votre aide ...

function validateForm()
{
var divs = document.getElementById('Accounts').getElementsByTagName('div');
for(var i = 0, l = divs.length; i < l; ++i){
if (document.getElementById('AccountNumber_' + i).value.length = 0){
alert ('blablabla');
}
}

Citation : idou

Je comprends pas ... et ca m'ennerve.

Pourquoi le code ci-dessous ne fonctionne pas?

function validateForm()
{
var divs = document.getElementById('Accounts').getElementsByTagName('div');
for(var i = 0, l = divs.length; i < l; ++i){
if (divs.getElementsByTagName('input')[0].value.length == 0){
alert ('blablabla');
}
}

1. Je recupere mes div nouvellement créées. --> ok ca ca marche.
(Au passage, petite question: pourquoi je ne peux pas faire: pour récupérer mes inputs et non les div?



2. Je teste le 1er input de mes div et si un input est vide alors j'affiche "Blablabla".


Mais non, rien ne se passe ??
Au secours

var divs = document.getElementById('Accounts').getElementsByTagName('div'); var divs.getElementsByTagName('input')

Ne fonctionne pas car "ça serait trop simple". Ta variable divs est un array. Autrement dit il faudrait faire divs[0].getElementsByTagName().

Sinon pour le dernier bout de code que tu as sorti:

function validateForm(){
    var mesDivs = document.getElementById('Accounts').getElementsByTagName('div');
    var i = 0;
    var mesValues = '';
    for(i=0; i < mesDivs.length; i++){ // Plusieurs erreurs sur cette ligne il me semble (enfin erreurs ou mauvaise pratique)
        mesValues = document.getElementById('AccountNumber_' + i).value;
        if(mesValues.length < 1) // Erreur à cette ligne
            alert('blablabla');
    }
}

Bon ça fait pas mal d'erreurs, Après je ne dis pas que j'ai tout supprimé, je n'ai pas testé. Mais tu devrais regarder ta console javascript de temps en temps !

Attention, c'est valable uniquement avec un code de ce genre:

<div id="Accounts">
    <div>
        <input id="AccountNumber_0" />
    </div>
    <div>
        <input id="AccountNumber_1" />
    </div>
    <div>
        <input id="AccountNumber_2 />
    </div>
</div>

Bon je crois que j'ai tout dit .