Beste,

Voor mijn opleiding moet ik een reserveringssysteem maken. Als jullie naar mijn HTML bestandje gaan, gebeurt er niks als er op een vakje geklikt word. Ik wil dat er in een vakje ernaast iets berekent wordt (de prijs bijv), waarbij het mogelijk is om meerdere vakjes tegelijk te selecteren. Zou iemand mij hierbij wat tips kunnen geven?

Ik wordt niet echt wijs uit je post, sorry. Heb je misschien een betere uitleg of een schetsje ofzo?

Btw, waarom Javascript? Dit moet ook te doen zijn met CSS3 denk ik zo. Veel betere oplossing dan.

Ik wordt niet echt wijs uit je post, sorry. Heb je misschien een betere uitleg of een schetsje ofzo?

Btw, waarom Javascript? Dit moet ook te doen zijn met CSS3 denk ik zo. Veel betere oplossing dan.

De prijs berekenen met CSS? Good luck with that ...

Ik wordt niet echt wijs uit je post, sorry. Heb je misschien een betere uitleg of een schetsje ofzo? Btw, waarom Javascript? Dit moet ook te doen zijn met CSS3 denk ik zo. Veel betere oplossing dan.

De prijs berekenen met CSS? Good luck with that ...

Nee, als je op de checkbox/ radio klikt dat er dan direct een nieuwe div opent, en in die div via PHP de prijs berekend..

Je kunt alsnog niet met CSS3 interactieve of dynamische webpagina's creëren, dan heb je alsnog JavaScript of PHP nodig. PHP heeft als voordeel dat er niet met pagina's gesjoemeld kan worden en dat pagina's altijd werken (PHP kan je niet uitzetten), terwijl JS over het algemeen wat sneller werkt (immers, het draait binnen de browser).

De keus is dus aan jou wat je graag wilt: betrouwbaarheid (PHP) of snelheid (JS)? Als je voor JS gaat, zou ik je overigens aanraden jQuery te gebruiken, want dat werkt gewoon een stuk sneller en is tegenwoordig bijna de standaard.

Je kunt alsnog niet met CSS3 interactieve of dynamische webpagina's creëren, dan heb je alsnog JavaScript of PHP nodig. PHP heeft als voordeel dat er niet met pagina's gesjoemeld kan worden en dat pagina's altijd werken (PHP kan je niet uitzetten), terwijl JS over het algemeen wat sneller werkt (immers, het draait binnen de browser). De keus is dus aan jou wat je graag wilt: betrouwbaarheid (PHP) of snelheid (JS)? Als je voor JS gaat, zou ik je overigens aanraden jQuery te gebruiken, want dat werkt gewoon een stuk sneller en is tegenwoordig bijna de standaard.

CSS3 is véél sneller dan Javascript..

CSS3 is véél sneller dan Javascript..

Dat is leuk, maar met CSS kan je niet rekenen. Dat is alleen handig als je de prijs al wel laadt, maar niet direct laat zien (pas als je het vakje selecteert). Als je echter bij het selecteren van de vakjes een constant wisselende totaalprijs wilt laten zien heb je toch iets meer nodig dan alleen CSS.

PHP gebruiken voor het berekenen van een totaalprijs is ook een beetje scheef. Je mag er wel vanuit gaan dat elke normale gebruiker Javascript heeft aanstaan, aangezien je anders bijna geen één website kan bezoeken. Tevens ook omdat dit een school opdracht is.

Als je zelf 5 waardes invoert op de webpagina en je moet hiervan de totaalprijs hebben ga je hiervoor geen PHP gebruiken. De ingevoerde waardes zijn lokaal, waarom zou iemand dan met de totaalprijs gaan kloten? Erg onwaarschijnlijk.

Overigens, gaan we niet een beetje off-topic?

@Jochems en de rest: ik moet javascript. Waarom? Omdat wij in het eerste kwartaal html, css en js krijgen. Als ik dan met jquery, php, wat dan ook ga werken valt dit op onder de leraren en ik moet mijn code kunnen uitleggen, vandaar. In de bijlage heb ik een foto bijgevoegd van de zaal hoe die er uit ziet in het html bestand.

Alle drie de kleuren hebben hun eigen prijs categorie (ook dat moest). Weet niet of het van toegevoegde waarde is, maar blauw is 7,50, geel 11,00, en rood is 13,00. Ik wil dat als je op verschillende vakken klikt ze de prijs pakken en er een totaal som komt te staan. Als ik nu in het html bestand op een vak klik zie je het vak wel "indrukken", maar er volgt geen actie. Mijn vraag was dus of iemand mij hier met javascript wat verder kan helpen.

Het liefst wil ik dan ook nog dat als de prijs berekent word, er in een vakje alle losse somme staan. Dus 7,50 + 7,50 + 11 + 13 = 39. Hoop dat jullie me nu snappen.

Dacht dat ik ene bestandje had geupload, maar was dus niet zo (bij begin post)

Bewerkt: 4 november 201311 jaren door Ata

Allereerst, jQuery is Javascript: het is makkelijker om te schrijven en is tegenwoordig zowat standaard. Echter, ik snap best als je dit in standaard JS wilt doen. Ten slotte is dit inderdaad niet mogelijk met PHP, dus excuses voor die discussie (ik had namelijk een ander beeld van je opdracht ).

Dan naar je opdracht. Even voor mezelf, waar heb je de vakjes mee gemaakt? Zijn het HTML button-elementen? In dat geval wordt het wellicht wat lastiger om het vorm te geven. Als ik jou was, zou ik ervoor zorgen dat je de td-elementen een CSS-klasse kan meegeven die bijvoorbeeld .selected heet (ik neem aan dat je er gewoon een tabel van hebt gemaakt).

Heb je ze bovendien ook een CSS-klasse meegegeven, waarmee je de kleur bepaald? (zoals .price-low, .price-medium of .price-high) Als dat zo is, ben je volgens mij klaar om je aan de JS te wagen.

Voeg vervolgens bij de td-elementen een klikfunctie toe:

• ofwel direct via de HTML, wat vrij simpel is (voeg een extra HTML-attribuut onclick="reserveer()" toe)
  
• ofwel door een functie te laten uitvoeren wanneer de body geladen is, en deze functie de tabel te laten doorlopen. Dit zorgt ervoor dat je zonder al te veel moeite je tabel kunt uitbreiden.

Hoe dan ook, in je functie reserveer() kun je nu eenvoudig controleren wat de CSS-klasse was, en aan de hand daarvan de prijs bepalen. Voer nu een bewerking uit op een HTML-element waarin je de prijs wilt tonen:

var input = document.getElementById("jouwInputElement");  // voer de id van het input-element in
input.value = input.value + " + " + dePrijs;          // dePrijs is hier de prijs die je hebt na de berekening

Als je nog op een bepaald punt uitleg wilt, laat het even weten. Heb voor de lol je opdracht ook maar even uitgewerkt

Super bedankt man. Het gaat er niet om waarin ik het wil doen, alleen waar het in moet. Ze verbieden ons om nu al in PHP te gaan werken.

Ja, het zijn button elementen. De CSS klasse hiervan is .stoelblauw, .stoeloranje, .stoelrood. Wat jij zegt met .pricelow enz, is makkelijker dus heb dat maar even veranderd. Zal dadelijk eens verder kijken naar je post, bedankt in ieder geval voor je snelle reactie. Nu ik hier toch bezig ben, ik zoek een simpele sorteer functie waarmee ik op verschillende categorieën kan sorteren. Kan dit het beste met JS of?

Bewerkt: 4 november 201311 jaren door Ata

Nu ik hier toch bezig ben, ik zoek een simpele sorteer functie waarmee ik op verschillende categorieën kan sorteren. Kan dit het beste met JS of?

Wat bedoel je precies voor sorteerfunctie? Wil je een tabel sorteren? In dat geval zou ik gewoon even Googelen, want er zijn zat websites waar je dat soort scripts kunt vinden

Heb al zitten googlen, maar kan nergens de juiste vinden. Had via een andere website een script gevonden maar heb het idee dat daar een extern JS bestandje bij zat, en die kon ik niet downloaden. Ik bedoel eigenlijk meer dit:

Je hebt bovenaan een aantal knoppen. Als ik op 'alfabetische volgorde' klikt, sorteert hij alle films die op de pagina staan op alfabetische volgorde. Verder heb je een aantal categorieën staan. Klik ik op 'actie', komen alle films die de genre actie hebben in beeld. Klik ik op 'thriller', komen alle thrillers. En dan zo verder. Heb zitten googlen op javascipt sort categories, en dergelijke teksten, maar heb nergens kunnen vinden.. Hoop dat je me nu snapt.

Voor een tabel te sorteren zijn zat oplossingen, je hoeft alleen maar op javascript sort table (rows) te zoeken. Er zijn zelfs websites die je meerdere alternatieven of tutorials bieden.

Voor het laten verdwijnen van tabelrijen, moet je even een aantal selectievakjes maken, die je aan- of uit- kunt vinken. Koppel daar een functie aan die aan de betreffende rijen de CSS-waarde display: none of visibility: hidden toevoegt en weghaalt en je bent klaar. Dat moet niet al te lastig zijn, ook dat is te googelen.

Dan heb ik ten slotte even de vraag of dit laatste om schoolopdrachten gaat of niet. Ik ben namelijk niet van plan je opdrachten uit te werken, maar als het uit eigen interesse is, wil ik je wel even op weg helpen, al moet het met mijn plan van aanpak zeker niet al te lastig zijn.

Bedankt, je hebt me idd op weg geholpen. Het is schoolopdracht, dus met deze informatie kan ik weer verder. Zou zelf ook niet willen dat je m'n opdrachten uitwerkt, aangezien ik een beginner hierin ben ga ik dan zwaar door de mand vallen aangezien ik het vroeg of laat niet goed genoeg kan.

Nog een vraagje. Heb nu met m´n klasgenoten het systeem in elkaar geknutseld. In chrome werkt hij, firefox en IE niet, maar dat is inprincipe geen probleem, alleen de totaal prijs lukt ons niet. Misschien een tip? Dit is de code nu.

<!DOCTYPE>
<html>
<head>
<style>
.leeg {background: #FFFFFF; border: 1px solid #FFFFFF;}
span {width:50px;border:1px solid #ccc}
.klasse_1 {background:#DE0804;}
.klasse_2 {background:#FF9933;}
.klasse_3 {background:#4D94FF;}
.klasse_gereserveerd {background:#000000;}
button  {width:30px;height:30px;border:1 solid #000000;margin:0.5px;padding:0px}
input {width: 100px; height: 30px; border: 0px; padding: 2px;}
</style>
<script>
var zaal =
[
[0],
[0,0,0,3,3,3,3,3,3,3,3,0,0],
[0,0,3,3,3,3,3,3,3,3,3,3,0],
[0,0,3,3,3,3,3,3,3,3,3,3,0],
[0,3,3,3,3,3,2,2,3,3,3,3,3],
[0,3,3,3,3,2,2,2,2,3,3,3,3],
[0,3,3,3,2,2,1,1,2,2,3,3,3],
[0,3,3,3,2,2,1,1,2,2,3,3,3],
[0,3,3,3,2,2,1,1,2,2,3,3,3],
[0,3,3,3,2,2,1,1,2,2,3,3,3],
[0,3,3,3,3,2,2,2,2,3,3,3,3],
[0,3,3,3,3,3,2,2,3,3,3,3,3],
[0,0,3,3,3,3,3,3,3,3,3,3,0],
[0,0,0,3,3,3,3,3,3,3,3,0,0],
[0,0,0,3,3,3,3,3,3,3,3,0,0]
];
function lees_Storage()
{
if(sessionStorage.length)
{
 var reeks = [];
 for(var i = 0 ; i < sessionStorage.length ; i++ )
 {
  reeks[i] = sessionStorage.key(i);
 }
}
else
{
}
}
function plaats_stoelen()
{
 var plaats;
 for(var rn = 1 ; rn < zaal.length ; rn++)
 {
   for(var sn = 1 ; sn < zaal[rn].length ; sn++ )
{
 switch(zaal[rn][sn])
 {
   case 0 : plaats = maak_leegte();break;
   case 1 : plaats = maak_stoel(1,rn,sn);break;
   case 2 : plaats = maak_stoel(2,rn,sn);break;
   case 3 : plaats = maak_stoel(3,rn,sn);break;
 }
 document.getElementById("DIV_zaal").appendChild(plaats);
}
document.getElementById("DIV_zaal").appendChild(document.createElement("br"));
 }
}
function maak_leegte()
{
 var plaats = document.createElement("button");
 plaats.type = "button";
 plaats.setAttribute("class","leeg");
 return plaats;
}
function is_gereserveerd(stoel)
{
var id = stoel.id;
gevonden = false;
var i = 0;
while(!gevonden && (i < sessionStorage.length) )
{
 if (id == sessionStorage.key(i))
 {
  gevonden = true;
 }
 i++;
}
return gevonden;
}
function geef_prijs(pk)
{
 var prijs;
 switch(pk)
 {
   case 1 : prijs = 13.00;break;
   case 2 : prijs = 11.00;break;
   case 3 : prijs =  7.50;break;
 }
 return prijs;
}

function maak_stoel(prijsklasse,rn,sn)
{
var stoel = document.createElement("button");
stoel.type = "button";
stoel.value = prijsklasse;
stoel.title = geef_prijs(prijsklasse);
var stoelprijs = stoel.title.toString();
stoel.id = "rij " + rn + "<BR>" + "stoel " + sn + "<BR> €" + stoelprijs;
stoel.addEventListener("click",reserveer,false);

var klasse;
if(is_gereserveerd(stoel))
{
 klasse = "klasse_gereserveerd";
}
else
{

 klasse = "klasse_" + prijsklasse;
}
stoel.setAttribute("class",klasse);
return stoel;
}
function reserveer(e)
{
var stoel = e.srcElement;
var som;
   stoel.style.background = "#000000";
stoelnummer = stoel.id;
sessionStorage.setItem(stoelnummer,"bezet");
som = som + parseInt(stoel.title);
document.getElementById("FORM_zaal").submit();
}
function wissen()
{
alert("alle gegevens wissen");
sessionStorage.clear();
document.getElementById("FORM_zaal").submit();
}
function lees_reserveringen()
{
if(sessionStorage.length)
{
 var lengte = sessionStorage.length;
 var reeks = [];
 for(var i = 0 ; i < lengte ; i++)
 {
  reeks[i] = sessionStorage.key(i);
 }
 var html = "";
 for(var i = 0 ; i < lengte ; i++)
 {
  var r = sessionStorage.getItem(reeks[i]);
  html +=
 reeks[i] + "<BR>" + "<BR>";
 }
 document.getElementById("stoel_nummer").innerHTML = html;
}
else
{
document.getElementById("stoel_nummer").innerHTML = "geen reserveringen";
}
}


function start()
{
lees_Storage();
plaats_stoelen();
document.getElementById("BTN_wissen").addEventListener("click",wissen,false);
lees_reserveringen();
var check_pagina = setInterval(function(){lees_reserveringen()},100);
}
window.addEventListener("load",start,false);
</script>
</head>
<body>
<form id="FORM_zaal">
<div id="DIV_zaal"></div>
<button id="BTN_wissen">wissen</button>
<div id='div_data_betalen' style='border: 1px solid black;'>
 <div id='stoel_nummer' style='border: 1px solid black;'></div>
 <div id='div_prijs' style='border: 1px solid black;'></div>
</div>
<div id='test'></div>
</form>
</body>
</html>