Ajouter/supprimer texte venant d'un champ texte

stomerfull · 05/09/2011, 18h14

Bonjour,

j'ai un champ texte avec un lien ajouter à côté

Code :

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

<input type="text" name="doc" id="doc"> <a href="#" id="add">Ajouter</a>

Ce que je voudrais faire c'est quand on clique sur Ajouter

la valeur du champ s'affiche en haut dans un div ou li avec un lien permettant de supprimer la ligne voulu de la liste

et je peux ajouter jusquà 4 par exemple

au dela de 4 ajout le texte ne sera plus afficher

et ensuite je stockerai dans des autres champs hidden les valeurs ajouter

c'est à dire j'ai des champs hidden déjà en place au total 4 pour recevoir les 4 listes que je sauvegarderai en base après

Si je supprime, la value du champ hidden contenant la valeur supprimée sera reseter à vide

Au final je veux quelque chose comme ça (mais avec des div ajouter dynamiquement je pense...)

Code :

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

1
2
3
4
5
6
7
<div>ajout1</div><a href="#" id="del">del</a>
<div>ajout2</div><a href="#" id="del">del</a>
<div>ajout3</div><a href="#" id="del">del</a>
<div>ajout4</div><a href="#" id="del">del</a>
 
 
<input type="text" name="doc" id="doc"> <a href="#" id="add">Ajouter</a>

dont ajout1 jusquà ajout4 correspondent aux valeurs ajoutées depuis le champ doc

j'ai trouvé ceci mais c'est le champ input qui sera ajouter ou supprimer mais pas la valeur ce que je veux faire c'est de récupérer la valeur entrée dans le champ et d'afficher en haut avec la fonctionnalité supprimée

Code :

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
 
 
 
 
$(function() { // when document has loaded
 
	var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work
 
	$('a#add').click(function() { // when you click the add link
		$('<p><input type="text" value="' + i + '" /></p>').appendTo('body'); // append (add) a new input to the document.
// if you have the input inside a form, change body to form in the appendTo
		i++; //after the click i will be i = 3 if you click again i will be i = 4
	});
 
	$('a#remove').click(function() { // similar to the previous, when you click remove link
	if(i > 1) { // if you have at least 1 input on the form
		$('input:last').remove(); //remove the last input
		i--; //deduct 1 from i so if i = 3, after i--, i will be i = 2
	}
	});
 
	$('a.reset').click(function() {
	while(i > 2) { // while you have more than 1 input on the page
		$('input:last').remove(); // remove inputs
		i--;
	}
	});
 
});
 
 
 
 
 
<a href="#" id="add" onclick="return false;">Add</a>
			<a href="#" id="remove" onclick="return false;">Remove</a>
 
			<p><input type="text" value="1" id="doc"/></p>

Merci pour votre aide

danielhagnoul · 06/09/2011, 00h15

Bonsoir

Attention, $(function() { est la forme abrégée de $(document).ready(function(){.

Voir la FAQ : Où dois-je poser mon $ ?

Attention, un id doit être unique.

Voici un exemple fonctionnel que vous pouvez adapter à vos besoins, que je n'ai pas bien compris.

Code :

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
84
85
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		.mesInputs, .mesDivisions {margin:12px; }
	</style>
</head>
<body>	
	<a href="#" id="addInput">Add Input</a>
	<a href="#" id="removeInput">Remove Input</a>
	<a href="#" id="resetInput">Reset Input</a>
 
	<div class="mesInputs">
		<input type="text" value="1"/>
	</div>
 
	<div class="mesDivisions">
		<div>Div 1</div>
	</div>
 
	<a href="#" id="addDiv">Add Div</a>
	<a href="#" id="removeDiv">Remove Div</a>
	<a href="#" id="resetDiv">Reset Div</a>
 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
	<script>
		$(function(){
			// l'exemple des inputs corrigé
			var i = $("input", ".mesInputs").size() + 1;
 
			var limit = 5; // pour limité à 4 car i = 2 au départ.
 
			$("#addInput").click(function(){
				if (i < limit){
					$('<input type="text" value="' + i + '" />').appendTo(".mesInputs");
					i++;
				}
			});
 
			$("#removeInput").click(function() {
				if (i > 2){
					$("input:last", ".mesInputs").remove();
					i--;
				}
			});
 
			// laisse le premier input
			$("#resetInput").click(function() {
				while(i > 2){
					$("input:last", ".mesInputs").remove();
					i--;
				}
			});
 
			// les divisions
			var nbDiv = $("div", ".mesDivisions").size() + 1;
			var limitDiv = 5;
 
			$("#addDiv").click(function(){
				if (nbDiv < limitDiv){
					$('<div>Div ' + nbDiv + '</div>').appendTo(".mesDivisions");
					nbDiv++;
				}
			});
 
			$("#removeDiv").click(function() {
				if (nbDiv > 2){
					$("div:last", ".mesDivisions").remove();
					nbDiv--;
				}
			});
 
			// laisse la première div
			$("#resetDiv").click(function() {
				while(nbDiv > 2){
					$("div:last", ".mesDivisions").remove();
					nbDiv--;
				}
			});
		});
	</script>
</body>  
</html>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email