Passage de variable dans un input hidden

Résolu

bernard_26000 Messages postés 6 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 24 décembre 2014 - Modifié par kazma le 16/12/2014 à 23:13
bernard_26000 Messages postés 6 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 24 décembre 2014 - 24 déc. 2014 à 15:48

Bonjour,

Je suis en train de faire un petit programme qui permettra à un visiteur de créer un texte, de le modifier couleur, taille, police...
Une fois crée ce texte, je le récupère dans une autre page pour traitement affichage, insertion dans une base de données....
Pour que ca soit plus facile je vais vous mettre des extraits de mon code...
Ma zone texte :

<div class="police" id="zone" contenteditable>Votre texte</div>

Ma fonction pour changer le texte :

<script type="text/javascript"> 

 function change_cellule(texte)
 {
 document.getElementById('zone').innerHTML = texte;
 }
 </script>

Ma fonction pour faire le set de mon texte:

 
 function remplirInput() {
 
  
    var zone = document.getElementById("zone");
 
 var texte = zone.texte ;
  document.getElementById('text').setAttribute('value', texte);}

Pour valider l'input

function setZoneTextContent(valeur) {   
    var zone = document.getElementById("zone");
    if (zone) {
        zone.textContent = valeur;
    }
}

et pour envoyer mon texte dans un form:

<input type="hidden" name="text" id="text" value="">

Avec tout ça je ne reçois sur ma page de traitement "undefined"...
Si ca vous parle, merci de me dire ou ca coince et quoi qu'il en soit merci à vous d'avoir passer un moment sur mon topic.

A voir également:

Passage de variable dans un input hidden
C# passage par référence - Conseils pratiques -C# / .NET
Line input vba - Forum Visual Basic
Variable objet ou variable de bloc with non définie ✓ - Forum Visual Basic 6
Erreur 91 : Variable objet ou variable bloc With non définie ✓ - Forum Visual Basic 6
Gros Probleme avec "input line" qui me lit tout le fichier au lieu de la ligne s - Forum Visual Basic

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
16 déc. 2014 à 21:02

Bonjour
le souci c'est qu'on ne sait pas quel bout de code va où. .. (dans quelle page. .).

Montre nous le code intégral de tes deux pages

Réponse 2 / 5

bernard_26000 Messages postés 6 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 24 décembre 2014
17 déc. 2014 à 02:59

Bonjour Jordane

Je ne voulais pas mettre le code intégral pour ne pas alourdir mon topic
Si ca peut permettre de mieux comprendre le voici

<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>Document sans titre</title>
<link rel="stylesheet" href="css/font.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">


<script type="text/javascript"> 

 function change_cellule(texte)
 {
 document.getElementById('zone').innerHTML = texte;
 }
 </script>
 
 <script type="text/javascript"> 
 
 function setZoneCSS(propriete, valeur){
   var zone = document.getElementById("zone");
   if(zone){
       zone.style[propriete] = valeur;
   }
}
</script>
 
</script>
 
<script type="text/javascript">

		function ChangeImage(url) {
			document.getElementById("img").src = url;
		}

</script>


<script type="text/javascript">  
 function remplirInput() {
	
		
    var zone = document.getElementById("zone");
	
	var texte = zone.texte ;
		document.getElementById('text').setAttribute('value', texte);

			
    var fontSize = zone.style.fontSize;
        document.getElementById('fontSize').setAttribute('value', fontSize);
    var fontColor = zone.style.color;
    	document.getElementById('fontColor').setAttribute('value', fontColor);
	var fontFamily = zone.style.fontFamily;
    	document.getElementById('fontFamily').setAttribute('value', fontFamily);
	var fontStyle = zone.style.fontStyle;
    	document.getElementById('fontStyle').setAttribute('value', fontStyle);
	var fontWeight = zone.style.fontWeight;
    	document.getElementById('fontWeight').setAttribute('value', fontWeight);
}
</script>  

<script type="text/javascript"> 
   function setZoneCSS(propriete, valeur) {
    	var zone = document.getElementById("zone");
    		if (zone) {
        		zone.style[propriete] = valeur;
        		remplirInput();
    		}
}

</script>

<script type="text/javascript">
	function setZoneTextContent(valeur) {   
    	var zone = document.getElementById("zone");
    		if (zone) {
        	zone.textContent = valeur;
			remplirInput();
    	}
}

</script>


 <style>
 #zone {
	position:absolute;
	text-align:center;
	width:165px;
	height:100px;
	border:dotted #FF0000 2px;
	left: 116px;
	top: 94px;
	z-index:100;
 }
 </style>

</head>

<body onLoad="remplirInput"> 
<table width="800px" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffffff">
	<tr>
		<td>
        <div class="menu">
			<a href="index.php">Accueil</a>
		</div>
		<div class="menu">
			<a href="teetext.php" id="activ">Ajouter texte</a>
		</div>
		<div class="menu" >
			<a href="teemot.php">Ajouter motif</a>
		</div>
		<div class="menu" >
			<a href="teetexmot">Texte et motif</a>
		</div>

       
		<div style=" width:800px; position:relative; float:left">


 		<div style="position:relative; float:left" >
      		<img src="images/01.jpg" width="400" id="img">
 		</div>
        
		<div style="width:190px; margin-left:5px; float:left">
        
		<div class="police" id="zone" contenteditable>Votre texte</div>
<!-- <textarea onkeyup="change_cellule(this.value)"> </textarea><br><br>
<a href="#" onclick="regleStyle('01'); return false">police1</a>
<a href="#" onclick="regleStyle('02'); return false">police2</a>
<a href="#" onclick="regleStyle('03'); return false">police3</a><br><br>-->
	<b>POLICE</b>
	<div id="cont1">
		<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','Verdana'); return false">Verdana</a><br>
		<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','Cursive'); return false">Cursive</a><br>
		<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','Verdana'); return false">Verdana</a><br>
		<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','Cursive'); return false">Cursive</a><br>
		<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','most_waztedregular'); return false">Mostwasted</a>
	</div>
	<br>
	<b>TAILLE_DU_TEXTE</b>
	<div id="cont1">
	<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','15px'); return false">Taille 15</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','20px'); return false">Taille 20</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','25px'); return false">Taille 25</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','30px'); return false">Taille 30</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','35px'); return false">Taille 35</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','40px'); return false">Taille 40</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','45px'); return false">Taille 45</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','50px'); return false">Taille 50</a><br>
	</div>
	<br>

	<b>COULEUR_DU_TEXTE</b>
	<div id="cont1">
	<a class="fenetre" href="#" onclick="setZoneCSS('color','red'); return false">Texte en rouge</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('color','white'); return false">Texte en blanc</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('color','yellow'); return false">Texte en jaune</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('color','black'); return false">Texte en noir</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('color','green'); return false">Texte en vert</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('color','orange'); return false">Texte en orange</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('color','grey'); return false">Texte en gris</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('color','blue'); return false">Texte en bleu</a>
	</div>
	<br>
    
<div style="width:190px; float:left">
    
	<div class=" lar">
	<a class="fenetre" href="#" onclick="setZoneCSS('fontStyle','italic'); return false">Italique</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('fontStyle',''); return false">Supprimer</a></div>
	<div class="lar">
	<a class="fenetre" href="#" onclick="setZoneCSS('fontWeight','bold'); return false">Gras</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('fontWeight',''); return false">Supprimer</a></div>
	</div>

</div>

<div>

<div style="clear:both"></div>

  <div>
      <img src="images/01.jpg" height="110" onClick="ChangeImage(this.src);">  
      <img src="images/02.jpg" height="110" onClick="ChangeImage(this.src);">  
      <img src="images/03.jpg" height="110" onClick="ChangeImage(this.src);">
</div>

</div>

 
<script type="text/javascript">
	function change_cellule(texte)
 		{
 			texte = document.getElementById('zone').textContent; {
		 	alert(texte);
			}
 		}
</script>
 
 <div style="clear:both"></div>
<form name="" id="remplirInput()" action="traitement.php" method="post">
   <input type="hidden" name="text" id="text" value="">
   <input type="hidden" name="texte" id="texte" value="">
  <input type="hidden" name="fontSize"  id="fontSize"  value="" >
  <input type="hidden" name="fontColor"  id="fontColor"  value="" >
  <input type="hidden" name="fontFamily"  id="fontFamily"  value="" >
  <input type="hidden" name="fontStyle"  id="fontStyle"  value="" >
  <input type="hidden" name="fontWeight"  id="fontWeight"  value="" >
<!-- Etc.. -->
  <input type="submit" value="envoyer">
</form>

<A href="javascript:;" onClick="change_cellule();">Texte1</A><br>
</div>

</div>
 
 
		</td>
	</tr>
</table>

</body>
</html>

La page traitement.php ne contient pour l'instant qu'un simple "echo" pour m'assurer que les valeurs passent bien.

Merci

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
17 déc. 2014 à 11:05

Bon.. au premier coup d'oeil .. je vois déjà quelques anomalies :

1 - Tu as deux fois la fonction change_cellule(texte) dans ton code .. Ligne 11 et 192
2 - Ligne 213 .. tu fais appels à cette fonction... mais sans lui donner de paramètre....change_cellule() ?
3 - Lignes 25 / 27 .. tu fermes DEUX fois la balises SCRIPT ...
NB : Évites d'ouvrir/fermer des balises SCRIPT plusieurs fois .. surtout si elles sont à la suite.. ça n'a aucun intérêt hormis causer des petites erreurs comme celle la !

4 - Dans ton FORM .. tu mets comme ID .. une fonction ???

<form name="" id="remplirInput()" action="traitement.php" method="post">

5 - Tu utilises comme NAME et ID .. le mot TEXT ( ou TEXTE) ... Evites..... (ce sont des termes utilisés pour définir le "type" de l'input.. le fait d'utiliser ça dans le NOM ou l' ID .. n'est clairement pas une bonne idée !

   <input type="hidden" name="text" id="text" value="">
   <input type="hidden" name="texte" id="texte" value="">

Corriges déjà tout ça ..reteste .. et repostes le code corrigé si tu as toujours un souci.

PS: Sur ta page traitement.php .. ajoutes ces lignes de code aussi histoire de vérifier si tes variables POST sont bien transmises:

echo "<pre>Variables POST :<br>";
print_r($_POST);
echo "</pre>";

Réponse 3 / 5

bernard_26000 Messages postés 6 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 24 décembre 2014
17 déc. 2014 à 16:21

Merci Jordane,
J'ai fait quelques corrections et ca marche du feu de dieu ....
voilà le code corrigé

<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>Document sans titre</title>
<link rel="stylesheet" href="css/font.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">


<script type="text/javascript"> 

 function change_cellule(texte)
 {
 document.getElementById('zone').innerHTML = texte;
 }
 </script>
 
 <script type="text/javascript"> 
 
 function setZoneCSS(propriete, valeur){
   var zone = document.getElementById("zone");
   if(zone){
       zone.style[propriete] = valeur;
   }
}
</script>
 
<script type="text/javascript">

		function ChangeImage(url) {
			document.getElementById("img").src = url;
		}

</script>


<script type="text/javascript">  
 function remplirInput() {
	 		
    var zone = document.getElementById("zone");
	
	var maVariable = zone.textContent ;
		document.getElementById('maVariable').setAttribute('value', maVariable);

			
    var fontSize = zone.style.fontSize;
        document.getElementById('fontSize').setAttribute('value', fontSize);
    var fontColor = zone.style.color;
    	document.getElementById('fontColor').setAttribute('value', fontColor);
	var fontFamily = zone.style.fontFamily;
    	document.getElementById('fontFamily').setAttribute('value', fontFamily);
	var fontStyle = zone.style.fontStyle;
    	document.getElementById('fontStyle').setAttribute('value', fontStyle);
	var fontWeight = zone.style.fontWeight;
    	document.getElementById('fontWeight').setAttribute('value', fontWeight);
}
</script>  

<script type="text/javascript"> 
   function setZoneCSS(propriete, valeur) {
    	var zone = document.getElementById("zone");
    		if (zone) {
        		zone.style[propriete] = valeur;
        		remplirInput();
    		}
}

</script>

<script type="text/javascript">
	function setZoneTextContent(valeur) {   
    	var maVariable = document.getElementById("zone");
    		if (zone) {
        	zone.textContent = valeur;
			remplirInput(maVariable);
    	}
}

</script>


 <style>
 #zone {
	position:absolute;
	text-align:center;
	width:165px;
	height:100px;
	border:dotted #FF0000 2px;
	left: 116px;
	top: 94px;
	z-index:100;
 }
 </style>

</head>

<body onLoad="remplirInput"> 
<table width="800px" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffffff">
	<tr>
		<td>
        <div class="menu">
			<a href="index.php">Accueil</a>
		</div>
		<div class="menu">
			<a href="teetext.php" id="activ">Ajouter texte</a>
		</div>
		<div class="menu" >
			<a href="teemot.php">Ajouter motif</a>
		</div>
		<div class="menu" >
			<a href="teetexmot">Texte et motif</a>
		</div>

       
		<div style=" width:800px; position:relative; float:left">


 		<div style="position:relative; float:left" >
      		<img src="images/01.jpg" width="400" id="img">
 		</div>
        
		<div style="width:190px; margin-left:5px; float:left">
        
		<div class="police" id="zone" contenteditable>Votre texte</div>
<!-- <textarea onkeyup="change_cellule(this.value)"> </textarea><br><br>
<a href="#" onclick="regleStyle('01'); return false">police1</a>
<a href="#" onclick="regleStyle('02'); return false">police2</a>
<a href="#" onclick="regleStyle('03'); return false">police3</a><br><br>-->
	<b>POLICE</b>
	<div id="cont1">
		<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','Verdana'); return false">Verdana</a><br>
		<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','Cursive'); return false">Cursive</a><br>
		<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','Verdana'); return false">Verdana</a><br>
		<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','Cursive'); return false">Cursive</a><br>
		<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','most_waztedregular'); return false">Mostwasted</a>
	</div>
	<br>
	<b>TAILLE_DU_TEXTE</b>
	<div id="cont1">
	<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','15px'); return false">Taille 15</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','20px'); return false">Taille 20</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','25px'); return false">Taille 25</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','30px'); return false">Taille 30</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','35px'); return false">Taille 35</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','40px'); return false">Taille 40</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','45px'); return false">Taille 45</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','50px'); return false">Taille 50</a><br>
	</div>
	<br>

	<b>COULEUR_DU_TEXTE</b>
	<div id="cont1">
	<a class="fenetre" href="#" onclick="setZoneCSS('color','red'); return false">Texte en rouge</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('color','white'); return false">Texte en blanc</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('color','yellow'); return false">Texte en jaune</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('color','black'); return false">Texte en noir</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('color','green'); return false">Texte en vert</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('color','orange'); return false">Texte en orange</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('color','grey'); return false">Texte en gris</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('color','blue'); return false">Texte en bleu</a>
	</div>
	<br>
    
<div style="width:190px; float:left">
    
	<div class=" lar">
	<a class="fenetre" href="#" onclick="setZoneCSS('fontStyle','italic'); return false">Italique</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('fontStyle',''); return false">Supprimer</a></div>
	<div class="lar">
	<a class="fenetre" href="#" onclick="setZoneCSS('fontWeight','bold'); return false">Gras</a><br>
	<a class="fenetre" href="#" onclick="setZoneCSS('fontWeight',''); return false">Supprimer</a></div>
	</div>

</div>

<div>

<div style="clear:both"></div>

  <div>
      <img src="images/01.jpg" height="110" onClick="ChangeImage(this.src);">  
      <img src="images/02.jpg" height="110" onClick="ChangeImage(this.src);">  
      <img src="images/03.jpg" height="110" onClick="ChangeImage(this.src);">
</div>

</div>
 
 <div style="clear:both"></div>
<form name="" id="" action="traitement.php" method="post">
   <input type="hidden" name="maVariable" id="maVariable" value="">
  <input type="hidden" name="fontSize"  id="fontSize"  value="" >
  <input type="hidden" name="fontColor"  id="fontColor"  value="" >
  <input type="hidden" name="fontFamily"  id="fontFamily"  value="" >
  <input type="hidden" name="fontStyle"  id="fontStyle"  value="" >
  <input type="hidden" name="fontWeight"  id="fontWeight"  value="" >
<!-- Etc.. -->
  <input type="submit" value="envoyer">
</form>


</div>

</div>
 
 
		</td>
	</tr>
</table>

</body>
</html>

Si je peux me permettre, je voudrai aussi faire la même chose avec l'image de fond qui ici :

  <div>
      <img src="images/01.jpg" height="110" onClick="ChangeImage(this.src);">  
      <img src="images/02.jpg" height="110" onClick="ChangeImage(this.src);">  
      <img src="images/03.jpg" height="110" onClick="ChangeImage(this.src);">
</div>

et qui est modifiée avec la fonction suivante :

<script type="text/javascript">

		function ChangeImage(url) {
			document.getElementById("img").src = url;
		}

</script>

Là, j'avoue ne pas savoir par quel bout commencer...
Encore merci Jordane

Réponse 4 / 5

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
17 déc. 2014 à 16:47

je voudrai aussi faire la même chose avec l'image de fond

Qu'est sensée faire cette fonction ?

function ChangeImage(url,id_input_hidden) {
			document.getElementById("img").src = url;
		}

Tu veux stocker l' URL de l'image pour la passer ensuite dans ta page PHP ?

Déjà.. même remarque que précédemment : N'utilise pas comme ID .. le mot IMG (qui est usilité en html comme balise..)

Et donc.. tu dois avoir un input hidden pour y mettre le chemin de l'image non?
Un truc du genre :

<input type="hidden" id="id_image_1"  name="image_1"  value="" >
<input type="hidden" id="id_image_2"  name="image_2"  value="" >
<input type="hidden" id="id_image_3"  name="image_3"  value="" >

et donc ton code devra donner :

 <img src="images/01.jpg" height="110" onClick="ChangeImage(this.src,'image_1');">  
 <img src="images/02.jpg" height="110" onClick="ChangeImage(this.src,'image_2');">  
 <img src="images/03.jpg" height="110" onClick="ChangeImage(this.src,'image_3');">

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

bernard_26000 Messages postés 6 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 24 décembre 2014
24 déc. 2014 à 15:48

C'était en fait plus simple que ce que je voulais faire à la base....
pour ma fonction remplirInput j'ai

function remplirInput2() {
	document.getElementById('monImage').value = document.getElementById("img").src;
}

que j'appelle dans un onClick

        <input type="hidden" name="monImage"  id="monImage"  value="" >
        <input type="submit" id="" value="Envoyer" onClick="remplirInput2()">

et ca fonctionne à merveille

Joyeux Noel à tous

Discussions similaires

document.getElementById('body').style.overflow='hidden'

afficher du texte arabe dans un textarea ou un input

Erreur 91 "Variable objet ou bloc with non définie" ???????

Créer un input type Button avec une onClick !

erreur 91 : variable non défini

Votre réponse

Discussions similaires