document.getElementById avec href

Version imprimable

Bonjour,

voila au clic d'une liste déroulante je voulais faire un visualisation dans un div de l image choisi j'ai donc fait ceci:
Code:

1 2 3 4 5 6 7 8 function ChangerImage(t) { var mSelect = t.options[t.selectedIndex].value; document.getElementById('Image').src = mSelect; var mSelect2 = t.options[t.selectedIndex].text; document.getElementById('id_image').href.value="GestGalerie.php"= mSelect2; }
ca fonctionne nikel, mais je voulais aussi qu'il envoi cette valeur par GET, j'ai fait ca mais ca ne m'envoir rien, je ne voi pas comment fonctionne le href avec javascript.

merci.

Bonjour,
Citation:
Envoyé par kate59
Code:

1 2 3 4 5 6 7 8 function ChangerImage(t) { var mSelect = t.options[t.selectedIndex].value; document.getElementById('Image').src = mSelect; var mSelect2 = t.options[t.selectedIndex].text; document.getElementById('id_image').href.value="GestGalerie.php"= mSelect2; }
C'est bon ça?

Citation:

Envoyé par kate59

ca fonctionne nikel, mais je voulais aussi qu'il envoi cette valeur par GET, j'ai fait ca mais ca ne m'envoir rien, je ne voi pas comment fonctionne le href avec javascript.

Regarde du coté AJAX.

A+.

23/01/2013, 14h29
kate59

je voulais le faire en GET mais je ne peux du faite que c est un formulaire en post , j ai fais des recherche il y a bc de forum mais pas de solution tres optimiser.

vous auriez une solution plus simple en ajax, en reprenant je doit recuperer le select selectionner et le mettre dans une variable php donc je dois jouer coté serveur et client mais impossible de trouver qq chose de moins complex.

merci.
23/01/2013, 15h26
andry.aime

Dans ce cas, tu le concatènes sur l'attribut action du formulaire.

A+.

J'ai créer ceci la fonction fonctionne mais il y a un problème, il affiche bien l image mais après il envoie le ref avec l id mais la photo n apparait plus.
Code:

1 2 3 4 5 6 7 function ChangerImage(t,id) { var mSelect = t.options[t.selectedIndex].value; document.getElementById('Image').src = mSelect; var mSelect2 = t.options[t.selectedIndex].text; top.document.location = "?ref="+mSelect2+"&id="+id; }
Comment faire?

Merci.

23/01/2013, 17h03
andry.aime

Que veux tu faire exactement ?

Tu veux que quand tu sélectionnes un élément, ça changes l'image et garder une valeur que tu veux passer en URL quand tu submites le formulaire?
Ou bien tu veux tout de suite recharger la page en gardant le photo?

A+.
23/01/2013, 17h09
kate59
en faites je suis sur un formulaire dessus j'ai une liste deroulante et une zone de texte.Je veux que quand on sélectionne dans la liste déroulante directement dans un div l'image s'affiche grace au src :
Code:

1 2 var mSelect = t.options[t.selectedIndex].value; document.getElementById('Image').src = mSelect;
et en meme temps dans un div le texte de cette image s'affiche:
Code:

1 2 var mSelect2 = t.options[t.selectedIndex].text; top.document.location = "?ref="+mSelect2+"&id="+id;
avec le meme clic et en meme temps sans recharger la page.

merci.
23/01/2013, 17h18
Bovino

Autant je comprends la partie modification de l'image, autant le reste, je vois pas le rapport entre

Citation:

en meme temps dans un div le texte de cette image s'affiche

et une redirection

Code:

top.document.location = "?ref="+mSelect2+"&id="+id;

:koi:

Ce code me permet d afficher mon image dans un div en recuperant une donnée que j'ai besoin:
Code:

1 2 var mSelect = t.options[t.selectedIndex].value; document.getElementById('Image').src = mSelect;
code php:
Code:

1 2 $body.=' <img id="Image" src="'.RACINE_BACKEND.'images/not-image.png" /></div>';
Ce code me permet d afficher mon texte dans un div en recuperant une donnée que j'ai besoin qui est la ref de l'image ainsi je peut utiliser ma fonction getUniqueByTitre:
Code:

1 2 var mSelect2 = t.options[t.selectedIndex].text; top.document.location = "?ref="+mSelect2+"&id="+id;
code php:
Code:

1 2 3 4 5 6 7 $ItemIllustration = $managerIllustration->getUniqueByTitre($_GET['ref']); $body.='<fieldset> <p> <label for="form_largeur">Titre : </label> <input type="text" id="titre" name="titre" value="'.$ItemIllustration->getTitre().'"/> </p>
merci

23/01/2013, 17h55
andry.aime
Citation:
Envoyé par kate59

et en meme temps dans un div le texte de cette image s'affiche:

Code:

1 2 var mSelect2 = t.options[t.selectedIndex].text; top.document.location = "?ref="+mSelect2+"&id="+id;

avec le meme clic et en meme temps sans recharger la page.
Ben si c'est le texte de l'option du select, un innerHTML d'un span (ou balise p, div,..) dans le div contenant l'image suffit.
Code:

1 2 var mSelect2 = t.options[t.selectedIndex].text; document.getElementById("idDuSpan").innerHTML = mSelect2;
Mais si le texte est à chercher au serveur, tu dois utiliser AJAX pour le récupérer ensuite tu passes toujours par l'innerHTML.

A+.
23/01/2013, 18h05
kate59

bonjour,

c est un texte a récupérer sur une base mysql grâce a la référence que je renvoie donc dans mon cas precis comment me retourner la ref sans via URL comme ce que j'ai fait si c est ca qui pose probleme.

merci.
23/01/2013, 18h11
andry.aime
Citation:
Envoyé par andry.aime

Ben si c'est le texte de l'option du select, un innerHTML d'un span (ou balise p, div,..) dans le div contenant l'image suffit.

Code:

1 2 var mSelect2 = t.options[t.selectedIndex].text; document.getElementById("idDuSpan").innerHTML = mSelect2;

Mais si le texte est à chercher au serveur, tu dois utiliser AJAX pour le récupérer ensuite tu passes toujours par l'innerHTML.

A+.
23/01/2013, 18h16
kate59

je ne connais pas trop ajax je ne voi pas trop ce que doit regarder sur google?MERCI.
23/01/2013, 18h19
andry.aime

Regarde ce tutoriel.

A+.
23/01/2013, 18h24
kate59

n'y aurai t'il pas un moyen de mettre deux fonction onchange sur le meme select?
ou deux appel au deux sans stopper l un ou l'autre? MERCI
car j ai deja des fonction pour ma bdd.
ou de renvoyer la ref sans passer par URL
23/01/2013, 18h32
andry.aime

Tu peux mettre deux fonctions dans le onchange, tu peux aussi mettre les deux fonctionnalités dans une fonction. A toi de voir ce qui est mieux, pense à la ré-utilisabilité.

A+.
23/01/2013, 18h57
kate59

bonjour,

j'ai fait ceci:

Code:

<select onChange=\'ChangerImage(illustration)\' onChange=\'ChangerTexte('.$_GET['id'].')\' id="illustration" name="illustration" size="5" style="width:150px;">';

il passe par le premier onchange mais pas le deuxieme?

MERCI.

j'ai fait ceci mais c est pareil l'image se fait ensuite les texte cetet fois ci et puis quand c est le texte , cest l image qui disparait.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function ChangerImage(t) {
   var mSelect = t.options[t.selectedIndex].value;
document.getElementById('Image').src = mSelect;
 
   /*var mSelect2 = t.options[t.selectedIndex].text;
document.getElementById('id_image').value = mSelect2;*/
}
 
function ChangerTexte(t,id) {
 
var mSelect2 = t.options[t.selectedIndex].text;
top.document.location = "?ref="+mSelect2+"&id="+id; 
}

:cry:

deux fonctions avec onchange

bonsoir,
voila j'ai créer deux fonctions sr une select avec onchange je fais appel, mais il passe a la premierer puis quand c est la deuxieme il recharge la page et la deuxieme ne fonctionne plus.
Que faire?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script> function ChangerImage(t) { var mSelect = t.options[t.selectedIndex].value; document.getElementById('Image').src = mSelect; /*var mSelect2 = t.options[t.selectedIndex].text; document.getElementById('id_image').value = mSelect2;*/ } function ChangerTexte(t,id) { var mSelect2 = t.options[t.selectedIndex].text; top.document.location = "?ref="+mSelect2+"&id="+id; } </script>
appel:

Code:

<select onChange=\'ChangerTexte(illustration,'.$_GET['id'].');ChangerImage(illustration)\' id="illustration" name="illustration">

j'ai besoin dans la seconde fonction un reference pour la récupérer dans ma page en variable Php.
merci.

23/01/2013, 21h43
NoSmoking

Bonsoir,

Code:

top.document.location = "?ref="+mSelect2+"&id="+id;

cette instruction fait que la page est rechargée avec la nouvelle URL.

Citation:

j'ai besoin dans la seconde fonction un reference pour la récupérer dans ma page en variable Php.

passes par un formulaire ou mieux via Ajax si tu ne veux pas recharger ta page pour voir l'image.
23/01/2013, 21h48
kate59

je ne connais pas trop ajax tu pourrais m aider j'ai deja essayer avec le ajax et m y perd.merci.
23/01/2013, 22h17
NoSmoking

je suis tombé sur

Citation:

Envoyé par andry.aime

Regarde ce tutoriel.

A+.

as tu donné suite?
23/01/2013, 22h46
kate59

le l'ai lu et la je comprend que la seule solution serait de remplir la zone de texte avec la bdd avec ajax mais la ca me semble tres loin car je n ai aucune connaisance et que j ai besoin de trouver une solution assez rapidement j aurai donc preference eviter le ajax.Donc la je ne sais pas trop quoi faire, avoir des bases et approfondir en ajax me mettrait au moins plusieurs semaine avant de le controler.Et je doit finir cette page cette semaine.

en peut ton pas recuperer la valeur avec un return?
var mSelect2 = t.options[t.selectedIndex].text;
return mSelect2;

Car si je comprend c est ce rechargement de page qui ne vas pas, ou ne peut on recharger la page et apres faire appel a la deux fonction onchange pour afficher l image?

MERCI
23/01/2013, 22h47
andry.aime

Citation:

Envoyé par kate59

je ne connais pas trop ajax tu pourrais m aider j'ai deja essayer avec le ajax et m y perd.merci.

Tu peux nous montrer l'essaie que tu as fait pour que l'on puisse le corriger?

Bonjour,
voici le code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<script>
function ChangerImage(t) {
   var mSelect = t.options[t.selectedIndex].value;
document.getElementById('Image').src = mSelect;
}
</script>
<script type="javascript">
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function ChangerTexte(t){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						//leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						//document.getElementById('illustration').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","GestGalerie.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('illustration');
				id = sel.options[sel.selectedIndex].text;
				xhr.send("ref="+id);
			}
		</script>

et la page d'appel:

Code:

<select onChange=\'ChangerTexte(illustration);ChangerImage(illustration)\' id="illustration" name="illustration" size="5" style="width:150px;">';

print_r post est desperement vide sur la page d appel.
Je viens a peine de commencer le AJAX soyez indulgent.
Je veux juste retourner la valeur selectionner au clic en post vers ma page.
merci.

24/01/2013, 12h02
andry.aime

Citation:

function ChangerImage(t) {
var mSelect = t.options[t.selectedIndex].value;

Citation:

onChange=\'ChangerTexte(illustration);

Ecrit comme ça, illustration est une variable javascript, mais elle est définit où?

Citation:

<script type="javascript">

Code:

<script type="text/javascript">

Pour rafraichir le texte de l'image, tu modifies seulement l'id du div ou span à rafraichir dans la partie de code que tu as commenté pour la fonction d'onreadystatechange.

Et montre nous ton code HTML généré mais pas le code php de la page qui fait l'appelle Ajax.

A+.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
	</head><body>
<script>
function ChangerImage(t) {
   var mSelect = t.options[t.selectedIndex].value;
document.getElementById('Image').src = mSelect;
}
</script>
<script type="text/javascript">
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non support� par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* M�thode qui sera appel�e sur le click du bouton
			*/
			function ChangerTexte(t){
				var xhr = getXhr();
				// On d�fini ce qu'on va faire quand on aura la r�ponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout re�u et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						//leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						//document.getElementById('illustration').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","GestGalerie.php",true);
				// ne pas oublier �a pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('illustration');
				id = sel.options[sel.selectedIndex].text;
				xhr.send("ref="+id);
			}
		</script>
...
 
	...
 
 
<form id="monForm" action="#" method="post">
<div id="sub_menu">
<a href="modifier.php?ref=">Modifier Photos Selectionner</a>
<a href="GestGalerie1.php"><img src="http://localhost/appartement/backend/images/retour.png" /></a>
</div>
<div id="new_left" style="float:left;width:45%;">
 
	 <fieldset>
 
        <legend>Donnees images</legend>
 
<div style="float:left;margin-left:50px;">
Previsualisation<br />
<img id="Image" src="http://localhost/appartement/backend/images/not-image.png" /></div>
<div style="float:right;">
Liste des images de ce Appartement <br />
 
<select onChange='ChangerTexte(illustration);ChangerImage(illustration)' id="illustration" name="illustration" size="5" style="width:150px;"><option value="http://localhost/appartement/backend/illustrations/home/2/velane _2_1_home.jpeg">velane _2_1</option><option value="http://localhost/appartement/backend/illustrations/home/2/velane _2_2_home.jpeg">velane _2_2</option><option value="http://localhost/appartement/backend/illustrations/home/2/velane _2_3_home.jpeg">velane _2_3</option><option value="http://localhost/appartement/backend/illustrations/home/2/velane _2_4_home.jpeg">velane _2_4</option><option value="http://localhost/appartement/backend/illustrations/home/2/velane _2_5_home.jpeg">velane _2_5</option>
 
</select>
...
 
	</body>
</html>

Illustration est le nom du select.

En faites je veux recuperer le text du select selctionner le renvoyer sur la page pour le mettre dans une variable php via le POST, pas dans un span ou div.
merci.

bonjour,

j'ai retravailler sur le code mais ca ne marche pas:

Code:

<select onChange=\'showUser(this.value);ChangerImage(illustration)\' id="illustration" name="illustration" size="5" style="width:150px;">';

le script:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function showUser(str)
{
if (str=="")
  {
  document.getElementById("id_image").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("id_image").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","GestGalerie.php?ref="+str,true);
xmlhttp.send();
}

une idée svp?
MERCI de votre aide.

24/01/2013, 16h43
Bovino

Citation:

Illustration est le nom du select.

:nono:
Quand tu écris

Code:

ChangerImage(illustration)

illustration est une variable et comme cette variable n'est définie nulle part, l'appel provoque une erreur.
24/01/2013, 16h57
kate59

Bonjour,
changeImage fonctionne, c'est la fonction en ajax qui ne fonctionne pas et je ne comprend pas pourquoi?