Ajouter du HTML dans un formulaire
Utilisateur anonyme
-
ThEBiShOp Messages postés 9307 Statut Contributeur -
ThEBiShOp Messages postés 9307 Statut Contributeur -
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 :
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 :
Le 2) n'est pas complique, un simple
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.
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();" /> <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:
- Ajouter du HTML dans un formulaire
- Whatsapp formulaire opposition - Guide
- Formulaire de réclamation facebook compte désactivé - Guide
- Editeur html - Télécharger - HTML
- Formulaire de reclamation instagram - Guide
- Impossible d'ajouter un ami sur facebook - Guide
1 réponse
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
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...)
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...)