Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

live prijs aanpassen

clubfilth - 29/06/2013 23:28
Lid		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

UpLink - 30/06/2013 23:07 (laatste wijziging 30/06/2013 23:09)
...		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

WouterJ - 01/07/2013 08:28
HTML gevorderde		Dan ga je de kant uit van JavaScript, jQuery is helemaal niet nodig...

Sitebase - 13/07/2013 17:07
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.

Rens - 29/07/2013 15:54 (laatste wijziging 29/07/2013 15:55)

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:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<script language="javascript">
function prijsAanpassen(prijs, id)
{
	document.getElementById(id).innerHTML = "De prijs is "+prijs;
}
</script>
<div id="prijs">De prijs is 10</div>
<select name="prijs" onchange="prijsAanpassen(this.value, 'prijs');">
<option value="10">1</option>
<option value="20">2</option>
<option value="30">3</option>
<option value="40">4</option>
</select>

<script language="javascript">
function prijsAanpassen(prijs, id)
{
	document.getElementById(id).innerHTML = "De prijs is "+prijs;
}
</script>
<div id="prijs">De prijs is 10</div>
<select name="prijs" onchange="prijsAanpassen(this.value, 'prijs');">
<option value="10">1</option>
<option value="20">2</option>
<option value="30">3</option>
<option value="40">4</option>
</select>

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

WouterJ - 29/07/2013 19:48 (laatste wijziging 29/07/2013 19:49)

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.

html4strict code - Bekijk de code zonder highlighting - Klap code in

De prijs is <output id="prijs" for="#userPrice">10</output>.

<form>
    <select id="userPrice" name="prijs">
        <option value="10">1</option>
        <option value="20">2</option>
        <option value="30">3</option>
        <option value="40">4</option>
    </select>
</form>

<script>
var userPrice = document.getElementById('userPrice');
userPrice.onchange = function (e) {
    document.getElementById('prijs').innerText = this.value;
};
</script>

De prijs is <output id="prijs" for="#userPrice">10</output>.
 
<form>
    <select id="userPrice" name="prijs">
        <option value="10">1</option>
        <option value="20">2</option>
        <option value="30">3</option>
        <option value="40">4</option>
    </select>
</form>
 
<script>
var userPrice = document.getElementById('userPrice');
userPrice.onchange = function (e) {
    document.getElementById('prijs').innerText = this.value;
};
</script>

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:

javascript code - Bekijk de code zonder highlighting - Klap code in

                var userPrice = document.getElementById('userPrice');
var prijs     = /* DOMNode */ null;

userPrice.onchange = function (e) {
    if (null === prijs) {
        prijs = document.getElementById('prijs');
    }

    prijs.innerText = this.value;
};
</script>
            
var userPrice = document.getElementById('userPrice');
var prijs     = /* DOMNode */ null;
 
userPrice.onchange = function (e) {
    if (null === prijs) {
        prijs = document.getElementById('prijs');
    }
 
    prijs.innerText = this.value;
};
</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:

html4strict code - Bekijk de code zonder highlighting - Klap code in

De prijs is <output id="prijs" for="#amount">10</output>.

<form>
    <select id="amount" name="aantal">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</form>

<script>
var amount = document.getElementById('amount');
var prijs  = /* DOMNode */ null;

amount.onchange = function (e) {
    if (null === prijs) {
        prijs = document.getElementById('prijs');
    }

    prijs.innerText = this.value * 10; // 10 per stuk
};
</script>

De prijs is <output id="prijs" for="#amount">10</output>.
 
<form>
    <select id="amount" name="aantal">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</form>
 
<script>
var amount = document.getElementById('amount');
var prijs  = /* DOMNode */ null;
 
amount.onchange = function (e) {
    if (null === prijs) {
        prijs = document.getElementById('prijs');
    }
 
    prijs.innerText = this.value * 10; // 10 per stuk
};
</script>

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!

javascript code - Bekijk de code zonder highlighting - Klap code in

                var amount = document.getElementById('amount');
var prijs  = /* DOMNode */ null;

amount.onchange = function (e) {
    if (null === prijs) {
        prijs = document.getElementById('prijs');
    }

    prijs.innerText = calculatePrice(this.value, 10); // 10 per stuk
};

function calculatePrice(q, vk, ck) {
    vk || (vk = 0);
    ck || (ck = 0); // default values

    return q * vk + ck;
}
</script>
            
var amount = document.getElementById('amount');
var prijs  = /* DOMNode */ null;
 
amount.onchange = function (e) {
    if (null === prijs) {
        prijs = document.getElementById('prijs');
    }
 
    prijs.innerText = calculatePrice(this.value, 10); // 10 per stuk
};
 
function calculatePrice(q, vk, ck) {
    vk || (vk = 0);
    ck || (ck = 0); // default values
 
    return q * vk + ck;
}
</script>
 

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten