Opgelost In een form rekenen

[pkuipers]

Hallo, ik heb een form gemaakt in html en php dat goed werkt. Nu wil ik enkel input="text" velden met elkaar laten berekenen.
Ik heb een script hiervoor gemaakt.

<script type="text/javascript">
  const PRIJZEN_PER_UUR = 44 ;//$prijzen; // <-- put your hourly price here

  function toNumber(v) {
    // supports "10,5" as well as "10.5"
    v = (v ?? "").toString().trim().replace(",", ".");
    var n = parseFloat(v);
    return Number.isFinite(n) ? n : 0;
  }

  function korting() {
    var t = toNumber(document.getElementById("tijd").value);     // minutes
    var k = toNumber(document.getElementById("korting").value);  // percent
    var p = PRIJZEN_PER_UUR;

    let u = (p / 60) * t;        // cost before discount
    u = u - (u * k / 100);       // apply discount

    document.getElementById("kosten").value = u.toFixed(2); // 2 decimals
  }
</script>

Als ik op internet test met een gedeelte van het formulier dan werkt het goed, alleen in het hele formulier NIET!
Ik zal het bestand hier aan toevoegen.

Alvast dank,
Peter

 

[pkuipers]

Hallo, nog even een toevoeging.
Zodra ik deze regel weghaalt

<form action="toebehandelform.php" method="POST" id="myfrm"  style="margin-left: 5vw; width: auto;" >

werkt het wel?

 

[bron]

Het formulier wort verstuurd met action="toebehandelform.php"
Is dat wel of niet de bedoeling?

Waar en hoe worden de functions aangeroepen?

 

[pkuipers]

Het formulier wort verstuurd met action="toebehandelform.php"
Is dat wel of niet de bedoeling?

Hallo bron, ja dat is de bedoeling.

 

[bron]

Voorbeeld

<form action="toebehandelform.php" method="POST" id="myfrm" style="margin-left: 5vw; width: auto;">
  <label>Minuten</label><input type="text" id="tijd" name="tijd">
  <br><label>Korting %</label><input type="text" id="korting" name="korting">
  <br><label>Prijs</label><input type="text" id="kosten" name="kosten" value="0.00" readonly>
  <br><button type="submit">Verstuur</button>
</form>

met Javascript

// prijs per uur
const PRIJZEN_PER_UUR = 44.00;

// conversie naar getal support "10,5" en "10.5"
function toNumber(v) {
  v = (v ?? "").toString().trim().replace(",", ".");
  let n = parseFloat(v);
  return Number.isFinite(n) ? n : 0;
}

// Prijs berekenen
function korting() {
  let t = toNumber(document.getElementById("tijd").value);     // minutes
  let k = toNumber(document.getElementById("korting").value);  // percent
  let p = PRIJZEN_PER_UUR;
  let u = (p / 60) * t;   // normale prijs
  u = u - (u * k / 100);  // korting eraf
  document.getElementById("kosten").value = u.toFixed(2); // 2 decimals
}

document.querySelector('#tijd').addEventListener("keyup", korting);
document.querySelector('#korting').addEventListener("keyup", korting);

 

[pkuipers]

Hallo bron, bedankt het werkt.

 

[bron]

Graag gedaan!

Je kan tijd en korting een type="number" geven, en kosten een value="0.00"

<input type="number" id="tijd" name="tijd">
<input type="number" id="korting" name="korting">
<input type="text" id="kosten" name="kosten" value="0.00" readonly>