rekenscript met variabelen

Laat me even wat basis-dingen uitleggen.
Ik geef je een ingekorte versie van een antwoord op je vraag.

Bouw dan op die manier verder.

- Om te beginnen: een recentere jQuery versie. We zitten nu aan 1.10.2 .

- Javascript gaat anders om met datatype dan php; veel minder los.
Als jij wil dat iets een getal is, moet je dat zelf aangeven. Zie in de code waar Number() wordt gebruikt.

Er zit nog commentaar tussen de code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {  // dit is het zelfde als $(document).ready().  Wordt dus uitgevoerd wanneer de DOM geladen is.
  $(".calculate").change(function() {  // wanneer iets met class="calculate" wordt veranderd
    // .val() gaat er altijd van uit dat de waarde een string is.
    // Om daar een getal van te maken, passeren we alles door Number().
    var valone      = Number($('input:radio[name=kiesAuto]:checked').val());  
    var valtwo      = Number($('#dag').val());
    
    var subtotal    = valone * valtwo ;
    
    // met  .toFixed() zeg je hoeveel cijfers je na de komma wil zien.
    // Afronden doe ja altijd als allerlaatste stap.
    // Nooit verder rekenen met afgeronde getallen
    $('#subtotal').text(subtotal.toFixed(2)); 
  });
});
function rekenen1() {
  // geen idee wat je hier van plan bent
}
</script>
  <form name="formulier1">
    1. Catogorie auto <br />
    <input type="radio" name="kiesAuto" value="36.30" class="calculate">Cat A<br />
    <input type="radio" name="kiesAuto" value="43.56" class="calculate">Cat B<br />
    <input type="radio" name="kiesAuto" value="51.42" class="calculate">Cat C<br />
    <input type="radio" name="kiesAuto" value="58.69" class="calculate">Cat C1<br />
    <input type="radio" name="kiesAuto" value="58.69" class="calculate">Cat Cs<br />
    <br />
    2 
    <label for="dagen"><strong>Hoeveel dagen</strong></label>
    <select name="dagen" id="dag" class="calculate">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="2">weekend</option>
      <option value="week">week</option>
    </select>
  </form>
  <p>SubTotaal: <span id="subtotal"></span></p>

En als je code hebt, gelieve die te posten tussen [code][/code]

Hoi Kris. Ik heb die dingen aangepast. THanks !
Maar op dit moment krijg ik helemaal geen waarde. Niet bij subtotal, total en totals.

Verder weet ik niet hoe een waarde meegeef wanneer geen keuze wordt gemaakt bij Opties. Heb met if else geprobeerd, maar nog geen resultaat.

Het verbeterde script.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".calculate").change(function(){

var valone = Number($('input:radio[name=kiesAuto]:checked').val());
var valtwo = Number($('#dag').val());
var valthree = Number ($('input:checkbox[name=afkoop]:checked').val());
var valfour = Number ($('input:checkbox[name=Winterbanden]:checked').val());
var valfive = Number ($('#onderhoud').val());
var valsix = Number ($('input:radio[name=opties]:checked').val());

var subtotal = ((valone * 1) * (valtwo * 1));
var total = (subtotal * 1) + ((valfour * 1) + (valtwo * 1)) ;
var totals= (total * 1) * ((valfive * 1)*(valtwo *1)) ;

$('#subtotal').text(subtotal);
$('#total').text(total);
$('#totals').text(subtotal.toFixed(2)); // met .toFixed() zeg je hoeveel cijfers je na de komma wil zien.

});
});

</script>

3 Kies opties. <br/>
<input name="afkoop" class="calculate" type="checkbox" value="6.65" checked />Verlaging eigen risico naar &euro; 100,- per gebeurtenis (€ 6.65 per dag) <br/>
<input name="Winterbanden" class="calculate" type="checkbox" value="10.00" />Huurauto met winterbanden(€ 10.00 per dag)<br/>
<input name="onderhoud" type="checkbox" class="calculate" value="0.7" />Mijn auto wordt voor onderhoud aangeboden. U heeft recht op 30% korting.


Toevoeging op 29/10/2013 13:06:10:

formule var total moet zijn ;
var total = (subtotal * 1) + ((valthree * 1) * (valtwo * 1)) + ((valfour * 1) * (valtwo * 1)) ;
Excuus, maar nog steeds geen waarde. Zelfs geen NaN.

gelieve code te posten tussen [code][/code]

Bij deze :-D

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".calculate").change(function(){

var valone = Number($('input:radio[name=kiesAuto]:checked').val()); 
var valtwo = Number($('#dag').val());
var valthree = Number ($('input:checkbox[name=afkoop]:checked').val());
var valfour = Number ($('input:checkbox[name=Winterbanden]:checked').val());
var valfive = Number ($('#onderhoud').val());
var valsix = Number ($('input:radio[name=opties]:checked').val());

var subtotal = ((valone * 1) * (valtwo * 1));
var total = (subtotal * 1) + ((valthree * 1) * (valtwo * 1)) + ((valfour * 1) * (valtwo * 1)) ;
var totals= (total * 1) * ((valfive * 1)*(valtwo *1)) ;

$('#subtotal').text(subtotal);
$('#total').text(total);
$('#totals').text(subtotal.toFixed(2)); // met .toFixed() zeg je hoeveel cijfers je na de komma wil zien.

});
});

</script>

3 Kies opties. <br/>
<input name="afkoop" class="calculate" type="checkbox" value="6.65" checked />Verlaging eigen risico naar &euro; 100,- per gebeurtenis (€ 6.65 per dag) <br/>
<input name="Winterbanden" class="calculate" type="checkbox" value="10.00" />Huurauto met winterbanden(€ 10.00 per dag)<br/> 
<input name="onderhoud" type="checkbox" class="calculate" value="0.7" />Mijn auto wordt voor onderhoud aangeboden. U heeft recht op 30% korting. 

Die * 1 heb je echt nergens nodig; laat dat weg.

Een aantal dingen die me nog opvallen:

- Je hebt nergens iets met name="opties". (zie lijn 11)
Wat is dat?

- #onderhoud heb je ook niet. #onderhoud betekent een HTML element met id="onderhoud".
Ofwel voeg je id="onderhoud" toe aan het onderhoud-element, ofwel maak je van lijn 10
$('input:checkbox[name=onderhoud]:checked').val()

--------
Ik heb nog iets leuks voor je.
bv.

var valone = Number($('input:radio[name=kiesAuto]:checked').val()) || 0; // OR 0

Indien Number er geen getal van kan maken (omdat die niet checked is), wordt de variabele op 0 gezet.


Ik heb geen enkel idee wat je van plan bent met totals.
Leg eens in woorden uit wat je daarmee wil doen.

--------
Weer een stapje verder:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $(".calculate").change(function() {

  var valone    = Number($('input:radio[name=kiesAuto]:checked').val()) || 0; 
  var valtwo    = Number($('#dag').val());
  var valthree  = Number ($('input:checkbox[name=afkoop]:checked').val()) || 0;
  var valfour   = Number ($('input:checkbox[name=Winterbanden]:checked').val()) || 0;
  var valfive   = Number ($('input:checkbox[name=onderhoud]':checked').val()) || 0;
  // var valsix = Number ($('input:radio[name=opties]:checked').val());

  var subtotal = valone  * valtwo ;
  var total = subtotal + valthree * valtwo  + valfour * valtwo  ;
  var totals= total * valfive * valtwo ;

    $('#subtotal').text(subtotal.toFixed(2));
    $('#total').text(total.toFixed(2));
    $('#totals').text(subtotal.toFixed(2));

  });
});
</script>

  <input type="radio" name="kiesAuto" value="36.30" class="calculate">Cat A<br />
  <input type="radio" name="kiesAuto" value="43.56" class="calculate">Cat B<br />
  <input type="radio" name="kiesAuto" value="51.42" class="calculate">Cat C<br />
  <input type="radio" name="kiesAuto" value="58.69" class="calculate">Cat C1<br />
  <input type="radio" name="kiesAuto" value="58.69" class="calculate">Cat Cs<br />

  <select name="dagen" id="dag" class="calculate">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="2">weekend</option>
    <option value="week">week</option>
  </select> 
  
  3 Kies opties. <br/>
  <input name="afkoop" class="calculate" type="checkbox" value="6.65" checked />Verlaging eigen risico naar &euro; 100,- per gebeurtenis (€ 6.65 per dag) <br/>
  <input name="Winterbanden" class="calculate" type="checkbox" value="10.00" />Huurauto met winterbanden(€ 10.00 per dag)<br/> 
  <input name="onderhoud" type="checkbox" class="calculate" value="0.7" />Mijn auto wordt voor onderhoud aangeboden. U heeft recht op 30% korting.

  <p>SubTotaal: <span id="subtotal"></span></p>
  <p>Totaal: <span id="total"></span></p>
  <p>Totalen: <span id="totals"></span><br/></p>

Ik had begrepen dat dit nodig is bij het + teken. Maar ik haal ze weg.
Je hebt de ( ) weggehaald bij
De var opties is inderdaad nu nog niet nodig. Misschien dat er later nog een var moet worden toegevoegd.

Dit is wat ik zocht idd, val()) || 0; // OR 0.
Top !

Met totals bedoel ik het eind totaal. Ik heb de formule "opgeknipt" om beter te kunnen testen en overzicht te houden wat werkt en niet. De bedoeling is straks alleen het eind totaal te laten zien aan de klant.

Ik ben blij dat je mee wilt denken Kris !
Nu alles weer aangepast, maar helaas nog steeds geen uitkomst

Rekenen gebeurt met een volgorde van operatoren.
Dat is niet per se van links naar rechts.

bv.
var total = subtotal + valthree * valtwo + valfour * valtwo;

Vermenigvuldigen heeft voorang op optellen.
Dus per definitie is dit gelijk aan

var total = subtotal + (valthree * valtwo) + (valfour * valtwo);

Met andere woorden: 5 + 6 * 2 is niet 22, maar is 17.
-----

Nog eens opnieuw beginnen.
Wat onderscheidt de substappen? Is dat wanneer de gebruiker op een Verzend-knop drukt of zo?

Want dan moeten/kunnen we ergens een variabele bijhouden die al die totalen bijhoudt.

Vertel eens wat de gebruiker moet zien en doen om het subtotaal te zien stijgen.

---
Toon eventueel nog eens de laatste stand, die jij hebt.

Die reken volgorde is mijn duidelijk.

Men kiest eerst een auto [valone] , dan het aantal dagen [valtwo]. Dan is er keuze uit opties [ valthree, valfour en valfive] . De 1e twee opties zijn dagprijzen dus bij meerdere dagen x aantal dagen.
Valfive is eigenlijk een korting voor onderhoudsklanten.
Pas al er op bereken button wil ik dit laten zien via een div op de pagina.
Die actie moet er nog aan verbonden worden. Kunnen er 2 acties via 1 button gestuurd worden?

Men ziet dan iets van ; U heeft Cat A gekozen. Tijdsduur 1 dag. De totale prijs is 43.56.
Er is al een overlay waar de resteerde gegevens worden verzameld en verstuurd worden naar het bedrijf. Gaat via een verzendknop.
Mocht je even willen kijken http://alautoverhuur.nl (via reserveer button)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reken test</title>
<link href="css/verhuur" rel="stylesheet" type="text/css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $(".calculate").change(function() {

  var valone    = Number($('input:radio[name=kiesAuto]:checked').val()); 
  var valtwo    = Number($('#dag').val());
  var valthree  = Number ($('input:checkbox[name=afkoop]:checked').val()) || 0;
  var valfour   = Number ($('input:checkbox[name=Winterbanden]:checked').val()) || 0;
  var valfive   = Number ($('input:checkbox[name=onderhoud]').val()) || 1;
  // var valsix = Number ($('input:radio[name=opties]:checked').val());

  var subtotal = valone  * valtwo ;
  var total = subtotal + valthree * valtwo  + valfour * valtwo  ;
  var totals= total * valfive * valtwo ;

    $('#subtotal').text(subtotal.toFixed(2));
    $('#total').text(total.toFixed(2));
    $('#totals').text(subtotal.toFixed(2));

  });
});
</script>

</head>
<body>
	<form name="formulier1">
		<br />
		1. Catogorie auto <br />
	  <input type="radio" name="kiesAuto" value="36.30" class="calculate">Cat A<br />
	  <input type="radio" name="kiesAuto" value="43.56" class="calculate">Cat B<br />
	  <input type="radio" name="kiesAuto" value="51.42" class="calculate">Cat C<br />
	  <input type="radio" name="kiesAuto" value="58.69" class="calculate">Cat C1<br />
	  <input type="radio" name="kiesAuto" value="58.69" class="calculate">Cat Cs<br />
	  
	
		<br />
       2 
        <label for="dagen"><strong>Hoeveel dagen</strong></label>
    <select name="dagen" id="dag">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3" >3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="2">weekend</option>
      <option value="week">week</option>
    </select>
			<br />
		<br />
		3 Kies opties. <br/>
<input name="afkoop" class="calculate"  type="checkbox"  value="6.65" checked />Verlaging eigen risico naar &euro; 100,- per gebeurtenis <img src="afbeeldingen/balk.jpg" width="40" height="5" />(€ 6.65 per dag) <br/>
        
<input name="Winterbanden" class="calculate" type="checkbox" value="10.00" />Huurauto met winterbanden<img src="afbeeldingen/balk.jpg" width="160" height="5" />(€ 10.00 per dag)<br/> 
<input name="onderhoud" type="checkbox" class="calculate" value="0.7" id="onderhoud" />Mijn auto wordt voor onderhoud aangeboden. U heeft recht op 30% korting. 
        
        <p>&nbsp;</p>
        <input type="button" value="Bereken"  onclick="calculate" >

</form>

  <div id="uitkomst_kiesAuto">
<p>SubTotaal: <span id="subtotal"></span></p>

  <p>Totaal: <span id="total"></span></p>

<p>
  Totalen: <span id="totals"></span><br/> 
 </p>
  </div>

</body>

</html>

Toevoeging op 30/10/2013 17:05:30:

Snap nog steeds niet waarom dit script geen uitkomst geeft.

Wat zie ik over het hoofd ?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $(".calculate").change(function() {

  var valone    = Number($('input:radio[name=kiesAuto]:checked').val()); 
  var valtwo    = Number($('#dag').val());
  var valthree  = Number ($('input:checkbox[name=afkoop]:checked').val()) || 0; //or 0
  var valfour   = Number ($('input:checkbox[name=Winterbanden]:checked').val()) || 0;
  var valfive   = Number ($('input:checkbox[name=onderhoud]').val()) || 1;
  // var valsix = Number ($('input:radio[name=opties]:checked').val());

  var subtotal = valone  * valtwo ;
  var total = subtotal + valthree * valtwo  + valfour * valtwo  ;
  var totals= total * valfive * valtwo ;

    $('#subtotal').text(subtotal.toFixed(2));
    $('#total').text(total.toFixed(2));
    $('#totals').text(subtotal.toFixed(2));

  });
});
</script>

Script src was niet compleet en formule nog wat aangepast .Het werkt nu. Yeah!
Bedankt voor je hulp !