rekenscript met variabelen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Dre den Breejen

Dre den Breejen

29/10/2013 11:38:10
Quote Anchor link
Hoi,
Ik krijg dit reken script maar niet goed werkend voor een site van een autoverhuur bedrijf. Hoe geef ik val three en valfour wanneer deze niet aangevinkt worden waarde 0 (en valfive waarde 1) mee?
Bij totals krijg ik NaN. De waarde van valfive wordt ook niet meegenomen. Why?

Ik hoop jullie mij kunnen helpen, zit al een tijd te vogelen hiermee.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
    $(".calculate").change(function(){
    var valone = $('input:radio[name=kiesAuto]:checked').val();
    var valtwo = $('#dag').val();
    var valthree = $('input:checkbox[name=afkoop]:checked').val();
    var valfour = $('input:checkbox[name=Winterbanden]:checked').val();
    var valfive = $('#onderhoud').val();
    var valsix = $('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(totals);
    var afgerond = Math.round(total*100 / 100);

    });
    });

    </script>


<form name='rekenen'>
  <p>
    <input type='text' name='box1' >
    :<input type='text' name='box2'>*10<input type='text' name='box3'><input type='button' name='uitrekenen' onclick="rekenen1()" value='reken uit!'>
  </p>
</form>


    <form name="formulier1">
      <br />
        <br />
        <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 />
        <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="700" />Mijn auto wordt voor onderhoud aangeboden. U heeft recht op 30% korting.
        
        <p>&nbsp;</p>
        
        
        <br />
        4. Startdatum<br />
        <input type="radio" name="date" value="1" class="calculate">Spoed<br />
        <input type="radio" name="date" value="0" class="calculate">Normaal<br />
        <br />
        <br />
        
        <input type="button" value="Bereken" onClick="calculate" >

</form>
<p><br />
  <br />
SubTotaal: <span id="subtotal"></span></p>
<p>&nbsp;</p>
<p><br/>
  Totaal: <span id="total"></span>
  <p>&nbsp;</p>
<p>
  Totalen: <span id="totals"></span><br/>
  Afronden op 2 decimalen


Edit:
Zojuist heb ik code-tags om je script geplaatst. Gelieve dit voortaan ook te doen.
Zie ook deze handleiding.
Gewijzigd op 29/10/2013 12:29:53 door - Ariën -
 
PHP hulp

PHP hulp

26/11/2024 17:33:39
 
Kris Peeters

Kris Peeters

29/10/2013 12:15:22
Quote Anchor link
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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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]
Gewijzigd op 29/10/2013 12:43:25 door Kris Peeters
 
Dre den Breejen

Dre den Breejen

29/10/2013 12:58:13
Quote Anchor link
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.
 
Kris Peeters

Kris Peeters

29/10/2013 13:34:59
Quote Anchor link
gelieve code te posten tussen [code][/code]
 
Dre den Breejen

Dre den Breejen

29/10/2013 13:39:27
Quote Anchor link
Bij deze :-D
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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.
 
Kris Peeters

Kris Peeters

29/10/2013 14:32:35
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<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>
Gewijzigd op 29/10/2013 14:42:25 door Kris Peeters
 
Dre den Breejen

Dre den Breejen

29/10/2013 15:17:26
Quote Anchor link
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
 
Kris Peeters

Kris Peeters

29/10/2013 16:57:04
Quote Anchor link
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.
Gewijzigd op 29/10/2013 17:04:49 door Kris Peeters
 
Dre den Breejen

Dre den Breejen

29/10/2013 17:45:33
Quote Anchor link
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)

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!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 ?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
 
Dre den Breejen

Dre den Breejen

14/11/2013 13:02:52
Quote Anchor link
Script src was niet compleet en formule nog wat aangepast .Het werkt nu. Yeah!
Bedankt voor je hulp !
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.