Formulaire HTML avec du jQuery

**YpK1992** · 31/10/2017, 17h12

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.

**SpaceFrog** · 31/10/2017, 17h16

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

clone()

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

**YpK1992** · 31/10/2017, 18h00

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**YpK1992** · 01/11/2017, 16h22

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

Enfin voilà un screen

Nom : Sans titre.png
Affichages : 448
Taille : 90,5 Ko

**ABCIWEB** · 03/11/2017, 04h11

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.

**SpaceFrog** · 06/11/2017, 08h25

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

Formulaire HTML avec du jQuery

jQuery

Discussions similaires

Partager

Partager