IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Ajouter/supprimer texte venant d'un champ texte


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de stomerfull
    Inscrit en
    Septembre 2005
    Messages
    307
    Détails du profil
    Informations forums :
    Inscription : Septembre 2005
    Messages : 307
    Par défaut Ajouter/supprimer texte venant d'un champ texte
    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

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

Discussions similaires

  1. [AC-2007] Ajout de zeros à gauche dans un champ texte
    Par nemau dans le forum Access
    Réponses: 6
    Dernier message: 17/10/2014, 12h05
  2. Calculer un champ texte depuis un autre champ texte via Onchange
    Par tomguiss dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 23/10/2010, 18h58
  3. Remplir automatiquement 1 champ text avec 2 autres champs text
    Par Dsphinx dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 14/05/2010, 21h11
  4. [JDateChooser] ajout d'un listener sur le champs text
    Par Micke7 dans le forum Composants
    Réponses: 0
    Dernier message: 06/02/2009, 15h00
  5. Réponses: 2
    Dernier message: 27/08/2008, 09h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo