Bonjour à tous.
Dans un projet que j'ai, j'ai besoin d'ajouter des inputs de formulaire d'une manière illimitée. Etant dans la catégorie "noob ++" en JS, j'ai fouillé un peu sur internet, et j'ai trouvé un code que j'ai voulu adapter.
Mon formulaire ressemble à ça :
<form method="POST">
<div class="container">
<div class="row">
<div class="col-md-12 main">
<div class="col-md-12 equipes cnt">
<div class="col-md-6 form-inline">
<label for="equipe1">Equipe à Domicile : </label>
<input type="text" class="form-control" name="equipe1[]" id="equipe1">
</div>
<div class="col-md-6 form-inline">
<label for="equipe2">Equipe à l'Extérieur : </label>
<input type="text" class="form-control" name="equipe2[]" id="equipe2">
</div>
</div>
<div class="col-md-12 pari form-inline cnt">
<div class="col-md-6">
<label for="pari">Paris : </label>
<select class="form-control" name="pari" id="pari">
<option value="empty"></option>
</select>
</div>
</div>
<div class="col-md-12 cote form-inline cnt">
<label for="pari">Côte : </label>
<input class="form-control" type="text" name="cote" id="cote">
</div>
</div>
<input class="btn btn-acceuil" type="button" value="Add another text input" onClick="addInput('main');">
</div>
</div>
</form>
et mon code JS ressemble à ça :
function addInput(divName){
var newdiv = document.createElement('div');
newdiv.innerHTML = '<div class="col-md-12 main">' +
'<div class="col-md-12 equipes cnt">' +
'<div class="col-md-6 form-inline">' +
'<label for="equipe1">Equipe à Domicile : </label>' +
'<input type="text" class="form-control" name="equipe1[]" id="equipe1">' +
'</div>' +
'<div class="col-md-6 form-inline">' +
'<label for="equipe2">Equipe à l\'Extérieur : </label>' +
'<input type="text" class="form-control" name="equipe2[]" id="equipe2">' +
'</div>' +
'</div>' +
'<div class="col-md-12 pari form-inline cnt">' +
'<div class="col-md-6">' +
'<label for="pari">Paris : </label>' +
'<select class="form-control" name="pari" id="pari">' +
'<option value="empty"></option>' +
'</select>' +
'</div>' +
'</div>' +
'<div class="col-md-12 cote form-inline cnt">' +
'<label for="pari">Côte : </label>' +
'<input class="form-control" type="text" name="cote" id="cote">' +
'</div>' +
'</div>';
console.log(newdiv);
document.getElementById(divName).appendChild(newdiv);
}
Mon console.log retourne bien tout le code html que je cherche à créer, mais j'ai une erreur : Uncaught TypeError: Cannot read property 'appendChild' of null.
Du coup je bloque là, et je ne comprends pas ce qui cloque. Mon fichier JS est bien appellé en bas du code, et c'est sans doutes que le appendChild n'a rien a voir avec ce que je cherche à faire, mais en m'inspirant d'un autre code cela fonctionnait.
Si vous avez une idée qui pourrait m'aider, je vous remercie d'avance !
Salut
getElementById
comme son nom l'indique donne un element par son ID. Lors de ton appel addInput('main');
c'est main
qui est précisé alors que c'est "simplement" une classe <div class="col-md-12 main">
. Remplace soit dans la fonction par getElementByTagName
(de mémoire, et ça retourne un tablreau je crois), ou sinon, mets un ID: <div class="col-md-12" id="main">
A+
Oh je suis le pire. Je savais que j'étais nul en JS, mais au point de confondre la classe et l'id, quand même... x)
Merci beaucoup !