Calcul automatique champs input type number

Résolu/Fermé

Odd89 Messages postés 51 Date d'inscription lundi 23 juillet 2012 Statut Membre Dernière intervention 20 janvier 2019 - 31 août 2016 à 16:14
Odd89 Messages postés 51 Date d'inscription lundi 23 juillet 2012 Statut Membre Dernière intervention 20 janvier 2019 - 1 sept. 2016 à 13:35

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 !

A voir également:

Calcul automatique champs input type number
Calcul moyenne excel - Guide
Recherche automatique des chaînes ne fonctionne pas - Guide
Message automatique thunderbird - Guide
Logiciel de sauvegarde automatique gratuit - Guide
Gmail libellé automatique - Guide

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
31 août 2016 à 17:27

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,

Odd89 Messages postés 51 Date d'inscription lundi 23 juillet 2012 Statut Membre Dernière intervention 20 janvier 2019 3
1 sept. 2016 à 08:31

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 ?

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
1 sept. 2016 à 09:03

Utilise plutôt l'événement javascript onchange à la place de onblur dans ce cas.

Odd89 Messages postés 51 Date d'inscription lundi 23 juillet 2012 Statut Membre Dernière intervention 20 janvier 2019 3
1 sept. 2016 à 11:32

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

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
1 sept. 2016 à 11:51

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.

Odd89 Messages postés 51 Date d'inscription lundi 23 juillet 2012 Statut Membre Dernière intervention 20 janvier 2019 3
1 sept. 2016 à 13:35

D'accord ! Je te remercie de l'info !

Discussions similaires

input signal out of range

Appel depuis le numéro 789

Erreur d'exécution 13 Incompatibilité de type

Faiblesse des pokémon spectre