[JAVASCRIPT] - Bouton de modif de valeur

Fermé
Lily - 10 juin 2009 à 16:40
 Lily - 11 juin 2009 à 17:25
Bonjour,

Pour la réalisation de site de E-commerce dans le cadre de mes études, je souhaiterai intégrer deux boutons en javascript qui permettent de modifier une valeur, qui correspond à la quantité souhaitée du produit sélectionné.

N'étant pas très adepte du Javascript, je ne sais que comment présenter le code (dans le header) et l'appeller via un bouton, mais comment est-ce que je peux modifier cette valeur et l'afficher?

Affichage en Html:
[Bouton -] Valeur [Bouton +]

Merci beaucoup!
Lily
A voir également:

17 réponses

Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
10 juin 2009 à 18:23
<html>
<head>
<title>test js</title>
	<script type="text/javascript">
	<!--

		function plus(id) {
			o = document.getElementById(id);
			o.innerHTML = parseInt(o.innerHTML) + 1;
		
		}
		
		function moins(id) {
			o = document.getElementById(id);
			o.innerHTML = parseInt(o.innerHTML)-1;
		
		}

	//-->
	</script>
</head>
<body>
<p id="p">22</p>
<input type="button" value="+" onclick="plus('p');" />
<input type="button" value="-" onclick="moins('p');" />
</body>
</html>


essaye ca mais tu ne pourras pas l'enregistré dans une base de donnée après

si tu veux pourvoir le remettre au php après il faut que tu fasse via un formulaire

je te post les fonctions juste après je modifie le code pour te montrer
1
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
10 juin 2009 à 18:29
pour modifier le champ du formulaire il faut faire :

<html>
<head>
<title>test js</title>
	<script type="text/javascript">
	<!--

		function plus(id) {
			o = document.getElementById(id);
			o.value = parseInt(o.value) + 1;
		
		}
		
		function moins(id) {
			o = document.getElementById(id);
			o.value = parseInt(o.value)-1;
		
		}

	//-->
	</script>
</head>
<body>
<input type="text" name="tonNombre" id="p" value="22"/>
<input type="button" value="+" onclick="plus('p');" />
<input type="button" value="-" onclick="moins('p');" />
</body>
</html>


après je pense que tu pourras l'adapter à peut près à tout

comprends tu le fait que le php soit un langage serveur et le javascript un langage client qu'il ne puissent interagir ensemble? ça ne marche que dans un sens, écrire du javascript en php suffis de faire echo...

pour communiquer dans l'autre sens c'est de l'ajax... ou sinon tu passe par un formulaire
1
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
10 juin 2009 à 17:11
bonjour,

il serait bien que tu mettes le code que tu as déjà fait...
0
Dans le code PHP:


$qtt = 1;

echo '<input type="button" value="-" onClick="qttMoins('.$qtt.')">';
echo $qtt;
echo '<input type="button" value="+" onClick="qttPlus('.$qtt.')">';


Dans le header:

<script language="JavaScript">
function qttMoins(qtt)
{
qtt = qtt-1;
return qtt;
}

function qttPlus(qtt)
{
qtt = qtt+1;
return qtt;
}
</script>

C'est plus que léger mais je suis assez perdue :s
Merci!
0
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
10 juin 2009 à 18:08
as tu des bases en javascript?
0
Oui j'ai des bases en Javascript, mais tout ce que j'ai fait auparavant se terminait par un alert, ce qui ne me sers à rien dans ce cas :s
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Pour faire plus clair, je cherche comment influer sur une variable contenue dans le code PHP via une fonction javascript.

Je ne peux pas utiliser "alert" ou encore "document.write"... et je cherche une alternative! :s

Merci!
0
Je regarde ce code tout de suite,

Merci!
0
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
10 juin 2009 à 18:31
j'oublié si tu as besoin d'explication demande j'ai pas pensé a commenter le code
0
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
10 juin 2009 à 18:36
y'a une erreur GRAVE dans mes codes

remplace les lignes :

o = document.getElementById(id);


par ça :

var o = document.getElementById(id);
0
Bonsoir,

Alors voila le code JavaScript une fois les modifications effectuées:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bla bla bla bla bla.....</title>
<link href="page.css" rel="stylesheet" type="text/css"/>

<script language="JavaScript">
function qttMoins(id)
{
var o = document.getElementById(id);
o.value = parseInt(o.value) - 1;
}

function qttPlus(id)
{
var o = document.getElementById(id);
o.value = parseInt(o.value) + 1;
}
</script>
</head>

<body>
...



Mais cela ne me modifie pas la valeur $qtt dans mon code php :s
Je dois bien procéder ainsi ou mettre une div quelquepart?!

<td id="libtd" height:"26px" width:"150px">
<center>
<input type="submit" value="Ajouter au Panier" name="'.$prod->getCodeProduit().'">
</center>
</td>
<td id="pdttd">';

$qtt = 1;
echo '<input type="button" value="-" onClick="qttMoins('.$qtt.')">';
echo $qtt;
echo '<input type="button" value="+" onClick="qttPlus('.$qtt.')">';

echo '</td>';

Merci, désolé j'ai du mal avec ce langage :s
0
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
10 juin 2009 à 19:07
ca ne vas pas du tout ton code
0
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
10 juin 2009 à 19:23
tu veux en faire quoi de ta variable $qtt ?
0
La variable $qtt doit contenir un entier, qui correspond au nombre d'articles que le client désire ajouter à son panier.

Le bouton qui appelle la fonction JavaScript qttMoins devrait pouvoir réduire ce nombre de 1 et affecter ce nouveau résultat à $qtt. (Affichage de "4" à "3" après avoir cliqué sur ce bouton)

Même chose pour le second bouton mais avec ajout d'une unité.

Voilà!
Merci!
0
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
10 juin 2009 à 19:47
enfaite ton problème c'est que tu mélange client et serveur

je ne pense pas qu'un code complet te ferait avancer c'est pourquoi je ne te le donnerai pas comme ça mais je vais t'expliquer.

le php ca se passe sur le serveur, tu écris le code source avec.
le javascript lui fait partit du code source, pour le php il n'est que tu texte comme un autre. le javascript c'est un language client qui manipule le html et le css en gros.

donc pour faire ce que tu veux faire il faut que tu écrives ta variable $qtt dans le code source avec un echo

pour la modifier avec le javascript il faut que tu encadre ta valeur par une balise et lui attribuer un id grace au quel tu pourra accéder a cete valeur par le javascript.

(analyse le code que je t'ai fournis)

ensuite si tu veux renvoyer cette variable au php tu as 2 méthode. la method ajax (que je te déconseil pour l'instant ca risque de t'embrouiller encore plus)

et envoyer la valeur par formulaire

en gros ca doit donner :

<form action="" method="post">
<input type="text" id="trucmachinchose" value="<?php echo $qtt ?>" />
<input type="button" value="+" onclick="plus(trucmachinchose);" />
<input type="button" value="-" onclick="moins(trucmachinchose);" />
<input type="submit" />
</form>

avec les fonction que je t'ai donné toute a l'heure

tu récupères ta valeur sur la page de reception en php cette fois !

j'espère que j'ai était clair... j'en ai pas l'impression mais bon
0
Merci beaucoup pour tes explications!

La partie de code que j'ai écris tout à l'heure faisait partie d'un formulaire, ça devrais aller alors :)
Pour l'ajax j'en ais entendu parler (mélange de trois langages il me semble) mais je n'ai aucune base donc trop long pour ce que je veux faire :s

J'analyse ce que tu as écris et je corrige mon code! :)

Je te tiens au courant, merci beaucoup!
0
Re-bonsoir,

Je suis complètement perdue...

Script:

<script language="JavaScript">
function qttMoins(id)
{
var o = document.getElementById(id);
o.value = parseInt(o.value) - 1;
}

function qttPlus(id)
{
var o = document.getElementById(id);
o.value = parseInt(o.value) + 1;
}
</script>


PHP:

echo '</td>';
echo '<td id="pdttd">';

$qtt = 1;

echo '<input type="button" value="-" onClick="qttMoins(qtt)">';
echo '<input type="text" id="qtt" value="'.$qtt.'" /> ';
echo '<input type="button" value="+" onClick="qttPlus(qtt)">';

echo '</td>';


Pour le moment la valeur qui correspond à $qtt dans le type text ne se modifie pas: aucune erreur sous firefox, mais ie7 signale une erreur: l'objet utilisé par le script correspondrait à une valeur nulle: "null".

:(
0
Pour ce dernier problème de 'null', c'est un oubli de " ' "
onClick="qttMoins(qtt)"
devient
onClick="qttMoins('qtt')"

Pour en revenir à ton problème initial, il semble effectivement qu'il y ait quelques lacunes sur le fonctionnement client/serveur. Ce n'est pas gênant, il suffit d'apprendre :)

https://fr.wikipedia.org/wiki/Langage_serveur
0
Bonjour,

Merci beaucoup à vous deux, ça marche nickel avec ces cotes!
Je n'ai pas eu le temps de répondre ce matin, désolé!

Encore merci!
Lily
0