Bouton function add() formulaire

james Stark
Javascript

Bonjour, alors j'ai un formulaire dynamique grâce à un bouton en js avec la function add() qui permet d'ajouter des lignes dans mon formulaire , le problème est lorsque que j'appuie sur ce bouton je perds les données entré dans les champs.
voici le code 

<script type="text/javascript">
    function add()
        {
        var input = addInput.innerHTML
        addInput.innerHTML = input + '<table><div id="divform" class="form-group row"><div class="col-xs-10" id="formulaire"><tr><td><input class="form-control" type="date" name="dateactu[]" id="input"></br></td><td><input class="form-control" type="text" name="heure_eff[]" placeholder="heure(s) éffectuée(s)"  id="input"></br></td><td><input class="form-control" placeholder="prix repas" type="text" name="repas[]" id="input"></br></td><td><input class="form-control" type="text" name="num_commande[]" placeholder="numéro commande" id="input"></br></td><td><input class="form-control" type="text" name="nom_cli[]" placeholder="nom du client" id="input"></br></td><td><input class="form-control" type="text" name="adr_cli[]" placeholder="adresse client" id="input"></br></td></tr></div></div></table>';
        }
    </script>
<input id="btn+" type="button" class="btn btn-info" onClick="add();" value="Ajouter champs">
</br>
</br>
<div id="addInput"></div>

Ce que je voudrais c'est garder les données déja écrites dans les champs lorque j'appuie sur le bouton d'ajout de ligne.

6 réponses

Med-

si tu veux copier la meme ligne tu peut utiliser :
$("#yourbutton").clone().appendTo(".place");

james Stark
Auteur

Merci mais je ne veux pas copier la même ligne , mon bouton marche bien il ajoute une ligne par ligne mais lorsque par exemple j'ajoute une ligne , que je l'a remplie et apres de nouveau je rajoute une ligne, ça fait comme si je faisais un f5 et je perds les données de ma première ligne

Med-

bien sure car dans ton js t a pas spécifié value , tu dois ajouter dans ton js la valeur que t'as ajouté par exemple la valeur de la derniére ligne $value = $(".monligne:last").val();

Guique

Bonsoir,

Ce que veut te dire Med-, c'est que le texte qui est enregistré dans ton input l'est en tant que value et non en tant qu'attribut.

<input type="text" value="coucou">

La j'ai définie l'attribut value de mon input à "coucou".
Un innerHTML sur cette input récupérerait correctement l'attribut value="coucou"

Donc, dans ton cas de figure, tu as deux solutions :
1) La solution sale : 

<input onChange="this.setAttribute('value', this.value);" class="form-control" type="text" name="heure_eff[]" placeholder="heure(s) éffectuée(s)"  id="input">

A chaque modification, tu enregistres la value en tant qu'attribut de ton input.
Note : effectuées et non éffectuées ;)

2) La solution propre
Vois le problème différement : ajouter une ligne à mon formulaire ne veut pas forcément dire copier/coller l'intégralité de mon formulaire en ajoutant ma ligne. Je peux me contenter... d'ajouter ma ligne.

En JS pur : https://developer.mozilla.org/fr/docs/Web/API/Document/createTextNode

En jQuery : http://api.jquery.com/append/

Dernier petit conseils pour la route : sors tes triggers d'event de tes balises.

Nakin

Yo,
Vous partez souvent dans des solutions de malade...
C'est un input de type button qui doit surement soumettre le formulaire lors du clic et du coup rafraichir la page.
rajoute un e.preventDefault() à ta function comme ça :

function add(e)
        {
        e.preventDefault();
        var input = addInput.innerHTML
        addInput.innerHTML = input + '<table><div id="divform" class="form-group row"><div class="col-xs-10" id="formulaire"><tr><td><input class="form-control" type="date" name="dateactu[]" id="input"></br></td><td><input class="form-control" type="text" name="heure_eff[]" placeholder="heure(s) éffectuée(s)"  id="input"></br></td><td><input class="form-control" placeholder="prix repas" type="text" name="repas[]" id="input"></br></td><td><input class="form-control" type="text" name="num_commande[]" placeholder="numéro commande" id="input"></br></td><td><input class="form-control" type="text" name="nom_cli[]" placeholder="nom du client" id="input"></br></td><td><input class="form-control" type="text" name="adr_cli[]" placeholder="adresse client" id="input"></br></td></tr></div></div></table>';
        }
james Stark
Auteur

Bon j'ai eu un peu de temps pour essayer vos solutions celle de guique "solution sale" , et celle de nakin mais les deux ne fonctionne pas lorsque je click sur le bouton ajouter rien ne ce passe , je vous avoue que j'ai pas eu le temps de me pencher sur d'autre solution