Modifier une variable selon un formulaire

Fermé
basilegrnd - 1 nov. 2021 à 14:44
 Artos - 7 nov. 2021 à 06:45
Salut,

Je suis en train de créér une boutique en ligne. Le fonctionnement est un peu spécial puisque sur la page produit, on interagit via un formulaire.

J'essaye donc d'afficher sur le bouton le prix du tout selon la taille et la quantité, qu'on récupèrerait puis calculerait via Javascript.

Est-ce que ça serait possible ?


Si jamais, le code :

<div class="order-form">
	<form>
	<label for="size" >Taille :</label>
	
	<div class="formfield-select--container">
		
	<select id="size">
        <option value="1">15x25</option>
        <option value="2">30x50</option>
        <option value="3">60x100</option>
        <option value="4">120x200</option>
    </select>

    <input type="number" min="1" max="10" placeholder="Quantité :"></input>
    
    <button>Acheter</button>

    </form>
</div>
A voir également:

2 réponses

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
1 nov. 2021 à 15:06
Bonjour,

C'est très certainement possible.... par contre il manque des infos...

Comment est calculé le prix et d'où proviennent les données ? ( le prix en fonction de la taille et de la quantité ) ?

NB: ta question portant sur le javascript .... je la déplace donc dans le forum... JAVASCRIPT.

0
Salut,
"Je suis en train de créér une boutique en ligne."
Comment?
" Le fonctionnement est un peu spécial puisque sur la page produit, on interagit via un formulaire. "
Qu'il y a t'il de spécial? Un formulaire(HTML) reste le meilleur moyen d'envoyer des données... qu'il soit affiché ou pas c'est la plupart du temps ce moyen là qui est utilisé sur le web.

"J'essaye donc d'afficher sur le bouton le prix du tout selon la taille et la quantité, qu'on récupèrerait puis calculerait via Javascript.

Est-ce que ça serait possible ? "

Oui mais pas souhaitable. JavaScript s’exécutant sur le navigateur de l'utilisateur il est très facile d'y ajouter le sien propre et là chacun peut mettre le prix qu'il souhaite pour l’article et le nombre qu'il souhaite, donc ce n'est clairement pas la façon de faire.

Surtout que dans le HTML que vous présentez il y a des données en dur donc site statique si vous voulez une boutique en ligne il faut des bases de données qui seront accessibles par un serveur de programmation(comme PHP), ce sont les sites dynamiques.

En plus de pouvoir changer ce qui est affiché dans votre formulaire(donc pouvoir ajouter et modifier articles comme tarifs au fil du temps sans avoir à écrire une page différente) vous pouvez faire les calculs sur la base de données(utiles aussi si on veut gérer des quantités donc) ou dans le programme du serveur ou les 2.
Le fonctionnement que vous décrivez est une application avancée de ces principes nommée AJAX et comme son nom l'indique(un acronyme) fait appel de façon asynchrone à JavaScript.

Donc renseignez vous avant tout sur les pages dynamiques et leur fonctionnement(ce qui implique que vous devez connaître la conception et le fonctionnement d'une base ainsi qu'un langage serveur comme PHP) et une fois les notions de base acquise regardez les possibilités qui permettent cela car il y en a d'autres que de le faire vous même parce que si vous débutez dans la création web(comme votre question et votre code semble l'indiquer) cela est faisable sans passer des années d'apprentissage des technologies mises en œuvre et leur pratique de façon sécure, optimales et professionnelles nécessaire pour l genre d'application/site visé(du commerce électronique).

Sans tenir compte des commentaires précédents pour parler pur langage de programmation (JavaScript) et en gardant à l'esprit que ce n'ets pas une solution adapté à ce que vous voulez(la programmation sert un but et non l'inverse, donc ce qui est à considérer c'est l'idée et la conception et non un aspect technique aussi trivial que de suivre des règles de syntaxe et d'utilisation d'un outil, bref la programmation est un outil quand il atteint son but ce qui n'est clairement pas le cas ici puisque une application qui générè des factures et éventuellement paiement qui ne serait pas fiable(sécurisé et performante) c'est juste pire que rien du tout.

Concrètement en programmation et pas pour une boutique en ligne mais calculer des valeurs qui ne serait pas sensible:
  • Vous bloquez l'envoi du formulaire pour rester dans la même page(qui doit envoi dit destinataire ici on reste sur la même page , une façon de faire fonctionner JavaScript comme vous devez savoir est lié à sa page ou plutôt l’occurrence de celle ci en cours dans le navigateur)
  • Vous récupérez les données (voir le DOM et les accesseurs du DOM) du calcul que vous voulez faire. Par exemple ici le nombre d'articles et le tarif(au passage votre formulaire à un défaut d'importance en outre celui de ne pas pouvoir gérer plusieurs achats en même temps ce qui oblige l'utilisateur à faire plusieurs fois la même opération s'il veut différents choix et bien sûr dans le commerce compliquer la vie d'un achat pour rien c'est simplement pas avoir une boutique attrayante donc vendre moins).

Vous effectuez votre calcul et vous l'indiquez dans la page en envoyant le résultat dans son élément d'affichage(toujours via le DOM JavaScript, ici avec les possibilités d'écriture du HTML par JavaScript).

Mais bon comme j'ai indiqué cela n'est pas fiable et ne peut suffire pour de la vente en ligne.
N'importe quel langage de programmation fait de l'arithmétique(c'est d'ailleurs la base de la programmation: la logique mathématique) et ici les calculs ne sont pas à faire côté client(l'ordinateur auquel est servit la page) mais côté serveur qui est un espace auquel il n'a pas d'accès direct(et ne peut pas donc modifier les tarifs ou résultats à sa guise).

Renseignez vous sur l'architecture client-serveur utilisé dans le web(la base) ainsi que celle tripartie (client, serveur de programme, serveur de bases de données) propres aux pages dynamiques qui est nécessaire ici- la base aussi puisque elle est utilisé dans 99% des sites, le 1% des sites restant étant des sites statiques dont le contenu ne peut donc pas varier dans le temps et qui seront juste de présentation au lieu d'offrir à ses utilisateurs comme à son administrateur un outil complet de gestion.
Pour une boutique en ligne il me semble que la partie gestion des contenus et valeurs affichées (comme pour 100% des applications informatiques) est quelque chose d'important.

JavaScript = côté client. C'est bien pour l'interactivité ou même apporter des possibilités avancées dans tout ce que la page affiche mais cela fonctionne uniquement dans l'ordinateur de l'utilisateur au moment où il le fait fonctionner donc clairement pas pour la gestion des données qui sont fournies à la page.


Pour une page statique comme celle que vous présentez(donc pas ce qu'il faut) il est important que vous sépariez le contenu(HTML) de sa forme/présentation CSS, c'est la règle de base des sites web depuis que le CSS existe et une règle conceptuel avant d'avoir son application technique.

Dans le cas d'un site un tant soit peu élaboré(autre chose qu'une page qui affiche quelque chose point barre) vous devez passer par des pages (ou zones dans la page) qui seront dynamiques et donc conceptuellement comprendre la séparation type de contenu(HTML), présentation (CSS) et données(ce qui est fournit à la page pour afficher) qui seront transmis du serveur la base de données par un serveur de programmation(ex: PHP) à la page HTML et la présentation voulue (CSS).
-1