Probleme input hidden et getElementById().value

[riserinard]

Bonjour à tous,

J'ai un ptit probleme qui me rend complément ouf

explication : je veux récuperer la position du scroll de l'utilisateur, la mettre dans un champs input hidden d'un formulaire pour récupérer la variable post dans mon fichier de gestion de formulaires et pouvoir ainsi renvoyer l'utilisateur à la position où il se trouvait avant de soumettre le formulaire.

Voilà comment je my prends (le code est simplifié) :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*fichier contenant le form*/
<script type="text/javascript">
	function meuh(qdqdqsdq)
	{
		alert(document.getElementById('positionScroll').value);//=>affiche 333(valeur par defaut)
		var posScroll = document.documentElement.scrollTop;
		document.getElementById('positionScroll').value=posScroll;
		alert(document.getElementById('positionScroll').value);//=>affiche la position du scroll courante (en gros ca marche bien)
		qdqdqsdq.form.submit();
	}
</script>
 
<form method="post" action="index.php?...blablabla" name="formCoordonneesModifier">
 
	<p>
		<input type="hidden" name="positionScroll" id="positionScroll" value="333" />
	</p>
	<div class="formBoutonModifier">
		<input class="bouton" type="button" onclick="meuh(this);return false;" value="Modifier" />
	</div>
</form>

Code :

1
2
3
4
5
6
7
8
9
10
/*fichier de recuperation des variables POST*/
<?php
	//position du scroll
	if(!empty($_POST['positionScroll'])){$positionScroll=htmlspecialchars($_POST['positionScroll']);}else{$positionScroll=0;}
 
	echo $positionScroll;//=> affiche 333 (la valeur par defaut dans le input hidden...)
 
	//placement de la fenetre en fonction du scroll précédent de l'utilisateur(ca marche c'est bon)
	?><script type="text/javascript">$(document).ready(function (){window.scrollTo(0,<?php echo $positionScroll;?>);});</script><?php
?>

Bref on dirait que le formulaire est soumis avant que la modif du input hidden soit effective, meme avec un return:false sur le onclick...

Merci d'avance pour votre aide

[Benjamin Delespierre]

Il faut enlever les inputs de type submit de ton formulaire et mettre un boutton type button avec en onclick ton traitement sur l'input hidden et ensuite la soumission du formulaire.

[riserinard]

Envoyé par Benjamin Delespierre

Il faut enlever les inputs de type submit de ton formulaire et mettre un boutton type button avec en onclick ton traitement sur l'input hidden et ensuite la soumission du formulaire.

Merci pour cette réponse très rapide mais il semble que c'est déjà ce que j'ai fais nan ?

[Benjamin Delespierre]

Je viens de faire tourner ton bout de code et la valeur de positionScroll à bien été changée à 0.

Code :

1
2
3
4
5
 
Paramètresapplication/x-www-form-urlencoded
positionScroll	0
Source
Content-Type: application/x-www-form-urlencoded Content-Length: 16 positionScroll=0

Je te recommande l'usage de Web Developper Toolbar et de FireBug pour Firefox afin d'identifier les comportements de tes pages.

Par ailleurs

explication : je veux récuperer la position du scroll de l'utilisateur, la mettre dans un champs input hidden d'un formulaire pour récupérer la variable post dans mon fichier de gestion de formulaires et pouvoir ainsi renvoyer l'utilisateur à la position où il se trouvait avant de soumettre le formulaire.

Pourquoi ne pas utiliser les ancres ?

[riserinard]

Envoyé par Benjamin Delespierre

Je viens de faire tourner ton bout de code et la valeur de positionScroll à bien été changée à 0.

Oui ca marche sans soucis, le probleme est que cette modif n'est pas retenue lors de l'envoi du formulaire.

Envoyé par Benjamin Delespierre

Pourquoi ne pas utiliser les ancres ?

J'y ai pensé mais je veux que le scroll revienne au pixel près lors du rechargement de la page.

J'espere avoir été plus clair, et merci pour les réponses

[Benjamin Delespierre]

C'est ta vérification qui est en cause:

Code :

1
2
 
if(!empty($_POST['positionScroll']))

Alors que dans l'exemple que j'ai fait tourner, $_POST['positionScroll'] vaut 0 et est donc considéré comme vide.
Il faut utiliser la clause isset à la place:

Code :

1
2
 
if (isset($_POST['positionScroll']) && $_POST['positionScroll'] !== "")

-- Edit

Au passage puisque tu veux un repositionnement au pixel près et quite à utiliser JavaScript, pourquoi ne pas soumettre le formulaire via Ajax ? Ainsi l'utilisateur ne change pas de page et son scroll reste inchangé.

[riserinard]

Envoyé par Benjamin Delespierre

C'est ta vérification qui est en cause:

Code :

Alors que dans l'exemple que j'ai fait tourner, $_POST['positionScroll'] vaut 0 et est donc considéré comme vide.
Il faut utiliser la clause isset à la place:

Code :

j'ai fais un echo $_POST['positionScroll']; pour verifier, il m'affiche 333 quelle que soit la position verticale de la page quand je clique sur mon bouton. Je ne l'ai pas mentionné, mais mon formulaire s'ouvre dans une fenetre interne de type lightbox quand je clique sur un bouton (par ex "modifier")

Envoyé par Benjamin Delespierre

Au passage puisque tu veux un repositionnement au pixel près et quite à utiliser JavaScript, pourquoi ne pas soumettre le formulaire via Ajax ? Ainsi l'utilisateur ne change pas de page et son scroll reste inchangé.

Je ne doute pas que ce soit la meilleure solution, mais mon appli est deja codée (~5000 lignes) et en plus j'y connais rien (ou presque) en AJAX , ce que je veux ajouter ici est une fonctionnalité purement pratique pour l'utilisateur, il n'a pas besoin de rescroller pour revenir où il était.

Bref je suis cuit c'est ca ? Merci pour la réponse

[Benjamin Delespierre]

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
 
<?php
 
var_dump($_REQUEST['positionScroll']);
 
?>
<script type="text/javascript">
	function meuh(qdqdqsdq)
	{
		alert(document.getElementById('positionScroll').value);//=>affiche 333(valeur par defaut)
		var posScroll = document.documentElement.scrollTop;
		document.getElementById('positionScroll').value=posScroll;
		alert(document.getElementById('positionScroll').value);//=>affiche la position du scroll courante (en gros ca marche bien)
		qdqdqsdq.form.submit();
	}
</script>
 
<form method="post" name="formCoordonneesModifier">								
	<p>
		<input type="hidden" name="positionScroll" id="positionScroll" value="333" />
	</p>
	<div class="formBoutonModifier">
		<input class="bouton" type="button" onclick="meuh(this);return false;" value="Modifier" />
	</div>
</form>

Ce bout de code prouve que le fonctionnement est correct sur Firefox. Je pense que ton JS ne doit pas fonctionner correctement sur IE. Je n'ai pas assez de compétences en JS pour l'affirmer mais tu devrais regarder de ce coté là.

[riserinard]

Mais je suis sous firefox

Bref comme me dit un pote, je vais passer cette variable en cookie, tanpis

edit1 : j'ai jamais dit qu'il y avait une erreur dans le code, ce code marche même si c'est pas jolie (de toute facon je modifierai :p). C'est le fonctionnement qui est bizarre, pourquoi se borne t il à envoyer la valeur de base (333) du input:hidden ?

edit2 : probleme résolu en utilisant les cookies, dommage mais pas plus mal bien que ca ne fait que bypasser le probleme de départ, je ne marque donc pas ce sujet comme résolu.

Merci pour ton aide Benjamin

[Clad3815]

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
 
<?php
 
var_dump($_REQUEST['positionScroll']);
 
?>
<script type="text/javascript">
	function meuh(qdqdqsdq)
	{
		alert(document.getElementById('positionScroll').value);//=>affiche 333(valeur par defaut)
		var posScroll = document.documentElement.scrollTop;
		document.getElementById('positionScroll').value=posScroll;
		alert(document.getElementById('positionScroll').value);//=>affiche la position du scroll courante (en gros ca marche bien)
		qdqdqsdq.form.submit();
	}
</script>
 
<form method="post" name="formCoordonneesModifier">								
	<p>
		<input type="hidden" name="positionScroll" id="positionScroll" value="333" />
	</p>
	<div class="formBoutonModifier">
		<input class="bouton" type="button" onclick="meuh(this);return false;" value="Modifier" />
	</div>
</form>

Je vais peut être dire n'importe quoi, mais ça me semble logique que ta page affiche tout le temps 333 puisque tu met une value à ton hidden. La c'est ton js qui gère la value donc tu devrais en mettre une vide

Code :

<input type="hidden" name="positionScroll" id="positionScroll" value="" />

[riserinard]

Envoyé par Clad3815

Je vais peut être dire n'importe quoi, mais ça me semble logique que ta page affiche tout le temps 333 puisque tu met une value à ton hidden. La c'est ton js qui gère la value donc tu devrais en mettre une vide

C'est ce que j'avais fait au départ, j'ai mis 333 pour avoir une valeur de test. Dans les 2 cas, le comportement est le même.