onChange Functie

Jeboem · 20 nov 2007

Hoi Allemaal,

Ik had even een vraagje over javascript waar ik totaal een leek in ben.
Ik ben bezig voor iemand om online facturen te maken via een site.
Nu is de bedoeling dat hij de inkoopprijs invoert en een verkoopprijs invoert en dat
dan automatisch de winstmarge wordt uitgerekend.
Dit is mij naar veel zoeken en ploeteren gelukt.
Maar nu is het ook de bedoeling dat als de inkoop en de winstmarge wordt ingevuld hij
dan automatisch de verkoopprijs uitrekend. Ik heb al veel dingen geprobeerd maar dat wil nog niet echt lukken. Hoe kan ik dit het best aanpakken?

Dit is het scriptje wat ik tot nu toe heb:

Code:

<html>
<head>
<title>Test pagina - Online Factureren</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<script language=JavaScript>
function changeNummer()
  {
var inkoop = document.artikelForm.inkoop.value 
var verkoop = document.artikelForm.verkoop.value 
var x = document.artikelForm;
    if (inkoop == 0) {
  	  x.winstmarge.value = '0';}
  	else
  	{
	  if (verkoop == 0) {
        x.winstmarge.value = '0';}
      else {
        x.winstmarge.value = 100 * (verkoop - inkoop) / inkoop;}
    }
  }
  
   
  </script>
  <table border=0 cellspacing=1 width=100% class=tabel>
  <form method=post enctype="multipart/form-data" name=artikelForm">
    
      <tr>
        
      <td width=200>Inkoop</td>
		<td><input type=text name=inkoop size="10" value='' >
		</td>
	  </tr>
      <tr>
        
      <td width=200>Verkoop</td>
		<td><input type=text name=verkoop size=10 value="" onChange="changeNummer()"></td>
	  </tr>
      <tr>
        <td width=200>Winstmarge</td>
		<td><input type=text name=winstmarge size=3 value="" onChange="changeNummer1()"></td>
	  </tr>
	  </table>
</body>
</html>

Alvast bedankt voor de hulp!
greetz Jeboem

Egel · 20 nov 2007

Hier ging het mis: name=artikelForm" maar 1x ".

Met nog parseFloat om de text uit de invulvelden om te zetten in een getal:

PHP:

<html>
 <head>
  <title>Test pagina - Online Factureren</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <script type="text/javascript">
   function changeNummer() {
    var x = document.artikelForm;
    var inkoop = parseFloat(x.inkoop.value);
    var verkoop = parseFloat(x.verkoop.value);
    if (inkoop == 0 || verkoop == 0) {
     x.winstmarge.value = 0;
     } else {
     x.winstmarge.value = Math.round(100 * (verkoop - inkoop) / inkoop);
     };
    };
  </script>
 </head>
 <body>
  <table border="0" cellspacing="1" width="100%" class="tabel">
  <form method=post enctype="multipart/form-data" name="artikelForm">
   <tr>
    <td width=200>Inkoop</td>
    <td><input type="text" name="inkoop" size="10" value="0" onkeyup="changeNummer()"></td>
   </tr><tr>
    <td width=200>Verkoop</td>
    <td><input type="text" name="verkoop" size="10" value="0" onkeyup="changeNummer()"></td>
   </tr><tr>
    <td width=200>Winstmarge</td>
    <td><input type="text" name="winstmarge" size="4" value="0" readonly> %</td>
   </tr>
  </form>
  </table>
 </body>
</html>

Vr.Gr. Egel.

Jeboem · 21 nov 2007

Hoi Egel,

Het script wat jij gemaakt hebt is al 1000x beter :thumb: Dank daarvoor!
Ik had er nogal wat schoonheid foutje inzitten....

Maar mijn bedoeling was dat het script 2 verschillende rekenfunctie's gebruikt.
1. voor het berekenen van de winstmarge. aan de hand van de inkoop- en de verkoopprijs
2. voor het berekenen van de verkoop prijs aan de hand van de inkoopprijs en de winstmarge.

Uiteraard ben ik verder gegaan met het geen dat jij gemaakt hebt.
Heb enkele dingen veranderd en het werkt ook nog eens bijna

Mischien weet jij de goede oplossing?
het princiepe werkt nu wel. Maar door de Onkeyup functie worden de waardes dus steeds veranderd en raakt hij geloof ik in een soort van loopje.

Ik hoop dat jij mij verderd kunt helpen want ik heb eigenlijk geen oplossingen meer.
Ideeën zijn op helaas....

hier het script wat ik nu heb:

PHP:

<html> 
<head> 
  <title>Test pagina - Online Factureren</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
  <script type="text/javascript"> 
   function changeNummer() { 
    var a = document.artikelForm; 
    var inkoop = parseFloat(a.inkoop.value); 
    var verkoop = parseFloat(a.verkoop.value); 
	var winstmarge = parseFloat(a.winstmarge.value);
    if (inkoop == 0 || verkoop == 0) { 
     a.winstmarge.value = winstmarge; 
     } else { 
     a.winstmarge.value = Math.round(100 * (verkoop - inkoop) / inkoop); 
     }; 
    
	if (inkoop == 0 || winstmarge ==0) {
	a.verkoop.value = verkoop;
	 } else {
	a.verkoop.value = Math.round(inkoop/100*winstmarge+inkoop);
	 };
	}; 
  </script> 
</head> 
<body> 
  <table border="0" cellspacing="1" width="100%" class="tabel"> 
  <form method=post enctype="multipart/form-data" name="artikelForm"> 
   <tr> 
    <td width=200>Inkoop</td> 
    <td><input type="text" name="inkoop" size="10" value="0" onkeyup="changeNummer()"></td> 
   </tr><tr> 
    <td width=200>Verkoop</td> 
    <td><input type="text" name="verkoop" size="10" value="0" onkeyup="changeNummer()"></td> 
   </tr><tr> 
    <td width=200>Winstmarge</td> 
    <td><input type="text" name="winstmarge" size="4" value="0" onkeyup="changeNummer()"> %</td> 
   </tr> 
  </form> 
  </table> 
</body> 
</html>

Alvast bedankt voor de moeite!!!

Egel · 22 nov 2007

Zo?

PHP:

<html>
 <head>
  <title>Test pagina - Online Factureren</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <script type="text/javascript">
   function calcMargin() {
    var a = document.artikelForm;
    var inkoop = parseFloat(a.inkoop.value);
    var verkoop = parseFloat(a.verkoop.value);
    if (inkoop == 0 || verkoop == 0) {
     a.winstmarge.value = 0;
     } else {
     a.winstmarge.value = (100 * (verkoop - inkoop) / inkoop).toFixed(1);
     };
    };
   function calcSale() {
    var a = document.artikelForm;
    var inkoop = parseFloat(a.inkoop.value);
    var winstmarge = parseFloat(a.winstmarge.value);
    a.verkoop.value = (inkoop * (1 + winstmarge / 100)).toFixed(2);
    };
  </script>
 </head>
 <body>
  <table border="0" cellspacing="1" width="100%" class="tabel">
  <form method=post enctype="multipart/form-data" name="artikelForm">
   <tr>
    <td width=200>Inkoop</td>
    <td><input type="text" name="inkoop" size="10" value="0" onkeyup="calcMargin()"></td>
   </tr><tr>
    <td width=200>Verkoop</td>
    <td><input type="text" name="verkoop" size="10" value="0" onkeyup="calcMargin()"></td>
   </tr><tr>
    <td width=200>Winstmarge</td>
    <td><input type="text" name="winstmarge" size="5" value="0" onkeyup="calcSale()"> %</td>
   </tr>
  </form>
  </table>
 </body>
</html>

Dat werkt met twee functies zoals je ook al eerder had.

Als de in- of verkoopprijs verandert wordt de winstmage berekent met calcMargin(), als de winstmarge verandert de verkoopprijs met calcSale().

Wat ook nog zou kunnen is dat als de inkoopprijs verandert, de verkoopprijs wordt berekent met behulp van de marge. Gewoon onkeyup="calcSale()" bij de eerste onkeyup.

Vr.Gr. Egel.

onChange Functie

Jeboem

Gebruiker

Egel

Terugkerende gebruiker

Jeboem

Gebruiker

Egel

Terugkerende gebruiker

Nieuwste berichten

Wij waarderen jouw privacy