Formulaire HTML avec du jQuery

Version imprimable

31/10/2017, 17h12
YpK1992

1 pièce(s) jointe(s)

Formulaire HTML avec du jQuery

Bonjour,

j'ai un travail important à faire, apprendre le jQuery et j'avoue que je ne trouve pas tout ce dont j'ai besoin ou alors je cherche mal.
Je dois mettre en place une page form html, donc un formulaire, et la subtilité que je ne trouve pas c'est le fait qu'un bouton ajoute une ligne de saisie. Voilà un screen de mon travail actuel, c'est 100% html pour le moment.

Lorsque je clic sur le + en fin de ligne, automatiquement, une nouvelle ligne de saisie doit se créer en dessous de la précédente, comment faire cela ?

Merci bien.
31/10/2017, 17h16
SpaceFrog

Code:

clone()

cf. la doc https://api.jquery.com/clone/

Bon j'ai vraiment du mal... Je n'arrive pas à faire en sorte que mon div "ligne", la ligne de saisie, se clone lorsque je clic sur le bouton "+". En plus de ça, il faudrait que j'incrémente à chaque nouveau clonage, pour ensuite avoir une saisie "recherche", pour afficher directement la ligne souhaité. Une aide serait précieuse, j'suis un peu perdu :s

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Formulaire jQuery</title>
	</head>
	<body>
		<form action="/ma-page-de-traitement" method="post">
			<!--<div>
				<input type="text" style="width:25px;" id="recherche /">
			</div>!-->
			<div class="id">
				<label for="ID">ID</label><br>
				<div id="ligne">
				<input type="text" style="width:25px" value="0" id="ID" />
				</div>
			</div>
			<div class="produit">
				<label for="produit">Produit</label><br>
				<div id="ligne">
				<input type="text" style="width:160px" id="produit" />
				</div>
			</div>
			<div class="prix">
				<label for="prix">Prix</label>
				<div id="ligne">
				<input type ="text" style="width:80px" id="prix" />
				</div>
			</div><br>
			<div id="ligne">
				<button type="button">+</button>
			</div>
 
 
 
			<!--<div class="button">
				<button type="submit">Envoyer votre message</button>
			</div>!-->
		</form>
 
		<script src="jquery.js"></script>
		<script>
                        $(document).ready(function($){
                        $('#button').click(function(e){
                        var copie = $('.ID').clone();
                        copie.appendTo('body');
                });
        });
                </script>
 
	</body>
</html>
 
 
 
<style type="text/css">
        .id {
                position: relative;
                text-align:center;
                width:45px;
                height:400px;
                display:block;
                float:left;
        }
        .produit {
                position:relative;
                text-align:center;
                width:180px;
                height:400px;
                display:block;
                float:left;
        }
        .prix {
                position:relative;
                text-align:center;
                width:100px;
                height:400px;
                display:block;
                float:left;
        }
        #ID {
        }
</style>

01/11/2017, 16h22
YpK1992

1 pièce(s) jointe(s)

Bonjour,

j'ai pas mal avancé, j'arrive à créer une nouvelle ligne chaque fois que je clic sur le + et derrière j'ai fait mon php pour interagir avec ma bdd. Le problème qui se pose actuellement est que je n'arrive pas à mettre le bouton sur la même ligne que les input, je sais pas trop comment m'y prendre, et autant pas bidouiller avec la position sinon ça fait de la merde à la création de ligne :D

Enfin voilà un screen

Pièce jointe 324011
03/11/2017, 04h11
ABCIWEB

Salut,

Il y a des erreurs dans ton html, un id doit être unique et il y a plusieurs id=ligne par exemple.

Aussi si tu utilise la fonction clone pour dupliquer du html fait attention qu'il ne contienne pas d'id sinon tu vas te retrouver avec du html non valide et possiblement des erreurs dans l'exécution du javascript et du css. Concernant les styles CSS c'est pas judicieux de les mettre en bas de page. Tu aurais un meilleur affichage en les mettant dans le head en haut de page.
06/11/2017, 08h25
SpaceFrog

Si le html cloné comporte des id il suffit des les modifier avant l'append...