Rekenen met Jquery checkbox en invulveld

[St@m]

Mensen,

Vooropgesteld, ik ben absoluut geen programmeer. HTML kom ik over het algemeen wel uit, en als ik aanvullende code nodig heb ik google over het algemeen mijn vriend. Ik begrijp meestal voldoende om de code aan te passen naar mijn eigen wensen. Maar nu helaas even niet.

Ik wil eigenlijk iets heel eenvoudigs..
Ik heb een HTML documentje. Daarop wordt een resterend budget weergegeven. Laten we zeggen dat dit € 1.000.0000,- is.
Er zijn twee checkbox mogelijkheden:
1: Kosten die van het miljoen worden afgetrokken € 150.000
2: Kosten die van het miljoen worden afgetrokken € 150.000

Daarnaast is er nog een vrij invulveld, het getal wat hier wordt ingevuld gaat ook van het miljoen af.
Kortgezegd: Budget = 1000000 - (checkbox 1 + checkbox 2 + invulveld)

De HTML:

code:

<div class="budget">
<h2>Resterend budget</h2>
<div class="price"><h2>&euro; <span id="sum"></span></h2></div>
<hr>
<h3>bouwhandleidingen
<input type="number" class="txt" name="txt"></h3>
<h3>Inzet joker
<input type="checkbox" id="joker" value="150000"></h3>
<h3>Extra kosten
<input type="checkbox" id="extra" value="150000"></h3>
 </div>

Zoals al gezegd, mijn Jquery en Javascript is niet al te best, dus ik heb even wat code gegoogled en uitgeprobeerd (al zo'n 5 uur ) Dit is wat ik nu heb.

code:

$(".budget input[type='checkbox']").change(function () {
    
    var thisPrice = +$(this).parent().find('input').attr('value');
    var priceElement = $(this).closest('.budget').find('.price');
    var priceTotalElement = priceElement.find('#sum');
    var currentPrice = +priceTotalElement.text();
    
    
    if( $(this).is(":checked") ) {
        var totalPrice = currentPrice - thisPrice;
    } else {
        var totalPrice = currentPrice + thisPrice;        
    }
    
    priceTotalElement.text(totalPrice);

    });
$(document).ready(function(){
    $("#sum").data('total', 1000000).html(1000000); // add total value of 1000000
    $(".txt").each(function(){
        $(this).keyup(function(){
            calculateSum();
        });
    });
});
function calculateSum(){
    var $sum = $("#sum");
    var sum = parseInt($sum.data('total'), 10); // get total value
    $(".txt").each(function(){
        if (!isNaN(this.value) && this.value.length != 0) {
            sum -= parseFloat(this.value);
        }
    });
    $sum.html(sum.toFixed(2));
}

Belachelijk stuk denk ik zo voor het simpele wat ik wil, en ik begrijp ook niet alles.. het werkt op zich wel..
Maar ook weer niet helemaal. Als ik eerst het invulveld invul, en daarna de checkboxen aanklik werkt het prima. Als ik eerst de checkboxen aanklik en daarna het invulveld invul werkt het niet goed, want dan springt het budget weer naar een miljoen. (ik snap waarom dat gebeurt).
In het eerste gedeelte van de code staan de checkboxen en in het tweede gedeelte het invulveld. Het invulveld zal altijd "terugspringen" naar een miljoen en neemt de waardes van de checkboxen niet mee.

Dit krijg ik niet opgelost.De code moet aan elkaar zeg maar, in plaats van 2 losse opdrachten. Daarnaast denk ik dat de code veel eenvoudiger kan. Misschien dat er iemand zo vriendelijk is die even naar de code wilt kijken en mij de goede weg op kan helpen?

[ Voor 4% gewijzigd door St@m op 16-08-2015 15:42 ]

[orf]

Als je het in JSFiddle zet kunnen mensen wat makkelijker meekijken: https://jsfiddle.net/xh7ze3xg/


Wat tips:

- Maak één calculate functie die de berekening doet.
- Roep de calculate functie aan na keyup of change van het formulier
- Waarom doe je een .each? Ga je nog meer tekstvelden toevoegen?
- Als je alle inputs een ID geeft, is je selector veel makkelijker

[ Voor 58% gewijzigd door orf op 16-08-2015 15:49 ]

[mrc4nl]

het lijkt mij inderdaad allemaal wel veel code, voor slechts 5 variablablen

1. startbedrag
2. joker (is dus 0 of 150000
3. extra kosten (is dus 0 of 150000)
4. bouwhandleidingen
5. resultaat


ik ben zelfs eens aan het prutsen of ik iets kan schrijven in de vorm van

resultaat=startbedrag- joker.ifchecked() - extrakosten.ifchecked() - bouwhandleidingen.

dan hoef je bij elke verandering met een checkbox/input alleen een update functie aan te roepen

[ Voor 11% gewijzigd door mrc4nl op 16-08-2015 16:05 ]

[St@m]

orf schreef op zondag 16 augustus 2015 @ 15:45:
Als je het in JSFiddle zet kunnen mensen wat makkelijker meekijken: https://jsfiddle.net/xh7ze3xg/


Wat tips:

- Maak één calculate functie die de berekening doet.
- Roep de calculate functie aan na keyup of change van het formulier
- Waarom doe je een .each? Ga je nog meer tekstvelden toevoegen?
- Als je alle inputs een ID geeft, is je selector veel makkelijker

tnx, ik ga met je tips aan de slag. Zoals gezegd is het 'geleende' code, waarschijnlijk gaat het erop neer komen dat ik dus gewoon jquery moet gaan leren
- Dat begrijp ik, dan kom ik ook niet in de problemen
- Dat begrijp ik ook
- Geen idee.. als ik .each weghaal werkt de boel al niet meer (op dit niveau werk ik, gelukkig is het hobby en niet mijn werk)
- Dat snap ik

Ik zal er vanavond eens mee bezig gaan, eerst even koken zo.

[Vidar]

Is dit wat je wilt:

code:

<div class="budget">
<h2>Resterend budget</h2>
<div class="price"><h2>&euro; <span id="sum">1000000</span></h2></div>
<hr>
<h3>bouwhandleidingen
<input type="number" id="bouw" class="txt" name="txt"></h3>
<h3>Inzet joker
<input type="checkbox" id="joker" value="150000"></h3>
<h3>Extra kosten
<input type="checkbox" id="extra" value="150000"></h3>
 </div>

code:

$(".budget").change(function () {
    
    var joker = $("#joker").attr('value')*$("#joker").is(":checked");
    var extra = $("#extra").attr('value')*$("#extra").is(":checked");
    var bouw = $("#bouw").val();
    var budget = 1000000;
    var resBudget = budget - bouw - joker - extra;
    
    $("#sum").text(resBudget);

});

[St@m]

Vidar schreef op zondag 16 augustus 2015 @ 16:11:
Is dit wat je wilt:

code:

<div class="budget">
<h2>Resterend budget</h2>
<div class="price"><h2>&euro; <span id="sum">1000000</span></h2></div>
<hr>
<h3>bouwhandleidingen
<input type="number" id="bouw" class="txt" name="txt"></h3>
<h3>Inzet joker
<input type="checkbox" id="joker" value="150000"></h3>
<h3>Extra kosten
<input type="checkbox" id="extra" value="150000"></h3>
 </div>

code:

$(".budget").change(function () {
    
    var joker = $("#joker").attr('value')*$("#joker").is(":checked");
    var extra = $("#extra").attr('value')*$("#extra").is(":checked");
    var bouw = $("#bouw").val();
    var budget = 1000000;
    var resBudget = budget - bouw - joker - extra;
    
    $("#sum").text(resBudget);

});

Dus..
Dat is inderdaad wat ik wil.. Super bedankt voor de hulp. Ik ga de code eens goed bekijken want het is eigenlijk raar dat ik hier uiteindelijk zelf niet achter ben gekomen. Waarschijnlijk echt veel te moeilijk gezocht.. Ga nog even kijken naar Keyup functie, want die is wel handig in deze als je geen checkboxes aanvinkt.

[Vidar]

Mooi zo, succes.

[orf]

Als er dan toch met complete voorbeelden gegooid wordt: Misschien heb je hier qua code nog iets aan:

https://jsfiddle.net/xh7ze3xg/2/

JavaScript:

$('#joker, #extra, input[name=txt]').on('change keyup', function(){

    $('#sum').html(
        
        1000000
        
        - Number($('input[name=txt]').val())
        - Number($('#joker').is(':checked') ? $('#joker').val() : 0)
        - Number($('#extra').is(':checked') ? $('#extra').val() : 0)
    );
});

$('input[name=txt]').change();

[St@m]

Ok, ook super bedankt. Het was echt niet mijn intentie om naar code te vragen want ik weet dat dat niet gewenst is. Maar goed, ik heb in ieder geval wat begrijpend code lezen te doen vanavond! Dank allen voor de hulp.

[mrc4nl]

het kan ook zonder jquery -> http://mrc4.nl/meuk/budget.html

het is misschien niet zo kort als dat ik had gedacht maar wel een heel stuk simpeler

code:

        var resultaat= 1000000;
var beginwaarde= 1000000;
var bouwhandleidingen =0;
var jokerwaarde =0;
var extrawaarde =0;
var jokerelement = document.getElementById("joker");
var extraelement = document.getElementById("extra");


function updateberekening() {
var bouwhandleidingen = document.getElementById("bouw").value;

     if(jokerelement.checked){jokerwaarde=150000;}
else{jokerwaarde=0; // resetfunctie
    }

 if(extraelement.checked){extrawaarde=150000;}
    else{extrawaarde=0; // resetfunctie
        }
    
    resultaat= beginwaarde-bouwhandleidingen-jokerwaarde-extrawaarde;
    document.getElementById("sum").innerHTML = resultaat;
}

updateberekening();

[St@m]

Tnx! Ik ga jouw oplossing ook eens bekijken!

[R4gnax]

Vidar schreef op zondag 16 augustus 2015 @ 16:11:
Is dit wat je wilt:
[...]

orf schreef op zondag 16 augustus 2015 @ 16:34:
Als er dan toch met complete voorbeelden gegooid wordt: Misschien heb je hier qua code nog iets aan:
[...]

Jongens, jongens toch.
Als je het dan toch met jQuery gaat doen; doe het dan ook zonder die expliciete IDs. Nergens voor nodig als je gewoon de serializeArray functie kunt gebruiken.

HTML:

<fieldset class="budget">
  <legend>Resterend budget</legend>
  <span class="price">€ 1000000</span>
  <hr />
  <label>Kosten bouwhandleidingen: <input type="number" name="txt" value="0" min="0" /></label><br />
  <label><input type="checkbox" name="joker" value="150000" /> Inzet joker</label><br />
  <label><input type="checkbox" name="extra" value="150000" /> Extra kosten</label><br />
</fieldset>

JavaScript:

$( ".budget" ).on( "change", function( event ) {
  var
    sum  = 1000000,
    data = $( this ).serializeArray();
    
  $.each( data, function() { sum -= Number( this.value ) || 0; });
  $( ".price", this ).text( "€ " + sum );
});

http://jsfiddle.net/bckwdoxd

[incaz]

R4gnax schreef op maandag 17 augustus 2015 @ 20:53:
[...]

Jongens, jongens toch.
Als je het dan toch met jQuery gaat doen; doe het dan ook zonder die expliciete IDs. Nergens voor nodig als je gewoon de serializeArray functie kunt gebruiken.

Dat kan, maar in hoeverre is dat beter? Performance is nauwelijks een issue bij iets met vier velden, en onderhoudbaarheid is beperkt want zodra je een getal op zou willen tellen kun je niet eenvoudig een veld bijvoegen en je berekening aanpassen, en moet je er helemaal opnieuw over nadenken.

Omdat het om een stuk code gaat dat niet al geschreven wordt door iemand die niet dagelijks in javascript goochelt, ga ik er vanuit dat ook het onderhoud vooral in handen zal zijn van iemand die niet teveel de diepte in wil gaan. Soms is een minder 'elegante' oplossing wel gewoon lekker duidelijk.

[HendrikN]

Daarnaast zal iemand zonder ervaring met jQuery écht geen idee hebben wat er in het voorbeeld van R4gnax gebeurt, dan ga ik persoonlijk liever voor de explicitere code van orf.