Ajout de champs dans un formulaire !

Version imprimable

Bonjour,
Je suis sur qu'il y a une réponse à ma question sur le forum, mais j'ai beau essayé plein de code je n'arrive pas à trouver de solutions pour le mien...
Code:

1 2 3 4 </div> <div id="addInput"> </div> <input id="btn+" type="button" class="btn btn-default" value="Ajouter un Membre de famille" onClick="addField();" />
voici mon code html
Code:

1 2 3 4 5 6 <script type="text/javascript"> function addField() { var input = addInput.innerHTML addInput.innerHTML = input + '<hr><div class="control-group" style="margin-left:20px"><label class="control-label" for="inputMemberName"><?php echo JText::_('MEMBERNAME'); ?></label><div class="controls"><input type="text" name="Membername[]" /></div></div><div class="control-group" style="margin-left:20px"><label class="control-label" for="inputMemberBirthday"><?php echo JText::_('MEMBERBIRTHDAY'); ?></label><div class="controls"><input type="text" name="Memberbirthday[]" /></div></div><br />\n'; } </script>
et mon code javascript.
Les habitués remarquerons qu'à chaque fois que j'ajoute un membre tous les champs sont effacés. Quelle serait la solution pour les conserver ?
Merci pour votre aide

10/07/2020, 11h16
Freudd

Bonjour Slushgood,

Peux-tu en plus d'avoir partager ton code :
- expliquer ce qu'il est censé faire (ton besoin),
- ce qu'il se passe avec celui-ci (ton problème).

Pense à bien présenter ces 2 points à chacun de tes sujets sur le forum, car là en première lecture nous ne savons pas ce que tu cherches à faire.

Merci
12/07/2020, 09h49
Dendrite

Bonjour

De ce que je comprends,

A chaque clic sur l'input #id 'btn+', tu lances la fonction js 'addField();'

Cette fonction concatène alors le contenu de la div #id 'addInput' entre autres une div classe '.controls' qui contient un input sans 'value'

Je ne suis sûre de rien, mais dans fonction addField(), essaie de remplacer ta ligne 4 par

Code:

addInput.innerHTML = input + '<hr><div class="control-group" style="margin-left:20px"><label class="control-label" for="inputMemberName"></label><div class="controls"><input type="text" name="Membername[]" value="<?php echo JText::_('MEMBERNAME'); ?>"/></div></div><div class="control-group" style="margin-left:20px"><label class="control-label" for="inputMemberBirthday"></label><div class="controls"><input type="text" name="Memberbirthday[]" value="<?php echo JText::_('MEMBERBIRTHDAY'); ?>"/></div></div><br />\n';

Je viens de trouver ma solution !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script type="text/javascript">
 
var counter = 0;
 
function moreFields() {
        counter++;
        var newFields = document.getElementById('readroot').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('writeroot');
        insertHere.parentNode.insertBefore(newFields,insertHere);
}
 
 
</script>
<!-- DIV de création nouveau membre  -->
<div id="readroot"  style="display: none" >
	<a href=""></a><i class="icon icon-arrow-down"></i><input type="button" value="Supprimer le membre" class="btn btn-default"
		onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /></a>
		<br /><br />
 
<div class="control-group">
	<label class="control-label" for="inputMembername"><?php echo JText::_('MEMBERNAME'); ?></label>
	<div class="controls">
		<input type="text" name="Membername[]" id="inputmembername" placeholder="Nom et prénom si différent...">
	</div>
</div>
<div class="control-group">
	<label class="control-label" for="inputMemberBirthday"><?php echo JText::_('MEMBERBIRTHDAY'); ?></label>
	<div class="controls">
		<input type="text" name="Memberbirthday[]" id="inputmemberbirthday" ></input>
	</div>
</div>					
</div><span id="writeroot"></span>
		<input id="btn+" type="button" class="btn btn-default"  value="Ajouter un Membre de famille" onClick="moreFields();" />

Merci pour votre aide