login  Naam:   Wachtwoord: 
Registreer je!
 Forum

live prijs aanpassen

Offline clubfilth - 29/06/2013 23:28
Avatar van clubfilthLid Goedenavond allen!

Ik ben nu al een paar uur met het volgende aan het worstelen...
Ik ben niet echt goed in javascript maar zal het in dit geval toch echt moeten gebruiken ben ik bang.
in mijn hoofd klinkt het heel simpel maar ik kom er niet uit.

ik heb een product pagina met daarbij de prijs ...bijvoorbeeld 10 euro.
nu heb ik daaronder een input number voor het gewenste aantal,
als de klant er bijvoorbeeld 2 selecteerd moet de prijs van 10 euro naar 20 euro veranderen.

dit krijg ik dus niet voor elkaar.

kan iemand mij helpen?

bij voorbaat dank!

5 antwoorden

Gesponsorde links
Offline UpLink - 30/06/2013 23:07 (laatste wijziging 30/06/2013 23:09)
Avatar van UpLink ... Dan gaat ge de kant moeten uitgaan van jQuery...

Kan niet meteen een voorbeeldscript vinden, maar het zal deze richting moeten uitgaan denk ik... LINK
Offline WouterJ - 01/07/2013 08:28
Avatar van WouterJ HTML gevorderde Dan ga je de kant uit van JavaScript, jQuery is helemaal niet nodig...
Offline Sitebase - 13/07/2013 17:07
Avatar van Sitebase PHP expert Belangrijk bij deze code is dat je in je JavaScript de values die je ophaalt uit de input velden, dat je deze eerst omzet naar een integer. Anders doe je een string maal een string wat een helemaal ander resultaat geeft.
Offline Rens - 29/07/2013 15:54 (laatste wijziging 29/07/2013 15:55)
Avatar van Rens Gouden medaille

Crew algemeen
Maak gebruik van een selectbox en een option veld.
Je laat PHP de prijs ophalen en in de 'value' van de option zetten.
D.m.v. een onchange op je select box laat je de prijs in bijvoorbeeld een div aanpassen.

Heb even een kort voorbeeldje gemaakt:
  1. <script language="javascript">
  2. function prijsAanpassen(prijs, id)
  3. {
  4. document.getElementById(id).innerHTML = "De prijs is "+prijs;
  5. }
  6. <div id="prijs">De prijs is 10</div>
  7. <select name="prijs" onchange="prijsAanpassen(this.value, 'prijs');">
  8. <option value="10">1</option>
  9. <option value="20">2</option>
  10. <option value="30">3</option>
  11. <option value="40">4</option>


Zoals je ziet heb je hier dus helemaal geen jQuery voor nodig, het is zelfs overbodig.
3 basisregels javascript is genoeg 
http://www.tiza...ntbyid.php
http://www.w3schools.com/jsref/event_onchange.asp
Offline WouterJ - 29/07/2013 19:48 (laatste wijziging 29/07/2013 19:49)
Avatar van WouterJ HTML gevorderde Dan gaan we nog wat verder in JS best practices.

Eerst wat HTML regels:
- language attribuut heeft nooit bestaan, gebruik het type attribuut. Deze default naar text/javascript bij script tags, dus we laten hem nu gewoon weg
- select elementen komen alleen voor in een form element
- sinds html5 hebben we een output element die geschikt is voor het tonen van het resultaat van een berekening van user input.

Dan wat JavaScript dingen:
- geen inline JS
- alleen het variabele gedeelte in het output element, niet de hele zin
- script element onder de HTML code, vlak voor </body>
- innerText ipv innerHTML.
  1. De prijs is <output id="prijs" for="#userPrice">10</output>.
  2.  
  3. <select id="userPrice" name="prijs">
  4. <option value="10">1</option>
  5. <option value="20">2</option>
  6. <option value="30">3</option>
  7. <option value="40">4</option>
  8. </select>
  9. </form>
  10.  
  11. var userPrice = document.getElementById('userPrice');
  12. userPrice.onchange = function (e) {
  13. document.getElementById('prijs').innerText = this.value;
  14. };


Nu laten we telkens als we het aantal veranderen JavaScript de hele DOM doorzoeken naar #prijs. Het hoeft maar 1 keer, daarna kunnen we het opslaan in een variabele en die dan de hele tijd gebruiken:
  1. var userPrice = document.getElementById('userPrice');
  2. var prijs = /* DOMNode */ null;
  3.  
  4. userPrice.onchange = function (e) {
  5. if (null === prijs) {
  6. prijs = document.getElementById('prijs');
  7. }
  8.  
  9. prijs.innerText = this.value;
  10. };
  11. </script>


En dan gaan we nog wat verder. Het is handig om het aantal op te slaan in de db en daarvanuit de prijs te berekenen, daarom doen we dat ook in ons form en verplaatsen we het berekenen naar de event handler:
  1. De prijs is <output id="prijs" for="#amount">10</output>.
  2.  
  3. <select id="amount" name="aantal">
  4. <option value="1">1</option>
  5. <option value="2">2</option>
  6. <option value="3">3</option>
  7. <option value="4">4</option>
  8. </select>
  9. </form>
  10.  
  11. var amount = document.getElementById('amount');
  12. var prijs = /* DOMNode */ null;
  13.  
  14. amount.onchange = function (e) {
  15. if (null === prijs) {
  16. prijs = document.getElementById('prijs');
  17. }
  18.  
  19. prijs.innerText = this.value * 10; // 10 per stuk
  20. };


En dan als laatst nog wat overnemen van de functionele talen. Onze event handler (de functie) doet nu 2 dingen. Het communiceert met de buitenwereld (een zogenaamde IO functie, Input Output) en het berekend de prijs. Het berekenen gebeurd door het krijgen van 2 waardes en 1 waarde terug te geven. Deze waarde zal altijd hetzelfde zijn bij dezelfde input. Dat noemen we pure functies.

Deze samen in 1 functie doen zorgt voor slechtere debugging, testing en meer bugs. Daarom verplaatsen we die naar een functie die we ook nog eens kunnen hergebruiken!
  1. var amount = document.getElementById('amount');
  2. var prijs = /* DOMNode */ null;
  3.  
  4. amount.onchange = function (e) {
  5. if (null === prijs) {
  6. prijs = document.getElementById('prijs');
  7. }
  8.  
  9. prijs.innerText = calculatePrice(this.value, 10); // 10 per stuk
  10. };
  11.  
  12. function calculatePrice(q, vk, ck) {
  13. vk || (vk = 0);
  14. ck || (ck = 0); // default values
  15.  
  16. return q * vk + ck;
  17. }
  18. </script>
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.201s