Zoek een eenvoudige rekentool voor 2 inputs

Status
Niet open voor verdere reacties.
L

leifoet

Gebruiker
Lid geworden
7 okt 2007
Berichten
326
De input van "aantal A" (in vakje A) zou automatisch (=zonder knop) het totaal A*prijsA moeten genereren in het naastliggende totaalvakje A
en bijvoorbeeld er net onder zou
de input van "aantal B" (in vakje B) automatisch het totaal B*prijsB moeten genereren in het naastliggend totaalvakje B

Ik vermoed dat dit met Javascript kan geïntegreerd worden in een webpagina maar ben daar (nog) niet bedreven in
tenzij er nog andere en eenvoudiger technieken voorhanden zijn.
Dank voor tips.
 
Je kan gebruik maken van pure Javascript; of Javascript/jQuery; of Javascript/Ajax & PHP/webserver.

Een oplossing in Javascript
Je gebruikt in het linker vakje het event "onchange" waarmee je mbv een function het totaal berekent en het resultaat in het rechter vakje zet.
Zelf nu even geen tijd voor een voorbeeld. Google even op onchange dan vind je voorbeelden.
 
Uitgewerkt voorbeeldje met commentaar erbij. Kan je hiermee verder?
Code: 
<form>
<input id="aantalA" value="">
<p>Prijs A: &euro; <span id="prijsA">12.75</span></p>
<p>Totaalprijs A: &euro; <span id="totaalA">0.00</span></p>
</form>

<script>
// doe de function als een toets wordt losgelaten
document.getElementById("aantalA").addEventListener("keyup", function() {
    // wat is de prijs bij id="prijsA"
    var prijs = document.getElementById("prijsA").innerHTML;
    // wat is het aantal? this.value is de value van getElementById("aantalA") een paar regels hierboven
    var aantal = this.value;
    // berekening van totaalprijs
    var totaalprijs = aantal * prijs;
    // bij ongeldige waarde '0' invullen
    if (!totaalprijs) totaalprijs = 0;
    // zet totaalprijs bij id="totaalA", toon 2 decimalen
    document.getElementById("totaalA").innerHTML = totaalprijs.toFixed(2);
});
</script>
Suc6. Have fun.
 
Dank bron - begrijpelijke code werkt perfect.
Variante : voor input van B heb ik script en form gekopieerd en A gewijzigd in B, tenzij hiervoor toch elegantere combinaties mogelijk zouden zijn ? (mijn pogingen waren alleszins een afknapper)
Dank.
 
Als een stuk code vaker voorkomt dan is 'gemeenschappelijke code' handiger en beter te onderhouden.

De code is nu zo dat
- alle inputs een class="input-aantal" hebben.
- de id mag varieren zolang er maar a/b/c achter staat. Zie html.
Code: 
<form id="berekening">
    <input id="artikel_1a" class="input-aantal" value="">
    <p>Prijs A: &euro; <span id="artikel_1b">12.75</span></p>
    <p>Totaalprijs A: &euro; <span id="artikel_1c">0.00</span></p>
    <input id="product_Xa" class="input-aantal" value="">
    <p>Prijs B: &euro; <span id="product_Xb">26.35</span></p>
    <p>Totaalprijs A: &euro; <span id="product_Xc">0.00</span></p>
</form>

<script>
function bereken (id, aantal) {
    // item is de id van de input zonder de laatste letter 'a'
    var item = id.substr(0, id.length - 1);
    var prijs = document.getElementById(item + "b").innerHTML;
    var totaal = aantal * prijs;
    if (!totaal) totaal = 0;
    document.getElementById(item + "c").innerHTML = totaal.toFixed(2);
}

// alle inputs uit formulier id="berekening"
var form = document.getElementById("berekening");
var inputs = form.getElementsByTagName("input");
// doorloop alle inputs met een een class="input-aantal"
for (i = 0; i < inputs.length; i++) {
    if (inputs[i].classList.contains('input-aantal')) {
        // voer de functie bereken(...) uit bij het event 'keyup'
        inputs[i].addEventListener("keyup", function() {
            bereken (this.id, this.value);
        });
    }
}
</script>

** info: elke id naam moet (conform w3c) binnen een webpagina uniek zijn. Een class naam mag wel meerdere keren op een pagina voorkomen.

Suc6. Have fun.
 
Laatst bewerkt:
Heb bij nader toezien toch een paar zaken over het hoofd gezien in dit scriptgebruik - moet het ook nog kunnen integreren in mijn bestaande pagina's.
=> "aantal" en "totaal" worden weggeschreven naar een databasetabel - evenals voor mijn andere string en niet-calculatiegebonden resultaten dacht ik om id="aantalA" en id="totaalA" te vervangen door mijn geijkte opslagtermen : name="requiredaantal" en name="requiredtotaal" … doch de berekening werkt niet meer - waar en moet/kan 'required…' ingepast worden ?
=> <span id="prijsA">12.75</span> moet niet getoond worden - hoe kan ik dit verbergen - ev. in script zetten ?
=> ik probeerde het <script> …. </script> in de head te plaatsen om de body overzichtelijk te houden - lukt niet (dacht dat script in head een soort overeenkomst was)
Graag nog een paar tips als het kan.
Dank
 
Laatst bewerkt:
dacht ik om id="aantalA" en id="totaalA" te vervangen door mijn geijkte opslagtermen name="requiredaantal" en name="requiredtotaal"
Klik om te vergroten...
Met name="..." kan je in php de resultaten uitlezen en in een database opslaan.
De attributen name en id hebben een verschillende betekenis, een id kan je niet in php uitlezen.
Hieronder wordt name dus gebruikt om de gegevens mee te nemen naar php en id wordt gebruikt voor de Javascript.

waar en moet/kan 'required…' ingepast worden ?
Klik om te vergroten...
Dit klinkt als php, over de werking van het formulier in php heb ik geen info.

<span id="prijsA">12.75</span> moet niet getoond worden
Klik om te vergroten...
bij <p> een style="display:none" toevoegen en dan is de prijs verborgen.

ik probeerde het <script>...</script> in de head te plaatsen om de body overzichtelijk te houden - lukt niet
Klik om te vergroten...
Klopt, het script is het formulier nog niet tegengekomen en weet niet dat het formulier bestaat.
Tegenwoordig worden scripts vlak boven </body> geplaatst, alles op de webpagina is dan bekend en belangrijker, de performance van de pagina is beter.

Je kunt alles in de head zetten als je het zo aanpast
Code: 
function bereken (id, aantal) {
    // item is de id van de input zonder de laatste letter 'a'
    var item = id.substr(0, id.length - 1);
    var prijs = document.getElementById(item + "b").innerHTML;
    var totaal = aantal * prijs;
    if (!totaal) totaal = 0;
    document.getElementById(item + "c").innerHTML = totaal.toFixed(2);
    document.getElementById(item + "d").value = totaal.toFixed(2);
}

var domReady = function(){
    var form = ....
    var inputs = ....
    for (....) {
      ....
    }
};

(function(){
    // wacht tot DOM klaar is en voer dan domReady hierboven uit
    var d=document; if(d.readyState === "complete" || (d.readyState !== "loading" && !d.documentElement.doScroll))
    {domReady();} else {d.addEventListener("DOMContentLoaded",domReady);}
})();

en in de body bij elke input een unieke name en een unieke id
Code: 
<form id="berekening" method="..." action=".....">
    <input name="requiredaantal" id="artikel_1a" value="" type="text" class="input-aantal" >
    <input name="requiredtotaal" id="artikel_1d" value="" type="hidden">
    <p style="display:none">Prijs A: &euro; <span id="artikel_1b">12.75</span></p>
    <p>Totaalprijs A: &euro; <span id="artikel_1c">0.00</span></p>
</form>

* edit: houdt de name="..." voor input's uniek (behalve bij radio input-groups en bij checkbox input-groups).
 
Laatst bewerkt:
Calculator werkt (nog) niet. Wat kan het probleem veroorzaken ?
Mogelijk oorzaken (1) mijn modules zijn nog steeds in ASP classic (geen PHP) - eerdere geteste codes gaven evenwel geen probleem (2) mogelijke syntaxfouten (haakjes ?) in onderstaande uitgeschreven test head en body ?
Dank voor tip.

<script>
function bereken (id, aantal) {
// item is de id van de input zonder de laatste letter 'a'
var item = id.substr(0, id.length - 1);
var prijs = document.getElementById(item + "b").innerHTML;
var totaal = aantal * prijs;
if (!totaal) totaal = 0;
document.getElementById(item + "c").innerHTML = totaal.toFixed(2);
document.getElementById(item + "d").value = totaal.toFixed(2);
}

var domReady = function(){
var form = document.getElementById("berekening");
var inputs = form.getElementsByTagName("input");
for for (i = 0; i < inputs.length; i++) {
if (inputs.classList.contains('input-aantal')) {
// voer de functie bereken(...) uit bij het event 'keyup'
inputs.addEventListener("keyup", function() {
bereken (this.id, this.value);
}
};

(function(){
// wacht tot DOM klaar is en voer dan domReady hierboven uit
var d=document; if(d.readyState === "complete" || (d.readyState !== "loading" && !d.documentElement.doScroll))
{domReady();} else {d.addEventListener("DOMContentLoaded",domReady);}
})();
</script>
</head>
<body>
<input name="requiredaantal" id="artikel_1a" value="" type="text" class="input-aantal" >
<input name="requiredtotaal" id="artikel_1d" value="" type="hidden">
<p style="display:none">Prijs A: &euro; <span id="artikel_1b">12.75</span></p>
<p>Totaalprijs A: &euro; <span id="artikel_1c">0.00</span></p>
</body></html>
 
Laatst bewerkt:
Wil je de code graag tussen
Code: 
[/noparse] en [noparse]
 zetten? Dat leest prettiger ;)

Alles is in Javascript, php is niet van toepassing.

Je mist de <form id="berekening"> en </form> in de html. Deze moeten echt erbij worden gezet.
Ze zijn noodzakelijk omdat form wordt opgevraagd bij getElementById("berekening");

Je mist een paar keer } in je code. Hieronder de goede code
Code: 
var domReady = function(){
    // alle inputs uit formulier id="berekening"
    var form = document.getElementById("berekening");
    var inputs = form.getElementsByTagName("input");
    // doorloop alle inputs met een een class="input-aantal"
    for (i = 0; i < inputs.length; i++) {
        if (inputs[i].classList.contains('input-aantal')) {
            // voer de functie bereken(...) uit bij het event 'keyup'
            inputs[i].addEventListener("keyup", function() {
                bereken (this.id, this.value);
            });
        }
    }
};
 
Dank => berekening gebeurt … doch met een soort 'impliciete dropdown' met een variabele reeks cijfers (en waardoor mogelijks de keyup traag reageert ?)
Calculatie.JPG
Is dat verwijderbaar ?
Cfr. ook mijn vraag van 26/12 - kan ik hiermee ook 2 calculaties uitvoeren (A en B) ?
Moet dan nog de opslagmogelijkheid naar DB testen maar heb er een goed oog in.
(Dank bron voor jouw geduld)
 
Laatst bewerkt:
berekening gebeurt .. doch met een soort 'impliciete dropdown' met een variabele reeks cijfers (en waardoor mogelijks de keyup traag reageert?)
Klik om te vergroten...
Begrijp de vraag niet helemaal? Wat bedoel je met impliciete dropdown en welke browser gebruik je?

kan ik hiermee ook 2 calculaties uitvoeren (A en B)?
Klik om te vergroten...
De code blijft hetzelfde. Zie berichtje #5 met aanpassing van berichtje #7. In de html van een formulier is name="..." bij elke input uniek anders zijn de ingevulde waardes niet te onderscheiden.
Code: 
<form id="berekening" method="post" action=".....">
    <input name="requiredaantal" id="artikel_1a" value="" type="text" class="input-aantal" >
    <input name="requiredtotaal" id="artikel_1d" value="" type="hidden">
    <p style="display:none">Prijs A: &euro; <span id="artikel_1b">12.75</span></p>
    <p>Totaalprijs A: &euro; <span id="artikel_1c">0.00</span></p>
    <input name="requiredaantal_2" id="artikel_2a" value="" type="text" class="input-aantal" >
    <input name="requiredtotaal_2" id="artikel_2d" value="" type="hidden">
    <p style="display:none">Prijs A: &euro; <span id="artikel_2b">42.95</span></p>
    <p>Totaalprijs A: &euro; <span id="artikel_2c">0.00</span></p>
</form>

Hiermee krijg je in de 'backend' 4 waardes voor je DB, namelijk de waarde van requiredaantal, requiredtotaal, requiredaantal_2, en requiredtotaal_2
 
<Begrijp de vraag niet helemaal? Wat bedoel je met impliciete dropdown en welke browser gebruik je?>
zie afbeelding - was als voorbeeld meegestuurd.
Komt voor zowel bij de test in Chrome als in Edge.
 
Wellicht werkt alles weer ok als je de html en Javascript in orde hebt gemaakt, zie #9 en #11.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan