Mes champs dynamique n'apparaissent pas dans la variable $_POST

Question

Su4p

10 Mar 2010 à 18:43

Bonjour !
Le contexte Smiley decu

MYSQL,php,appache) j'ai une table foyer, une table invité , mon foyer peut avoir plusieurs invité (1,n).

Le but : mon but étant d'avoir la possibilité de rajouter autant de champs que nécessaire au simple clique d'un lien et de les enregistrer en base de donné.

problème :Mes champs ajouter de manière dynamique n'apparaissent pas dans la variable $_POST, ni dans le code source html.

le code :
java-script :


function create_champ(i) 
		{
			var i2 = i + 1;
			document.getElementById('leschamps_'+i).innerHTML += '<label for="Prenom"><span>Prénom :</span><input  id="prenom" size="10" type="text" name="prenom_'+i+'"/></label>';
			//document.getElementById('leschamps_'+i).innerHTML += '<label for="Repas"><span>Repas:</span><span class="radio" > oui<input type="radio" value="1" id="repas" name="Repas_'+i+'"/>non<input type="radio" value="0" name="Repas_'+i+'"/></span></label>';
			document.getElementById('leschamps_'+i).innerHTML += '<label  for="Hebergement"><span>Hebergement sans frais :</span><span class="radio" > oui<input type="radio" value="1" id="hebergement" name="Hebergement_'+i+'"/>non<input type="radio" value="0" name="Hebergement_'+i+'"/></span></label>';
			
		}

php :


if (isset($_POST['post']))
{
	$monFoyer= new foyer($_POST['nomFoy'],$_POST['adNum'],$_POST['adType'],$_POST['adLibelle'],$_POST['adCP'],MDP());
	
	$monInvite=new invite($_POST['prenom'],'','',$_POST['hebergement'],$monFoyer->m_code);
	print_r($_POST);
	$i=0;
	while(isset ($_POST['prenom_'.$i]))
	{
		$monInvite=new invite($_POST['prenom_'.$i],'','',$_POST['hebergement_'.$i],$monFoyer->m_code);
		
		
		$i++;
	}
}

html :


<span id="leschamps_0"><a class="lienAjouter" href="javascript:create_champ(0)">Ajouter un(e) invité(e)</a></span>
<label for="Prenom"><span>Prénom :</span><input size="10" type="text" id="prenom" name="prenom"/></label>
<!--<label  for="Repas"><span>Repas:</span> <span class="radio" >oui<input type="radio" value="1" id="repas" name="Repas"/>non<input type="radio" value="0" id="repas" name="Repas"/></span></label>-->
<label  for="Hebergement"><span>Hebergement sans frais :</span> <span class="radio" >oui<input type="radio" value="1" id="hebergement" name="hebergement"/>non<input type="radio" value="0" id="hebergement" name="Hebergement"/></span></label>

<input type='submit' name='Valider' value='Valider'/>

Merci d'avance

djawadshow

10 Mar 2010 à 20:21

d'après ce que j'ai lus il est assez chiant d'utilisé les inerhtml
il faut utilisé dom
comment ? je ne sais pas Smiley decu

Heyoan

10 Mar 2010 à 22:00

Salut,

un exemple avec createElement (un peu plus fastidieux que le innerHtml mais peut-être plus clair Smiley biggol

) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript">
var compteur = 0;

function ajouterPersonne() {
	compteur++;
	var oFIELDSET = document.getElementById('personnes');
	
	var oPprenom = document.createElement("P");
	var oLABELprenom = document.createElement("LABEL");
	oLABELprenom.setAttribute("for", "prenom_"+compteur);
	var oLABELprenom_text = document.createTextNode("Pr\351nom : ");
	oLABELprenom.appendChild(oLABELprenom_text);
	oPprenom.appendChild(oLABELprenom);
	var oINPUTprenom = document.createElement("INPUT");
	oINPUTprenom.setAttribute("type", "text");
	oINPUTprenom.setAttribute("id", "prenom_"+compteur);
	oINPUTprenom.setAttribute("name", "prenom["+compteur+"]");
	oINPUTprenom.setAttribute("size", "10");
	oPprenom.appendChild(oINPUTprenom);
	oFIELDSET.appendChild(oPprenom);

	var oPheberg = document.createElement("P");
	var oPheberg_text = document.createTextNode("H\351bergement sans frais : ");
	oPheberg.appendChild(oPheberg_text);
	var oINPUTheboui = document.createElement("INPUT");
	oINPUTheboui.setAttribute("type", "radio");
	oINPUTheboui.setAttribute("id", "heberg_oui_"+compteur);
	oINPUTheboui.setAttribute("name", "hebergement["+compteur+"]");
	oINPUTheboui.setAttribute("value", "1");
	oINPUTheboui.setAttribute("checked", "checked");
	oPheberg.appendChild(oINPUTheboui);
	var oLABELheboui = document.createElement("LABEL");
	oLABELheboui.setAttribute("for", "heberg_oui_"+compteur);
	var oLABELheboui_text = document.createTextNode("Oui ");
	oLABELheboui.appendChild(oLABELheboui_text);
	oPheberg.appendChild(oLABELheboui);
	var oINPUThebnon = document.createElement("INPUT");
	oINPUThebnon.setAttribute("type", "radio");
	oINPUThebnon.setAttribute("id", "heberg_non_"+compteur);
	oINPUThebnon.setAttribute("name", "hebergement["+compteur+"]");
	oINPUThebnon.setAttribute("value", "0");
	oPheberg.appendChild(oINPUThebnon);
	var oLABELhebnon = document.createElement("LABEL");
	oLABELhebnon.setAttribute("for", "heberg_non_"+compteur);
	var oLABELhebnon_text = document.createTextNode("Non");
	oLABELhebnon.appendChild(oLABELhebnon_text);
	oPheberg.appendChild(oLABELhebnon);
	oFIELDSET.appendChild(oPheberg);
}

</script>
</head>
<body>
<?php
if($_SERVER['REQUEST_METHOD']=='POST') {
	foreach($_POST['prenom'] as $cle => $valeur) {
		echo '<p>Prénom '.$cle.' : '.$valeur.' / Hébergement sans frais : '.$_POST['hebergement'][$cle]."</p>\n";
	}
}
?>
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
	<fieldset id="personnes">
		<legend>Personnes</legend>
			<p><a href="javascript:ajouterPersonne();">Ajouter une personne</a></p>
			<p>
				<label for="prenom_0">Prénom : </label>
				<input type="text" id="prenom_0" name="prenom[0]" size="10" />
			</p>
			<p>Hébergement sans frais :
				<input type="radio" name="hebergement[0]" id="heberg_oui_0" value="1" checked="checked" /><label for="heberg_oui_0">Oui </label>
				<input type="radio" name="hebergement[0]" id="heberg_non_0" value="0" /><label for="heberg_non_0">Non</label>
			</p>
	</fieldset>
	<p>
		<input type='submit' name='Valider' value='Valider'/> 
	</p>
</form>
</body>
</html>

Heyoan

10 Mar 2010 à 22:30

PS : version avec innerHtml

<script type="text/javascript">
var compteur = 0;

function ajouterPersonne() {
	compteur++;
	var oFIELDSET = document.getElementById('personnes');
	oFIELDSET.innerHTML += '<p>\n<label for="prenom_'+compteur+'">Prénom : </label>\n<input type="text" id="prenom_'+compteur+'" name="prenom['+compteur+']" size="10" />\n</p>\n<p>Hébergement sans frais :\n<input type="radio" name="hebergement['+compteur+']" id="heberg_oui_'+compteur+'" value="1" checked="checked" /><label for="heberg_oui_'+compteur+'">Oui </label>\n<input type="radio" name="hebergement['+compteur+']" id="heberg_non_'+compteur+'" value="0" /><label for="heberg_non_'+compteur+'">Non</label>\n</p>';
}
</script>

Su4p

11 Mar 2010 à 00:44

Merci encore, je regarde ça demain.
Mais ce qui me parais etrange c'est que la version innerHtml me parle plus que la version avec createElement... Neanmoins je me demande et je pense avoir deviner la réponse, laquel de ces deux solution est si je puis dire 'corecte', 'strict', 'bien pensé' ? et si tu as le temps mais tu en as déja fait bien assez : pourquoi ?
Merci merci merci merci

Heyoan

11 Mar 2010 à 01:03

En fait innerHTML ne fait pas partie des standards DOM du W3C mais en pratique il est très bien implémenté... et plus rapide. Smiley murf

Cela dit il me semble qu'il existe quelques bugs.

Comme je ne suis pas un expert je t'invite à jeter un oeil aux nombreux sujets qui en parlent comme par exemple Remplacement de contenu - Pourquoi éviter innerHTML ?

Su4p

11 Mar 2010 à 11:44

Le retour du test :
la version innerHTML ne marche pas Smiley decu

(aucune action sur le clique 'ajouter personne'
et j'ai toujours le même problème avec la version createElement :
je ne récupère que la première personne(celle qui n'est pas généré avec le javascript) toutes les autres disparaissent Smiley biggol

ou plutot n'ont jamais existé
Modifié par Su4p (11 Mar 2010 - 12:12)

Sujet clos