Bonjour,

Comme le titre l'indique, je suis entrain de créer un formulaire dynamique afin de gérer des insertions, des modifications et des suppressions dans une BDD.
Pour cela je travaille avec PHP et JavaScript.

Jusqu'à présent j'ai procédé de la façon suivante :

Etape 1 >> Je génère dans mon form les input en fonction des données présentes dans la base.
J'ajoute pour chaque nouvel élément généré un bouton permettant la suppression de celui-ci via une fonction JavaScript.

Code générant les éléments du formulaire

<?php
echo '<form name="frmTest" action="test.php" method="post">';
				
$sql = "SELECT id, name FROM user";
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
				
echo '<label class="lbl">User :</label></br>';
echo '<div><ul id="ul_user">';
$n_user=1;
while ($data = mysql_fetch_assoc($req))
{
	$name = $data['name'];
				
	echo '<li id="'.$n_user.'"><input type="text" id="u'.$n_user.'" name="u[]" value="'.$name.'"/>';
	echo '<input type="button" value="Del" onClick="del_user('.$n_user.')"></li>';
					
$n_user++;
}
?>

Code de la fonction JavaScript permettant la suppression d'un élément

function del_user(n_user)
{
	question = confirm('Delete this user ?');
	if (question)
	{
		var element = document.getElementById(''+n_user+'');
		element.parentNode.removeChild(element);
	}
	else
	{
		return false;
	}
}

Jusque ici tout marche bien...

Etape 2 >> Je crée un bouton permettant l'ajout d'un nouvel élément de formulaire (et du bouton permettant sa suppression) via une autre fonction JavaScript.
C'est lors de ce traitement que je m'expose à un problème.
En effet, je souhaite que l'id de la balise "<li>" du nouvel élément créé prenne pour valeur l'id du dernier élément généré par les données de la base +1.
Chaque nouvel élément étant ensuite incrémenté à partir de cette valeur.

Code de la fonction JavaScript permettant l'ajout d'un nouvel élément

var c, c2, ch0, ch1, ch2, n_user;
function add_user()
{
				
	c=document.getElementById('ul_user');
	c2=c.getElementsByTagName('li');
				
	ch0=document.createElement('li');
	ch1=document.createElement('input');
	ch2=document.createElement('input');

	ch0.setAttribute('id',''+n_user+'');
				
	ch1.setAttribute('type','text');
	ch1.setAttribute('id','u'+n_user);
	ch1.setAttribute('name','u[]');
				
	ch2.setAttribute('type','button');
	ch2.setAttribute('value','Del');
	ch2.setAttribute('onClick', 'del_user('+n_user+')');
				
	c.appendChild(ch0);
	ch0.appendChild(ch1);
	ch0.appendChild(ch2);
				
	n_user++;
}

Code d'appel de la fonction via le bouton ajouter

<?php
echo '<script language="javascript">n_user='.($n_user).'</script>';
echo '<input type="button" value="Add" onClick="add_user()">';
?>

Le problème est que la variable "n_user" de la fonction JavaScript prend pour valeur "1" lors du premier ajout, l'incrémentation se faisant ensuite normalement.
Ce qui ressort de mes recherches c'est principalement une confusion entre langage client/serveur.
Je suis débutant dans ce domaine, et il y a quelque chose que j'aimerais comprendre et que vous allez j'espère pouvoir m'expliquer.

Pour cela prenons un exemple :
J'ai 4 "user" dans ma base.
La page qui m'est renvoyé du serveur comporte donc 4 input contenant chacun le nom d'un "user".
Les dernier id de la balise "<li>" contenant chaque input à donc pour valeur "4".
La variable PHP "$n_user" vaut pour sa part "5" (les 4 "user" + la dernière incrémentation de la boucle "while").
Pourquoi dans ce cas lors de l'appel de ma fonction JS "add_user()" la variable JS "n_user" prend pour valeur "1" (et non "5" comme je le souhaite) alors que je précise juste avant au client qu'elle doit prendre la valeur de la variable PHP "$n_user" (donc "5") en utilisant la ligne suivante :

<?php
echo '<script language="javascript">n_user='.($n_user).'</script>';
?>

Quel est donc l'erreur de raisonnement que je commets ?
Quelle solution dois-je envisager pour réaliser le traitement souhaité ?

En vous remerciant par avance,
Tarken.

Montre le code HTML généré de ta page (clic doit -> afficher la source), pour enlever tout ce PHP.

On verra bien ce que le navigateur a réellement côté-client pour travailler

Je suis sous Chrome et lorsque je fais "Afficher le code source de la page" ça n'affiche pas ce qui nous intéresse ... Comprend pas...
Le code ci-dessous est issu de "Procéder à l'inspection de l'élément".

Dans le cas ci-dessous 2 nouveaux éléments input ont été ajoutés.

<form name="frmUser" action="test.php" method="post">
<label class="lbl">User :</label>
</br>
<div>
	<ul id="ul_user">
	
		<li id="1">
			<input type="text" id="u1" name="u[]" value="AAA"/>
			<input type="button" value="Del" onClick="del_user(1)">
		</li>
		<li id="2">
			<input type="text" id="u2" name="u[]" value="BBB"/>
			<input type="button" value="Del" onClick="del_user(2)">
		</li>
		<li id="3">
			<input type="text" id="u3" name="u[]" value="CCC"/>
			<input type="button" value="Del" onClick="del_user(3)">
		</li>
		<li id="4">
			<input type="text" id="u4" name="u[]" value="DDD"/>
			<input type="button" value="Del" onClick="del_user(4)">
		</li>
		<li id="1">
			<input type="text" id="u1" name="u[]"/>
			<input type="button" value="Del" onClick="del_user(1)">
		</li>
		<li id="2">
			<input type="text" id="u2" name="u[]"/>
			<input type="button" value="Del" onClick="del_user(2)">
		</li>
		
	</ul>
</div>

<script language="javascript">n_user=5</script>
<input type="button" value="Add" onClick="add_user()">

T'as pas le code source complet de la page ? (on s'en fiche des nouveaux ajouts via JS, les inputs générés via PHP suffiront)

Elle est définie où ta fonction add_user ?

Et voici :

<html>
	<head>
		<title>Test</title>
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style_test.css" />
		
		<script language="javascript">
			function del_user(n_user)
			{
				question = confirm('Delete this user ?');
				if (question)
				{
					var element = document.getElementById(''+n_user+'');
					element.parentNode.removeChild(element);
				}
				else
				{
					return false;
				}
			}

			
			var c, c2, ch0, ch1, ch2, n_user;
			function add_user()
			{
				
				c=document.getElementById('ul_user');
				c2=c.getElementsByTagName('li');
				
				ch0=document.createElement('li');
				ch1=document.createElement('input');
				ch2=document.createElement('input');

				ch0.setAttribute('id',''+n_user+'');
				
				ch1.setAttribute('type','text');
				ch1.setAttribute('id','u'+n_user);
				ch1.setAttribute('name','u[]');
				
				ch2.setAttribute('type','button');
				ch2.setAttribute('value','Del');
				ch2.setAttribute('onClick', 'del_user('+n_user+')');
				
				c.appendChild(ch0);
				ch0.appendChild(ch1);
				ch0.appendChild(ch2);
				
				n_user++;
			}
		</script>
		
	</head>
	
		
	
	
	<body>
	
		<form name="frmUser" action="test.php" method="post">
		<label class="lbl">User :</label>
		</br>
		<div>
			<ul id="ul_user">
			<li id="1">
			<input type="text" id="u1" name="u[]" value="AAA"/>
			<input type="button" value="Del" onClick="del_user(1)">
			</li>
			<li id="2">
			<input type="text" id="u2" name="u[]" value="BBB"/>
			<input type="button" value="Del" onClick="del_user(2)">
			</li>
			<li id="3">
			<input type="text" id="u3" name="u[]" value="CCC"/>
			<input type="button" value="Del" onClick="del_user(3)">
			</li>
			<li id="4">
			<input type="text" id="u4" name="u[]" value="DDD"/>
			<input type="button" value="Del" onClick="del_user(4)">
			</li>
			</ul>
		
		</div>
		<p>
			<script language="javascript">n_user=5</script>
			<input type="button" value="Add" onClick="add_user()">
		</p>
		</form>
		
	</body>

</html>

Comme tu le constate la fonction add_user() est défini dans le head.

Chez moi, ce code fonctionne à merveille...

Si c'est bien ton code généré, ça devrait fonctionner... T'as un lien vers la page online ?

Non malheureusement ça tourne en local...
Si ça doit fonctionner c'est déjà une bonne chose !
Le problème doit venir d'ailleurs, mais d'où !?
Une idée de ce qui pourrait se passer ? Ou simple mystère de l'informatique (ouai je sais c'est facile, mais parfois c'est vraiment mystérieux pour moi...) ?

En attendant je vais essayer de tout refaire, enfin supprimer le fichier sur mon localhost et le renvoyer après avoir tout bien vérifier même si ça ne devrait pas être utile vu que ça marche (à merveille ^^) chez toi...

Edit : bon ben ça marche maintenant...
Je passe le sujet en résolu, mais si explication il y a je suis preneur évidemment !