Passage de variable dans un input hidden [Résolu]

bernard_26000 6 Messages postés mardi 9 décembre 2014Date d'inscription 24 décembre 2014 Dernière intervention - 16 déc. 2014 à 20:28 - Dernière réponse : bernard_26000 6 Messages postés mardi 9 décembre 2014Date d'inscription 24 décembre 2014 Dernière intervention
- 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.
Afficher la suite 

Votre réponse

6 réponses

jordane45 21128 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 23 mai 2018 Dernière intervention - 16 déc. 2014 à 21:02
0
Utile
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

Commenter la réponse de jordane45
bernard_26000 6 Messages postés mardi 9 décembre 2014Date d'inscription 24 décembre 2014 Dernière intervention - 17 déc. 2014 à 02:59
0
Utile
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 21128 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 23 mai 2018 Dernière intervention - 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>";
Commenter la réponse de bernard_26000
bernard_26000 6 Messages postés mardi 9 décembre 2014Date d'inscription 24 décembre 2014 Dernière intervention - 17 déc. 2014 à 16:21
0
Utile
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
Commenter la réponse de bernard_26000
jordane45 21128 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 23 mai 2018 Dernière intervention - 17 déc. 2014 à 16:47
0
Utile

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');">  



Commenter la réponse de jordane45
bernard_26000 6 Messages postés mardi 9 décembre 2014Date d'inscription 24 décembre 2014 Dernière intervention - 24 déc. 2014 à 15:48
0
Utile
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
Commenter la réponse de bernard_26000

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.