Suivez les fils RSS
 
Rechercher dans le sujet :
Forum
» JavaScript, DOM et API Web HTML5
» Mes champs dynamique n'apparaissent pas dans la variable $_POST
Auteur
Su4p
# 10 Mar 2010 - 18:43:57
Citer
231 Posts
 Bonjour !
Le contexte 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:37
Citer
1 Posts
 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 decu

^
Heyoan
# 10 Mar 2010 - 22:00:37
Citer
Modérateur
8101 Posts
 Salut,

un exemple avec createElement (un peu plus fastidieux que le innerHtml mais peut-être plus clair 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>

Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
^
Heyoan
# 10 Mar 2010 - 22:30:11
Citer
Modérateur
8101 Posts
 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>

Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
^
Su4p
# 11 Mar 2010 - 00:44:55
Citer
231 Posts
 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:36
Citer
Modérateur
8101 Posts
 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. 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 ?
Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
^
Su4p
# 11 Mar 2010 - 11:44:39
Citer
231 Posts
 Le retour du test :
la version innerHTML ne marche pas 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 biggol ou plutot n'ont jamais existé
Modifié par Su4p (11 Mar 2010 - 12:12)
^
Le sujet est clos.
Aller à