[Résolu] Transfert de la valeur src d'une image dans un input hidden

Bonjour à tous,

Je suis en train de bosser sur un petit programme qui devrait permettre à un visiteur de selectionner une image de fond que je devrai récupérer sur une autre page sous forme de variable PHP pour affichage, insertion dans une base de données etc....
Pour modifier l'image de fond j'ai ceci

<img src="images/01.jpg" width="400" id="img">
<img src="images/01.jpg" height="110" onClick="ChangeImage(this.src);">&nbsp;&nbsp;
      <img src="images/02.jpg" height="110" onClick="ChangeImage(this.src);">&nbsp;&nbsp;
      <img src="images/03.jpg" height="110" onClick="ChangeImage(this.src);">

La fonction qui me permet de changer :

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

et pour passer sur ma page traitement :

<form name="" id="" action="traitement2.php" method="post">
  
  <input type="hidden" name="monImage"  id="monImage"  value="" >

  <input type="submit" value="envoyer">
</form>

Je suis coincé à la récupération et bien entendu à l'envoi de la variable, j'ai potassé des dizaines de forums, mais je tombe surtout sur des "onload" ou des conseils pour des sliders ou autres...
Si ca vous parle...
Merci en tout cas d'avoir passer un peu de temps sur mon topic

@ bientôt

Bonjour,

Et bien il faut juste que tu set la value de ton input avec la valeur du src si j'ai bien compris... De la même façon que tu as fait

document.getElementById("img").src = url;

tu peux le remplir avec un truc du genre

document.getElementById("monImage").value = url;

Modifié par _laurent (18 Dec 2014 - 16:29)

Bonjour et merci Laurent

Sauf si j'ai mal compris, il faut que je fasse un set sur le src...
J'ai fait ça mais je ne sais pas si je suis sur la bonne piste, petite confidence, je découvre le JavaScript

function remplirInput() {
	var monImage = document.getElementById("img").src ;
	monImage.setAttribute('src', monImage);
}

De cette manière je pense avoir donné l'ID "monImage" à la valeur de "src".

Bonsoir

Merci Papy.... (ca fait bizarre )

donc si je te suis bien je dois faire exactement

var myPic = document.getElementById("img").src;// img id de ma balise HTML
    myPic.src = monImage; // monImage id de l'input

bon si j'ai tout bon, la question que je me pose c'est qu'est ce que j'en fait, j'imagine que tout seul comme ça je dois pas aller bien loin, je pense que je doive créer une function ()

Encore merci

bernard26 a écrit :
Merci Papy.... (ca fait bizarre )

donc si je te suis bien je dois faire exactement

var myPic = document.getElementById("img").src;// img id de ma balise HTML
    myPic.src = monImage; // monImage id de l'input

bon si j'ai tout bon, la question que je me pose c'est qu'est ce que j'en fait, j'imagine que tout seul comme ça je dois pas aller bien loin, je pense que je doive créer une function ()

Encore merci

Que veux tu, papy je suis papy je reste. Je préfère assumer!
De plus mes petits enfants habitent Strasbourg, alors quel meilleur pseudo.pour Alsacreations?

Je pense que tu as compris le principe: ce qu'est un élément (qu'on va généralement chercher par son id), et le fait que src est une propriété de l'élémen imaget, que si on met le src d'une image dans le SRC d'une autre image, on affiche la première image à la place de la deuxième.

Maintenant, quand déclenche-t-on la mise à jour? En gros sur un événement (appui sur un bouton, changement de position de la souris, fin d'un timer, ...). Par exemple si c'est l'appui sur un bouton, on met dans la balise <button> une directive onclick="..."
S'il n'y a qu'une ou deux instructions, on peut les mettre entre guillemets séparées par des ;
Sinon, on crée une fonction "function bidule(){...}" qui comprend les instructions à effectuer.
Est-ce clair?

Bon courage!

oupppssss mauvaise manip...

bon suite de mon aventure
en fonction de ce que me dit Papy, j'ai crée une fonction que voilà :

 	var myPic = document.getElementById("img").src;
		function envoyerPic(src)
			{
				myPic.src = monImage;
			}

Mon code pour transfert :

<form action="traitement2.php" method="post">
<input type="submit" onclick="envoyerPic('monImage')" value="Envoyer">

</form>

et que j'aimerai récupérer comme ça :

if (isset($_POST['monImage'])){
	$champ8 = $_POST['monImage'];
}
echo $champ8;

Bon pour pas faire durer le suspens... ça ne fonctionne pas .
Je pense me planter dans le "src" et le "monImage".... mais pas sûr

Merci

Pour moi, ça devrait ressembler à ça:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test images</title>
        <script type="text/javascript">
            //<![CDATA[
                function envoyerPic(image) {
                    document.getElementById('fruit').value=image.src;
                    document.getElementById('choix').submit();
                }
            //]]>
        </script>
    </head>
    <body>
        <img src="http://us.cdn3.123rf.com/168nwm/volff/volff1205/volff120500034/13585481-fraises-avec-des-feuilles-isole-sur-un-fond-blanc.jpg" onclick="envoyerPic(this)" />
        <img src="http://us.cdn2.123rf.com/168nwm/cjung/cjung1208/cjung120800058/14930424-oranges-sur-fond-blanc.jpg" onclick="envoyerPic(this)" />
        <form id="choix" action="#" method="post">
            <input id="fruit" type="hidden" name="fruit" value=""/>
        </form>
    </body>
</html>

A savoir:
1) une fonction JS à laquelle on passe l'objet image, qui en prend le src, le met dans la valeur de l'input hidden et envoie au serveur
2) 2 (ou plus) images qui appellent cette fonction en se passant elles mêmes (this) comme paramètre
3) la balise form et son input hidden; noter qu'elle a un "id" 'fruit' pour la retrouver par document.getElementById('fruit') et un "name" 'fruit' pour qu'elle soit reconnue par le serveur sous la forme de $_POST['fruit'] Ils pourraient être différents, mais alors ne pas se tromper selon qu'on est en train d'écrire le programme JS ou le programme PHP

Je pars pour le week end, donc pas de réponse avant demain soir...
Modifié par PapyJP (20 Dec 2014 - 14:44)

Bonjour Papy....JP