Calcul automatique champs input type number

[Résolu/Fermé]
Signaler
Messages postés
51
Date d'inscription
lundi 23 juillet 2012
Statut
Membre
Dernière intervention
20 janvier 2019
-
Messages postés
51
Date d'inscription
lundi 23 juillet 2012
Statut
Membre
Dernière intervention
20 janvier 2019
-
Bonjour à tous,

Je souhaiterai avoir votre aide pour faire un calcul automatique en récupérant un chiffre qui est dans une variable PHP et un autre chiffre qui ce situe dans un input de type number (Que l'on peut incrémenté grâce au bouton + ou -)

Ma variable PHP : $nourriture contient 50
Mon input contient 0

Quand je fais passé mon input à 1, je voudrais avoir le calcul suivant 50*1 et que je puisse ensuite afficher le résultat sans avoir a recharger la page.

Voici mon code de test :
<html>
	<head>
		<script type="text/javascript">
			function calcul(){
                var quantite = Number(document.getElementById("nb_unitee").value);
 
                var ressource = Number(document.getElementById("nourriture").value);
 
                var total_ressource = Number(quantite * ressource);
                document.getElementById("total_ressource").value = total_ressource;
            }
 
		</script>
	</head>
	<body>
	<?php $nourriture = 50; ?>
		<form name="fact">
 
			<label>Nombre d'unitée :</label><input name="nb_unitee" id="nb_unitee" type="number" min="0" max="200" step="1" onkeypress="return false;" onblur="calcul()" ><!-- <input type="text" SIZE="1" name="nb_unitee" id="nb_unitee" onblur="calcul()" > -->
			<br />
			<input type="hidden" SIZE="1" name="nourriture" id="nourriture" value="50" onblur="calcul()" > <!-- Parce que je ne sais pas envoyer une varriable dans une fonction javascript... -->
			<br />
			<label>Total Ressources :</label><input type="text" SIZE="33" STYLE="text-decoration:none;;color: #FF0000;" name="total_ressource" id="total_ressource"><br/><br/>		
			<br/>
			<br/>	
			<label><input type="submit" value="Enregistrer" name="recfacture"></label><br><br>
		</form>
	</body>
</html>


Merci beaucoup pour votre aide !

1 réponse

Messages postés
2441
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
30 juillet 2021
454
Salut,

PHP est exécuté sur le serveur contrairement à javascript qui est exécuté sur le navigateur, le javascript ne pourras donc pas utiliser directement une variable PHP.

Par contre, puisque PHP permet de générer du code html, la solution la plus simple à partir de ton code semble être d'afficher la valeur de la variable PHP dans l'attribut value de l'input hidden :
<input type="hidden" name="nourriture" id="nourriture" value="<?php echo $nourriture; ?>">


Au passage l'attribut onblur sur un input de type hidden est inutile.

Bonne journée,
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
51
Date d'inscription
lundi 23 juillet 2012
Statut
Membre
Dernière intervention
20 janvier 2019
3
Je te remercie ! Je récupère bien ma valeur !

En revanche, quand je clique sur le plus et le moins, cela ne me change pas mon "total".

Je suis obliger de cliquer dans le champs et d'en ressortir pour qu'il change.

N'y a t'il pas un autre moyen ?
Messages postés
2441
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
30 juillet 2021
454
Utilise plutôt l'événement javascript onchange à la place de onblur dans ce cas.
Messages postés
51
Date d'inscription
lundi 23 juillet 2012
Statut
Membre
Dernière intervention
20 janvier 2019
3
Yes !! Ça fonctionne !! Je te remercie !!

Peux-tu me dire la différence entre un "onchange" et un "onclick" ?

j'ai l'impression qu'avec un "onclick" cela fonctionne aussi ! xD
Messages postés
2441
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
30 juillet 2021
454
Comme leurs noms l'indique, onclick permet de détecter le click sur l'élément tandis que onchange permet de détecter le changement de valeur de l'élément.

L'événement onchange est mieux adapté ici car on peut également changer la valeur de l'input uniquement avec le clavier par exemple, dans ce cas l'événement onclick ne serait pas déclenché et le calcul ne serait donc pas fait.

Avec l'événement onclick, le calcul sera fait dès qu'on cliquera sur l'élément même si la valeur ne change pas, ce qui est inutile ici.
Messages postés
51
Date d'inscription
lundi 23 juillet 2012
Statut
Membre
Dernière intervention
20 janvier 2019
3
D'accord ! Je te remercie de l'info !