Ajouter du HTML dans un formulaire

Fermé
chindit Messages postés 42 Date d'inscription dimanche 16 mars 2008 Statut Membre Dernière intervention 28 janvier 2013 - 28 janv. 2013 à 11:04
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 - 28 janv. 2013 à 11:26
Bonjour à tous

Avant de commencer, je dois vous dire que, le JavaScript et moi, ça fait 2 donc, désolé si mes questions vous paraissent un peu absurdes.

Voilà, j'ai un formulaire de ce type :
<form method="post" action="index.php">
<fieldsed id="reponses"><legend>Réponse(s) :</legend>
<input type="checkbox" name="1c" id="1c" /><input type="text" lenght="250" name="1" id="1" /><br />
</fieldset>
<input type="hidden" name="nb_reponses" id="nb_reponses" value="1" />
<input type="button" name="ajout_reponse" value="Ajouter" onclick="insertAnswer();" />&nbsp; &nbsp; &nbsp;
<input type="submit" value="Enregistrer" />
</form>

Je souhaiterais, lors du clic sur le bouton «Ajouter» que la fonction "insertAnswer()":
1) Récupère la valeur de «nb_reponses»
2) Incrémente cette valeur de 1
3) Remette la nouvelle valeur dans le champ
4) Insère une nouvelle ligne dans le fielsed qui soit "<input type="checkbox" name="2c" id="2c" /><input type="text" lenght="250" name="1" id="1" /><br />"
(L'idée étant que, si l'on clique une seconde fois sur le bouton, une troisième ligne est ajoutée avec comme id «3c» etc...

Bon, le 1), je sais le faire : avec ce code, ça fonctionne :
var nb_champs = document.getElementById("nb_reponses").value;
if(isNaN(nb_champs)){
alert('Une erreur s\'est produite');
}

Le 2) n'est pas complique, un simple
nb_champs = nb_champs++;

devrait fonctionner.
Par contre, pour le 3) et 4), je n'ai aucune idée de la méthode à suive.

Quelqu'un pourrait-il m'aider?
Merci d'avance.
A voir également:

1 réponse

ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
Modifié par ThEBiShOp le 28/01/2013 à 11:27
Bonjour,

je te conseille d'essayer d'utiliser le jQuery, ça simplifie largement la déclaration d'éléments javascript et ça améliore la compatibilité entre navigateurs.

en jquery, ça donnerait quelque chose du genre :

ajoute un id="ajout_reponse" sur ton bouton
$(document).ready(function(){ 
                $('#ajout_reponse').click(function(){ 
                    var val = $('#nb_reponses').val(); 
                    val++; 
                    $('#nb_reponses').val(val); 
                    ajoutInput(val); 
                }); 
             
                function ajoutInput(nb) { 
                    html = $('#reponses').html(); 
                    html += '<input type="checkbox" name="'+nb+'c" id="'+nb+'c" /><input type="text" length="250" name="'+nb+'" id="'+nb+'" /><br />'; 
                    $('#reponses').html(html); 
                } 
            }); 


code à mettre dans le head, dans une balise script, ne pas oublier de délcarer jquery
attention aux fautes de frappe (fieldset et non fieldsed, length pour l'input, d'ailleurs c'est maxlength et non length...)
0