Hoe eenvoudige vermenigvuldiging maken (met JS) ?

Status
Niet open voor verdere reacties.
L

leifoet

Gebruiker
Lid geworden
7 okt 2007
Berichten
326
Zoek de eenvoudigste mogelijkheid om een vermenigvuldiging te maken in een formulier.

Hierin wordt bij 'aantal' een getal (cijfer A) ingevoerd met <imput text>
en bij 'bedrag' zou automatisch het resultaat moeten verschijnen van A*X.
A en (A*X) worden tenslotte bij de <imput submit> weggeschreven naar de database.

Heb wat geknutseld met een JS-script code maar levert geen goed resultaat.
Moet zoiets met JS of kan het ook met ASP ?

Dank voor tips.
 
Moet zoiets met JS of kan het ook met ASP ?
Klik om te vergroten...
Met JS kan je de berekening direct in de browser uitvoeren, ook als je een getal wijzigt.
Met ASP zal het formulier eerst verstuurd moeten worden, op de server wordt de berekening gedaan, en het antwoord wordt daarna op de pagina teruggestuurd.
Of een combinatie van JS+AJAX+ASP maar dat zal niet de bedoeling zijn bij een "simpele" berekening.

Voorbeeld in JS
Code: 
<form>
  <br>Aantal: <input type="text" id="aantal" onkeyup="bereken()">
  <br>Per stuk: <input type="text" id="prijs" onkeyup="bereken()">
  <br>Bedrag: <span id="bedrag">-.--</span>
</form>

<script>
function bereken () {
  let getalA = document.getElementById("aantal").value;
  let getalX = document.getElementById("prijs").value;
  let result = parseFloat(getalA) * parseFloat(getalX);
  if (result) document.getElementById("bedrag").innerText = result.toFixed(2);
}
</script>
 
Laatst bewerkt:
Met JS kan je de berekening direct in de browser uitvoeren, ook als je een getal wijzigt.
Klik om te vergroten...
Heb dus het voorbeeld gevolgd - maar prijs is géén input = ligt vast.
Hoe moet de code dan worden om met een vaste prijs van bijvoorbeeld 20,00 telkens het correcte bedrag (aantal*20) te bekomen ?
O.a. hier wijzigen ?
Code: 
let getalX = document.getElementById("prijs").value;

Dank.
 
Laatst bewerkt:
Dan kan de <input id="prijs"> regel weg en in JS geef je een vaste prijs, bijvoorbeeld
Code: 
let getalX = 12.49;

Gebruik een punt als je decimalen gebruikt. Als je ook een , wilt toestaan als decimaalteken dan kan bij de input value de .replace(",", ".") bij worden gezet. Hetzelfde (maar dan omgekeerd) kan je bij het resultaat doen. Het stukje .toFixed(2) zorgt ervoor dat het resultaat met 2 decimalen wordt getoond.

Update. De code snippet waarbij je ook de komma mag gebruiken en klein bugje eruit gehaald
Code: 
<form>
  <br>Aantal: <input type="text" id="aantal" onkeyup="bereken()">
  <br>Bedrag: &euro; <span id="bedrag">-.--</span>
</form>

<script>
function bereken () {
  let getalX = "7,49";
  let getalA = document.getElementById("aantal").value;
  let result = parseFloat(getalA.replace(",", ".")) * parseFloat(getalX.replace(",", "."));
  if (result) result = result.toFixed(2); else result = "-,--";
  document.getElementById("bedrag").innerText = result.replace(".", ",");
}
</script>
 
Laatst bewerkt:
De aangereikte JS-voorbeelden werken perfect maar het wegschrijven naar de database van de resultaten (als aantal en bedrag) wil maar niet lukken.
Steeds krijg ik deze errorcode (op het punt waar bijvoorbeeld de request.form(Bedrag) wordt geüpdatet)
Code: 
Provider error '80020005' Type mismatch.
Aantal / bedrag en tabelvelden zijn numeriek - test met isnumeric(output) geeft als resultaat true.
Zijn er aanwijzingen wat er zou kunnen misgaan ?
 
Laatst bewerkt:
Hoe schrijf je het weg?
Als ik zoek op die error, dan zie ik een hoop relevante oplossingen hierover.
 
Oorzaak is de .toFixed(2) , die maakt van een getal een string en toont het daarna met 2 decimalen.
Hieronder aangepast. De variabele dbNumber is een float number. Als de invoerwaarde onjuist is dan is dbNumber : null
Code: 
<script>
function bereken () {
  let getalX = "7,49";
  let getalA = document.getElementById("aantal").value;
  let result = parseFloat(getalA.replace(",", ".")) * parseFloat(getalX.replace(",", "."));
  let dbNumber = (result) ? Math.round((result + Number.EPSILON) * 100) / 100 : null;
  if (result) result = result.toFixed(2); else result = "-,--";
  document.getElementById("bedrag").innerText = result.replace(".", ",");
}
</script>

Voorbeeld: Aantal is 2,75 Prijs is 7,49 dbNumber wordt dan float 20.6 (met punt) en op scherm staat string 20,60 (met komma)

Het lijkt dat deze opzet niet geschikt is voor het wegschrijven in een db omdat bij elke typfout "null" in de db wordt geschreven. Een oplossing hiervoor is een submit button waarbij je de waarde pas in de db wegschrijft nadat het formulier is verstuurd.
 
Laatst bewerkt:
Het lijkt dat deze opzet niet geschikt is voor het wegschrijven in een db omdat bij elke typfout "null" in de db wordt geschreven.
Klik om te vergroten...
Met de bijgevoegde coderegel "let dbNumber = (... " is het wegschrijf-probleem onveranderd gebleven.

Een oplossing hiervoor is een submit button waarbij je de waarde pas in de db wegschrijft nadat het formulier is verstuurd.
Klik om te vergroten...
Alle inputs / options worden op het einde van het formulier met een submit knop weggeschreven - pas dan wordt de database geüpdatet (... niet Aantal en Bedrag).
Overigens doet zich nu een gelijkaardig probleem voor inzake <input type="date">. Het wegschrijven van nieuwe datum lukt - de bestaande datum terug oproepen lukt ook - maar deze bestaande datum wijzigen lukt niet => zelfde error '80020005 Type mismatch'. Zou dit bijkomend probleem ook te maken hebben met de in de quote hierboven vermelde ''typefout" (=wijziging van de datum ?) die ook hier "null" genereert ?

Kan ik nog iets oplossend proberen ?
 
Waar komt die error vandaan? Van je database?
 
In de JS is variabele result een string en variabele dbNumber een float, maar dit is alleen binnen JS. De html velden in het formulier geven na het versturen beide een string die je zelf in de backend zal moeten omzetten in het juiste data type voor de db.
 
Laatst bewerkt:
Heb ik het goed begrepen als ik "request.form()" van onderstaande velden (aantal - bedrag - datum) zou moeten converteren nà de input type="submit" én vooraleer te kunnen opslaan in het juiste formaat in de db :
- aantal en bedrag : naar numeric ?
- datum : naar datumformaat ?
Is het null-probleem (typefout) hier niet meer aan de orde ?
Dank.
 
Yep, na het versturen met Submit lees je de velden uit, dan valideren en converteren naar goede datatype, en dan opslaan in db.
Dan kan de regel die begint met let dbNumber uit de JS worden gehaald.
 
Het wegschrijven blijft een probleem - na conversie van (string>numeric en string>datum en schrapping van 'Let dbNumber') zie ik geen beweging in die velden.
Had eerder al getest op numeric - cfr. sub #6 en daar was het resultaat al true (zonder conversie).

Zou het bijgevolg kunnen dat de 'input' per saldo voor deze 3 velden telkens een null-waarde doorstuurt ?
Stel dat dit zo is, wordt dan de initiële 0 (in bijvoorbeeld het veld 'aantal') vervangen door een blanco veld na invoer van een/de null-waarde ? - nu blijft een 0 in het veld staan
Of waar kan de bug nog schuilen ?
 
In de backend gebruik je request.form(), dat is ASP waar ik je niet mee kan helpen. Heb je in de html van formulier bij #5 een name="...." toegevoegd aan de input zodat je deze in ASP kan uitlezen? Uit deze doc begrijp ik dat je een method="post" formulier gebruikt. Je kan alleen een input (input Aantal) in ASP uitlezen, het berekende bedrag niet tenzij je een <input type="hidden" name="totaalbedrag"> toevoegt in het formulier en de waarde hiervan invult m.b.v. JS code. In de backend zal deze waarde een string zijn die je in ASP om moet zetten in het juiste data type.
 
Laatst bewerkt:
Output => request.form() / method = post (OK heeft zijn 'dienst' bewezen)
inputcode voor aantal :
<input type="text" id="aantal" value="<%=rs("aantal")%>" onkeyup="bereken()">
=> heb nu id="aantal" vervangen door NAME="aantal" => dank bron om mij hierop te wijzen
=> "aantal" wordt nu wél weggeschreven (en ook zonder bijkomende conversie)
=> maar : de visuele berekening (vermenigvuldiging) gebeurt nu niet meer - bedrag is/blijft dus 0 (dit bedrag wordt ook als 0 weggeschreven)
=> mijn gebruikte input-hidden-code was/is <INPUT TYPE="hidden" value="<%=rs("Bedrag")%>" name="bedrag">
Moet in het JS-script (head) eventueel een aanpassing gebeuren na deze vervanging van 'id' in 'name' ?

Als de JS-berekening (bedrag) nu terug kan uitgevoerd wordt blijft alléén het niet-wegschrijven van de gewijzigde datum over.
Dank voor tips.
 
Laatst bewerkt:
Als de JS-berekening (bedrag) nu terug kan uitgevoerd wordt blijft alléén het niet-wegschrijven van de gewijzigde datum over.
Klik om te vergroten...
Heb intussen het datumprobleem kunnen oplossen => typefout in name => gewijzigde datums worden nu perfect weggeschreven (vanuit <input date>).
Nu nog de JS-berekening cfr. hierboven sub #17 ?
 
Je hebt ze beide nodig, zowel de id="..." als de name="..."
Code: 
<input type="text" id="aantal" name="aantal" value="<%=rs("aantal")%>" onkeyup="bereken()">

De id is een referentie voor javascript (functionaliteit), voor css (vormgeving) en voor html (een anker).
De name is de naam van het betreffende formulierveld, de waarde hiervan kan je met Request.Form("aantal") uitlezen.
 
Dank bron voor de info - weer bijgeleerd.
De berekening van het bedrag (aantal*prijs) is OK - het wegschrijven van Aantal eveneens OK (cfr. sub #19 met 'id' in de input code)

Maar het wegschrijven van het bedrag / resultaat van de berekening wil niet lukken met deze code regels
Code: 
<br><span Name="Bedrag" id="Bedrag">0,00</span>	
<INPUT TYPE="hidden" NAME="Bedrag" value="<%=rs("Bedrag")%>">
ook getest :
Code: 
<INPUT TYPE="hidden" id="Bedrag" NAME="Bedrag" value="<%=rs("Bedrag")%>">

Zou de/een integratie van de 'span-regel' in de 'input-regel' eventueel soelaas kunnen bieden ? (of is dat eerder wishful thinking)
We zijn er bijna, helaas nog niet ...
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan