AJOUTER UN BOUTON POUR SUPPRIMER INPUT TYPE TEXT ??

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par itry, 16 Février 2012.

  1. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    Bonjour à tous,

    J'essaye d'ajouter à mon code un bouton qui supprime des input type text

    Voila mon code:

    Code:
    <script>
    var nlignes = 1;
    function Ajouter1(){
    nlignes++;
    saisies1.insertAdjacentHTML('BeforeEnd','<BR>Produit '+nlignes+' <input type=text size=4 name=P'+nlignes+'> Quantité '+nlignes+' <input type=text name=QT'+nlignes+'> et de trois '+nlignes+' <input type=text name=QT'+nlignes+'>');
    };
    </script>
    
    <Form>
    <Input Type="Button" Value="Ajout ligne" OnClick=Ajouter1()>
    <br>
    <div id="saisies1"></div>
    </Form>
    
    j'ai un bouton ajouter qui rajoute 3 input a chaque clique , je veux faire un bouton qui supprime la ligne de 3 input a chaque clique , mais ça ne fonctionne pas :-( si quelqu'un peut m'aider svp ?

    merci d'avance
     
  2. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
    Ca devrait t'aider.

    Ci-après un truc en Jquery qui fonctionne et qui doit correspondre à ce que tu cherches.
    J'ai réécris ton code, à adapter donc.

    Code:
    <html>
    	<head>
    		<style type="text/css">
    			fieldset {border:0}
    			body, input, label {font:11px verdana}
    			#debug {color:red;margin-top:10px}
    		</style>
    	</head>
    	<body>
    	<form id="myForm" method="post" action="form.html">
    		<fieldset>
    			<label for="produit1">Produit</label> : <input id="produit1" name="produit1" type="text" value="" />
    			<label for="quantite1">Quantité</label> : <input id="quantite1" name="quantite1" type="text" value=""/>
    			<label for="autre1">Autre</label> : <input id="autre1" name="autre1" type="text" value=""/>
    		</fieldset>
    		<input type="submit" value="Envoyer" />
    	</form>
    	<a href="#" class="add">Ajouter</a> <a href="#" class="del">Supprimer</a>
    	<div id="debug"></div>
    	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    	<script type="text/javascript">
    		$(function(){
    			var nb = 1;
    			$('.add').click(function(){
    				var ligneTemp = $(myForm).children("fieldset:last");
    				ligneTemp.after(ligneTemp.clone(true));
    				$(myForm).children("fieldset:last").hide().fadeIn();
    				var ligneTemp = $(myForm).children("fieldset:last");
    				ligneTemp.find('label').each(function() {
    					tempLabel = $(this).attr("for").replace(nb, nb+1);
    					$(this).attr("for",tempLabel);
    				});
    				ligneTemp.find('input').each(function() {
    					this.id= this.id.replace(nb, nb+1);
    					this.name= this.name.replace(nb, nb+1);
    					this.value= "";
    				});
    				nb++;
    			});
    			$('.del').click(function(){
    				if (nb>1) { // Pour qu'il reste au moins une ligne
    					$(myForm).children("fieldset:last").fadeOut(300, function(){$(this).remove();});
    					nb--;
    					
    				}
    			});
    			$("#myForm").submit(function(){
    				var datas_form = $("#myForm").serializeArray();
    				$("#debug").empty(); 
    				$.each(datas_form, function(i, field){
    					$("#debug").append(field.name + ":" + field.value + "<br />");
    				});
    				return false;
    			});
    		}); 
    	</script>
    	</body>
    </html>
    
    A tester ici : http://goo.gl/yiClX

    @++ !
     
  3. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 187
    J'aime reçus:
    1
    Re: Ca devrait t'aider.

    et avec une seule ligne de javascript tu fait comment ?
     
  4. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    C'est cool ton code supermaury merci bcp ;-) lol
     
  5. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    merci aussi zeb pour ton code :)
     
  6. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    supermaury Par contre ton code pour l'adapter c'est pas simple vu que je le comprend pas trop, parce que moi je veux l’insérer dans un 'while' et j'utilise plusieurs pages pour mon code , ça fonctionne pas :-(
     
  7. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
    Re: Ca devrait t'aider.

    Visiblement tu n'aimes pas JQuery Zeb.

    C'est juste que je n'ai pas 2 heures pour répondre et que Jquery facilite quand même les choses niveau vitesse de codage.

    Le tout c'est d'apporter une réponse fonctionnelle non ?

    Bon j'avoue on peut s'en passer (et ça fait quelques ko de gagnés) mais en une ligne je vais avoir du mal (sauf si je mets le tout dans un .js :D ) ... En gros ça donne ça :

    Code:
    <html>
    	<head>
    		<style type="text/css">
    			fieldset {border:0;margin:3px 0;padding:0}
    			body, input, label {font:11px verdana}
    		</style>
    	</head>
    	<body>
    	<form id="myForm" method="post" action="form2.html" onSubmit="return verif();">
    		<fieldset>
    			<label for="produit1">Produit 1</label> : <input id="produit1" name="produit1" type="text" value="" />
    			<label for="quantite1">Quantité 1</label> : <input id="quantite1" name="quantite1" type="text" value=""/>
    			<label for="autre1">Autre 1</label> : <input id="autre1" name="autre1" type="text" value=""/>
    		</fieldset>
    		<input type="submit" value="Envoyer" />
    	</form>
    	<a href="#" onclick="add();">Ajouter</a> <a href="#"  onclick="del();">Supprimer</a>
    	<script type="text/javascript">
    		var nb = 1;
    		function add() {
    			ligneCount = document.getElementsByTagName("fieldset").length-1;
    			ligneTemp = document.getElementsByTagName("fieldset")[ligneCount];
    			ligneClone = ligneTemp.cloneNode(true);
    			for (i=0; i<ligneClone.getElementsByTagName("input").length; i++) {
    				ligneClone.getElementsByTagName("input")[i].id=ligneClone.getElementsByTagName("input")[i].id.replace(nb,nb+1);
    				ligneClone.getElementsByTagName("input")[i].name=ligneClone.getElementsByTagName("input")[i].name.replace(nb,nb+1);
    				ligneClone.getElementsByTagName("input")[i].value="";
    				ligneClone.getElementsByTagName("label")[i].htmlFor=ligneClone.getElementsByTagName("label")[i].htmlFor.replace(nb,nb+1);
    				ligneClone.getElementsByTagName("label")[i].innerHTML=ligneClone.getElementsByTagName("label")[i].innerHTML.replace(nb,nb+1);
    			}	
    			myForm.getElementsByTagName("fieldset")[0].appendChild(ligneClone);//
    			nb++;
    		}
    		function del() {
    			if (nb>1) {
    				var noeud=myForm.getElementsByTagName("fieldset")[0].lastChild;
    				myForm.getElementsByTagName("fieldset")[0].removeChild(noeud);
    				nb--;
    			}
    		}
    		function verif() {
    			return false;
    		}
    	</script>
    	</body>
    </html>
    
    Note : les labels et leur input de destination s'adaptent avec les lignes.

    A tester ici : http://goo.gl/dVcZ1

    @++
     
  8. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    merci bcp a vous !!! problème résolu ;-)
     
  9. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 187
    J'aime reçus:
    1
    Re: Ca devrait t'aider.

    Non j'ai rien contre ou pour JQuery, mais a utiliser toujours des tonnes de code on fini par oublier que coder est un métier et qu'a la base il faut réfléchir a ce qu'on fait avant de prendre un 35 tonnes pour creuser un trou de taupe (ou prendre la voiture pour aller acheter le pain deux rues plus loin si tu préfère).
    Bon, bien sur, il y a le traditionnel "réinventer la roue" mais là c'est JQuery qui réinvente.

    Le code c'est avant tout une question d'organisation et de logique, donc dans l'exemple un bout de code est ajouté dans une div ensuite on souhaite l'enlever, autant utiliser le même genre de code ... Si tu peux dire que la "div" truc = "<machin>" il est aussi simple de dire ensuite la "div" truc = ""

    Quand je regarde ton code qui est propre d'ailleurs, je ne peut pas m’empêcher de penser aux ressources qu'il met en jeu. D'abord faut charger une bibliothèque complète. Ensuite à la fonction d'ajout qui existait ajouter une autre fonction pour supprimer, le tout faisant appel a des nœuds et des tableaux. C'est sympa mais exagéré.
    Le pire c'est qu'on pense de plus en plus comme ça. Il y a pas si longtemps un gars demandait comment mettre un lien tout autour de son site (sur le fond d'écran) et c'est parti en javel avec du JQuery et je sais plus quoi pour un simple lien dans le body avec un z-index adéquat en height 100% width 100% ....

    Je ne comprend pas ce genre de démarche. Faut pas s'étonner si ensuite on a besoin d'une centrale nucléaire en plus dès qu'un codeur invente l'appli du siècle pour iphone ... (je pense que tu comprend l'image)

    Sinon concrètement ça prend deux minutes a coder ce genre de truc (du moins c'est ce que cela me prend). Je sais pas si ça viens du fait que les premières machines sur lesquels j'ai travaillé ne comptait qu'un petit millier d'octets pour placer mon code mais en tous cas un principe de base du code que j'ai toujours entendu est de ne pas mettre 10 lignes là ou 5 suffisent.

    Bref en copiant le code d'itry ça donne ça :

    Code:
      <script>
        var nlignes = 0;
        function Ajouter(){
        	nlignes++;
        	var obj = document.getElementById('saisies');
        	obj.innerHTML = obj.innerHTML + '<div id="champ'+nlignes+'">Produit '+nlignes+' <input type="text" size="4" name="P'+nlignes+'" /> Quantité '+nlignes+' <input type="text" name="QT'+nlignes+'" /> et de trois '+nlignes+' <input type="text" name="QT'+nlignes+'" /> <input type="button" value="supprimer" onclick="document.getElementById(\'champ'+nlignes+'\').innerHTML=\'\';" /></div>';
        }
       </script>
    
        <Form>
        <Input Type="Button" Value="Ajout ligne" OnClick="Ajouter();">
        <br>
        <div id="saisies"></div>
        </Form>
    Une petite adaptation structurelle pour que les groupes de champ soit isolés et discernables via un ID unique et un bouton avec un onclick pour vider le groupe .... même pas une ligne, une instruction.
     
  10. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
    Rien à ajouter Zeb : simple et efficace.

    Allez, je remplacerais juste ça histoire que notre ami Itry n'ait pas d'espace blanc dans sa mise en page quand il supprime (mais là c'est juste pour te taquiner, j'ai bien compris la logique de ta démonstration, à savoir pourquoi faire compliqué quand on peut faire simple) :

    Code:
    onclick="document.getElementById(\'saisies\').removeChild(document.getElementById(\'champ'+nlignes+'\'));"
    Visiblement, problème résolu. Et un topic de clôturé, un !

    Bon we !
     
  11. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    Bonjour a tous,

    j'ai un nouveau petit souci les amis, sur le même code qui se trouve ci-dessus, en fait cela marche, mais j'ai remarquer qu'en ajoutant les input type text, puis en supprimant que le compteur se réinitialiser pas.

    ex:

    - Au début, c'est normal, j'ai mon input avec mon bouton ajouter au cas ou, ou je veux ajouter.
    résultat --> input 1 + (bouton ajouter)

    - ex: j'ajoute 4 nouveaux input , jusqu'ici pas de problème :)
    résultat --> input 1 + (bouton ajouter)
    input 2 + (bouton supprimer)
    input 3 + (bouton supprimer)
    input 4 + (bouton supprimer)
    input 5 + (bouton supprimer)

    - j'ai fais une erreur, je supprime les input 3 et 4, problème :-(
    résultat --> input 1 + (bouton ajouter)
    input 2 + (bouton supprimer)
    input 5 + (bouton supprimer)

    - je continue pour que vous voyez plus clair, je supprime l'input 5
    résultat --> input 1 + (bouton ajouter)
    input 2 + (bouton supprimer)

    - puis je rajoute à nouveau deux input, on constate que le compteur ne se réinitialise pas :-(
    résultat --> input 1 + (bouton ajouter)
    input 2 + (bouton supprimer)
    input 6 + (bouton supprimer)
    input 7 + (bouton supprimer)
    input 5 + (bouton supprimer)
     
  12. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    Si vous pouvez m'aider, :-o merci ;-)
     
Chargement...
Similar Threads - AJOUTER BOUTON SUPPRIMER Forum Date
[Script] Ajouter les boutons de partage des réseaux sociaux sans le tracking Développement d'un site Web ou d'une appli mobile 25 Août 2013
Rajouter bouton imprimante sur une page web Débuter en référencement 22 Janvier 2013
[astuce] ajouter un bouton Suivre au widget Twitter Twitter 7 Juillet 2012
Ajouter le bouton "imprimer intinéraire" sur une carte Google map Google : l'entreprise, les sites web, les services 20 Juillet 2010
J'ai créé un page facebook pour mon site. comment ajouter le bouton "j'aime" ? Développement d'un site Web ou d'une appli mobile 1 Mai 2010
Comment ajouter de l'audio à Google Slides YouTube, Google Images et Google Maps 11 Mars 2021
Protection de site web : quel code ajouter dans htaccess ? URL Rewriting et .htaccess 5 Mars 2021
Comment ajouter un blog pour le SEO sur un site statique ? Demandes d'avis et de conseils sur vos sites 20 Janvier 2021
Ajouter des liens internes sitewide en cloaking Netlinking, backlinks, liens et redirections 2 Décembre 2020
Ajouter des lignes de rich snippet - KK Star Référencement Google 31 Mars 2020