Tranfert url par input hidden

bernard26
Javascript

Bonjour à tous
Très rapidement je veux proposer aux visiteurs de choisir une image et que je puisse la faire passer sur une page "traitement" pour affichage, insertion dans sune BDD etc... et ce sous forme de variable PHP
J'ai un code HTML qui affiche en direct les differentes images :

<div id="" style="position:relative; float:left" >
            <img src="images/01.jpg" width="400" id="img">
        </div>
  <div>
      <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);">
</div>

La fonction qui permet l'affichage sur la même page :

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

que je voudrai transferer avec un form du genre :

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

Ce que je n'arrive pas à faire c'est récuperer la valeur de l'url de l'image choisie et la mettre dans mon input.
Je dois faire une fonction qui fera ça mais ça fait quelques jours que je suis dessus et.... rien, pour l'instant j'en suis là 

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

Je sais que la 1ere ligne me permet de recupérer le chemin de l'image. De plus je ne sais pas si onChange() sur le submit serait une bonne idée dans la mesure ou plus tard il y aura d'autres variables à faire passer comme du texte par exemple, je pense qu'il soit necessaire que ca passe dans le input hidden.
Je ne sais pas si ca vous parle mais en tout cas merci d'avoir passer un moment sur mon topic.

4 réponses

antho07

Bonsoir

Peux-tu préciser "sous forme de variable PHP"?
Le traitement est-il en ajax? (Tu parles de traitement au moment du submit)
"Choisir une image"? Ou ? Comment?

Je veux bien t'apporter les éléments techniques dont tu as besoin mais je n'ai pas bien compris la fonctionnalité que tu souhaites mettre en place

bernard26
Auteur

Alors rapidement encore, je suis sérigraphiste et je voudrai proposer aux visiteurs la possibilité de personnaliser un objet, un tee shirt.
Donc je choisi l'objet (c'est celui qui nous interesse) je le décore, j'ecris un texte, je valide et hop je récupère le tout sur une autre page qui me servira à afficher "la création", à l'insérer dans une base données et que je récupererai sous forme de "echo $machin;"
Sinon il s'agit uniquement de JavaScript et donc l'idée est de récupérer les variables dans des input hidden et de valider le fom.
Bien que src et url soient étroitement liées je dois bien avouer que je n'ai aucune idée de comment construire la fonction qui servira à remplir l'input
Merci

bernard26
Auteur

Bonjour,
J'ai essayé d'avancer un peu donc j'ai fait une fonction pour determiner la valeur du src

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

et pour remplir l'input de la valeur du src 

function setsrcContent(valeur) {   
        var img = document.getElementById("img").src;
            if (img) {
            img.srcContent = valeur;
            remplirInput2(monImage);
        }

et sur mon input 

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

Mais ca ne fonctionne pas

bernard26
Auteur

ca ne marche pas mieux avec 

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