AJOUTER UN BOUTON POUR SUPPRIMER INPUT TYPE TEXT ??

itry · 16 Février 2012

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

Supermaury · 17 Février 2012

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

@++ !

zeb · 17 Février 2012

Re: Ca devrait t'aider.

Supermaury a dit:
Ci-après un truc en Jquery qui fonctionne

et avec une seule ligne de javascript tu fait comment ?

itry · 17 Février 2012

C'est cool ton code supermaury merci bcp ;-) lol

itry · 17 Février 2012

merci aussi zeb pour ton code

itry · 17 Février 2012

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

Supermaury · 17 Février 2012

Re: Ca devrait t'aider.

zeb a dit:
Supermaury a dit:

Ci-après un truc en Jquery qui fonctionne

Cliquez pour agrandir...

et avec une seule ligne de javascript tu fait comment ?

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

) ... 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

@++

itry · 17 Février 2012

merci bcp a vous !!! problème résolu ;-)

zeb · 17 Février 2012

Re: Ca devrait t'aider.

Supermaury a dit:
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 ?

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.

Supermaury · 17 Février 2012

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 !

itry · 5 Avril 2012

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)

itry · 5 Avril 2012

Si vous pouvez m'aider, :-o merci ;-)