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 !