PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
P

Optelscript, textveld toevoegen

Door Paul Groenewegen op 29-09-2017 07:22 gewijzigd op 29-09-2017 10:36
2.549 views
Hallo,

Onderstaand "optelscript" zorgt er voor dat alles optelt en wil graag een "Textveld" / onderstaand stukje hier aan toevoegen.
Graag wil ik dat de getallen die dan ingevuld worden bij het totaal bedrag opgeteld wordt.

Weet iemand de scriptcode om dit werkend te krijgen?

Alvast bedankt!!!!


<tr>
        <td width="98%" height="12" colspan="3">
		<font face="Verdana">Hoeveel zijn (ongeveer) je reiskosten? &gt;&gt; 
		</font><span style="font-family: Verdana; font-size: 12pt">
		<font face="Verdana" size="3">
		<input type="text" name="Reiskosten" id="Reiskosten_"
		</font></span></td>
      </tr>



<html>
<head>
</head>
<script >
function calculateTotals ()
{
  nCost1 = 1.5;
  nCost2 = 1.5;
  nCost3 = 1.5;
  nCost4 = 10;
  nCost5 = 15;
  nCost6 = 15;
  nCost52 = 3.5;
  nCost54 = 3.5;
  nTotal = 0;
  nConsumptiebon = 1.5;
  
  //alert("Start the damn thing");
  
  if (document.getElementById("Activiteit1_").checked )
  {
    nTotal = nTotal + nCost1;
  }

  if (document.getElementById("Activiteit2_").checked )
  {
    nTotal = nTotal + nCost2;
    }

  if (document.getElementById("Activiteit3_").checked )
  {
    nTotal = nTotal + nCost3;
  }

  if (document.getElementById("Activiteit4_").checked )
  {
    nTotal = nTotal + nCost4;
 
  }
  
  if (document.getElementById("Activiteit5_").checked )
  {
    nTotal = nTotal + nCost5;
  }
  
  if (document.getElementById("Activiteit6_").checked )
  {
    nTotal = nTotal + nCost6;
  }
  
  if (document.getElementById("Slaapzak_huren").checked && document.getElementById("Activiteit6_").checked )
  {
    nTotal = nTotal + nCost52;
  }
    
  if (document.getElementById("Luchtbed_huren").checked && document.getElementById("Activiteit6_").checked )
  {
    nTotal = nTotal + nCost54;
        
  }
  eBon = document.getElementById("Consumptiebonnen");
  nAantalBonnen = eBon.options[eBon.selectedIndex].value;
  //alert(nAantalBonnen);
  
  nTotal = nTotal + (nAantalBonnen * nConsumptiebon);
  
  //alert("Total=" + nTotal);
  document.getElementById("Totaal_bedrag").value = nTotal.toFixed(2);
}
</script>
<!--------------------function calculateTotal_Consumptiebonnen ()-------------------------->
<script >
function calculateTotal_Consumptiebonnen ()
{
  nCost1 = 1;
  nCost2 = 1;
  nCost3 = 1;
  nCost4 = 1;
  nCost5 = 5;
  nCost6 = 0;
  nCost52 = 0;
  nCost54 = 0;
  nTotal = 0;
  nConsumptiebon = 1;
  
  //alert("Start the damn thing");
  
  if (document.getElementById("Activiteit1_").checked )
  {
    nTotal = nTotal + nCost1;
  }

  if (document.getElementById("Activiteit2_").checked )
  {
    nTotal = nTotal + nCost2;
    }

  if (document.getElementById("Activiteit3_").checked )
  {
  
    nTotal = nTotal + nCost3; 
  }

  if (document.getElementById("Activiteit4_").checked )
  {
    nTotal = nTotal + nCost4;

  }
  if (document.getElementById("Activiteit5_").checked )
  {
    nTotal = nTotal + nCost5;
    
  }
  if (document.getElementById("Activiteit6_").checked )
  {
    nTotal = nTotal + nCost6;

  }
  if (document.getElementById("Slaapzak_huren").checked && document.getElementById("Activiteit6_").checked )
  {
    nTotal = nTotal + nCost52;
  
  }
  if (document.getElementById("Luchtbed_huren").checked && document.getElementById("Activiteit6_").checked )
  {
    nTotal = nTotal + nCost54;
          
  }
  eBon = document.getElementById("Consumptiebonnen");
  nAantalBonnen = eBon.options[eBon.selectedIndex].value;
  //alert(nAantalBonnen);
  
  nTotal = nTotal + (nAantalBonnen * nConsumptiebon);
  
  //alert("Total=" + nTotal);
  document.getElementById("Totaal_Consumptiebonnen").value = nTotal.toFixed(2);
}
</script>
<!------------------------------------------------------------------------->
<body background="../../info/bestanden/achtergrond.gif">

<html>

<body background="../../info/bestanden/achtergrond.gif">
 
    <table border="0" width="93%" height="242" id="table1">
      <tr>
        <td width="98%" height="12" colspan="3">
		</td>
      </tr>
      <tr>
        <td width="98%" height="12" colspan="3">
		<font face="Verdana"><b>Hoeveel zijn (ongeveer) je reiskosten?</b> &gt;&gt; 
		</font><span style="font-family: Verdana; font-size: 12pt">
		<font face="Verdana" size="3">
		<input type="text" name="Reiskosten" id="Reiskosten_"
		</font></span></td>
      </tr>
      <tr>
        <td width="98%" height="12" colspan="3">
		<font face="Verdana">&nbsp;
		</font>
		</td>
      </tr>
      <tr>
        <td width="98%" height="12" colspan="3">
		<font face="Verdana" size="3"><span style="font-family: Verdana; font-size: 12pt">
		<input type="checkbox" name="Activiteit1" id="Activiteit1_" value="Activiteit 1: Wandeling"onclick="javascript:calculateTotals(), calculateTotal_Consumptiebonnen ();"></span></font><font face="Verdana"><b>Activiteit (1): 
		Wandeling&nbsp;(incl. 1 consumptie)</b></font></td>
      </tr>
      <tr>
        <td width="98%" height="12" colspan="3">
		<font face="Verdana">&nbsp;</font></td>
      </tr>
      <tr>
        <td width="98%" height="12" colspan="3">
		<font face="Verdana" size="3"><span style="font-family: Verdana; font-size: 12pt">
		<input type="checkbox" name="Activiteit2" id="Activiteit2_" value="Activiteit 2: Lunchen"onclick="javascript:calculateTotals(), calculateTotal_Consumptiebonnen ();"></span></font><font face="Verdana"><b>Activiteit (2): 
		Lunchen (incl. 1 consumptie)</b></font></td>
      </tr>
      <tr>
        <td width="98%" height="12" colspan="3">
		<font face="Verdana">&nbsp;&nbsp;</font></td>
      </tr>
      <tr>
        <td width="98%" height="12" colspan="3">
		<font face="Verdana" size="3"><span style="font-family: Verdana; font-size: 12pt">
		<input type="checkbox" name="Activiteit3" id="Activiteit3_" value="Activiteit 3: Kasteel Muiderslot"onclick="javascript:calculateTotals(), calculateTotal_Consumptiebonnen ();"></span></font><b><font face="Verdana">Activiteit 
		(3): Spellenmiddag casino- en 
		gezelschapsspellen </font></b><font face="Verdana"><b>+ 1 consumptie</b></font></td>
      </tr>
      <tr>
        <td width="98%" height="12" colspan="3">
		<font face="Verdana">&nbsp;</font></td>
      </tr>
      <tr>
        <td width="98%" height="12" colspan="3">
		<table border="0" width="99%" cellspacing="0" cellpadding="0">
			<tr>
				<td><font face="Verdana" size="3">
				<span style="font-family: Verdana; font-size: 12pt">
		<input type="checkbox" name="Activiteit4" id="Activiteit4_" value="Activiteit 4: Diner"  onclick="javascript:calculateTotals(), calculateTotal_Consumptiebonnen ();"></span></font><font face="Verdana"><b>Activiteit (4): 
		Diner (incl. 1 consumptie)</b></font></td>
			</tr>
			<tr>
				<td width="87%">&nbsp;</td>
			</tr>
		</table>
		</td>
      </tr>
      <tr>
        <td width="98%" height="12" colspan="3">
		<font face="Verdana" size="3"><span style="font-family: Verdana; font-size: 12pt">
		<font size="3">
		<input type="checkbox" name="Activiteit5" id="Activiteit5_" value="Activiteit 5: Spellenavond"onclick="javascript:calculateTotals(), calculateTotal_Consumptiebonnen ();"></font></span></font><font face="Verdana"><b>Activiteit (5): 
		Feest + 5 consumpties</b></font></td>
      </tr>
      <tr>
        <td width="98%" height="12" colspan="3">
		<font face="Verdana">&nbsp;Hoeveel consumpties (drankjes en broodjes) 
		denk je tijdens het feest te bestellen? &gt;&gt;
		</font>
				<font face="Verdana" size="3">
				<span style="font-family: Verdana; font-size: 12pt">
		<select size="1" id="Consumptiebonnen" name="Consumptiebonnen" onchange="javascript:calculateTotals(), calculateTotal_Consumptiebonnen ();">
		<option value="0">5</option>
		<option value="1">6</option>
		<option value="2">7</option>
		<option value="3">8</option>
		<option value="4">9</option>
		<option value="5">10</option>
		</select></span></font></td>
      </tr>
      <tr>
        <td width="98%" height="12" colspan="3">
		<table border="0" width="98%" cellspacing="0" cellpadding="0">
			<tr>
				<td colspan="3">
		&nbsp;</td>
			</tr>
			<tr>
				<td colspan="3">
		<font face="Verdana" size="3"><span style="font-family: Verdana; font-size: 12pt">
		<font size="3">
		<input type="checkbox" name="Activiteit6" id="Activiteit6_" value="Activiteit 6: feest"onclick="javascript:calculateTotals(), calculateTotal_Consumptiebonnen ();"></font></span></font><b><font face="Verdana">Activiteit 
				(6): Overnachten incl. ontbijt</font></b></td>
			</tr>
			<tr>
				<td width="11%">
		<font face="Verdana">
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		</font></td>
				<td width="21%"><font face="Verdana" size="3">
				<span style="font-family: Verdana; font-size: 12pt">
				<font size="3">
		<input type="radio" name="Slaapzak" id="Slaapzak51" value="Eigen slaapzak" onclick="javascript:calculateTotals(), calculateTotal_Consumptiebonnen ();"></font></span></font><font face="Verdana">Eigen 
		slaapzak</font></td>
				<td width="68%"><font face="Verdana" size="3">
				<span style="font-family: Verdana; font-size: 12pt">
				<font size="3">
		<input type="radio" name="Slaapzak" id="Slaapzak_huren" value="Slaapzak huren:  €4,-" onclick="javascript:calculateTotals(), calculateTotal_Consumptiebonnen ();"></font></span></font><font face="Verdana"> Slaapzak 
		huren (</font><span style="color: rgb(34, 34, 34); font-family: Verdana; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none; background-color: rgb(255, 255, 255)">€</span><font face="Verdana">3,50)</font></td>
			</tr>
			<tr>
				<td width="11%">&nbsp;</td>
				<td width="21%">
		<font face="Verdana">
				<span style="font-family: Verdana; font-size: 12pt">
		<font size="3" face="Verdana">
		<input type="radio" name="Luchtbed" id="Slaapzak53" value="Eigen lucht- of veldbed" onclick="javascript:calculateTotals(), calculateTotal_Consumptiebonnen ();"></font></span>Eigen 
		lucht-/veldbed</font></td>
				<td width="68%">
		<font face="Verdana">
				<span style="font-family: Verdana; font-size: 12pt">
		<font size="3" face="Verdana">
		<input type="radio" name="Luchtbed" id="Luchtbed_huren" value="Lucht- of veldbed huren:  €4,-" onclick="javascript:calculateTotals(), calculateTotal_Consumptiebonnen ();"></font></span> Lucht-/veldbed huren (</font><span style="color: rgb(34, 34, 34); font-family: Verdana; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none; background-color: rgb(255, 255, 255)">€</span><font face="Verdana">3,50)</font></td>
			</tr>
		</table>
		</td>
      </tr>
      <tr>
        <td width="10%" height="12">
		<font face="Verdana">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		</font></td>
        <td width="21%" height="12">
		</td>
        <td height="12">
		</td>
      </tr>
      <tr>
        <td width="98%" height="13" colspan="3">
		<font face="Verdana"><b>Totaal bedrag:</b>
		</font>
		<font face="Verdana" size="3"><span style="font-family: Verdana; font-size: 12pt">
		<input type="text" name="Totaal_bedrag" id="Totaal_bedrag" size="12">&nbsp; </span></font>
		<span style="font-family: Verdana; ">
		<b>
		<font face="Verdana">Totaal aantal consumpties:</font></b><font face="Verdana"> </font></span><span style="font-family: Verdana; font-size: 12pt">
		<font face="Verdana" size="3">&nbsp;<input type="text" name="Totaal_Consumptiebonnen" id="Totaal_Consumptiebonnen" size="12"></font></span></td>
      </tr>
      <tr>
        <td height="7" colspan="3"><font face="Verdana">&nbsp; </font> </td>
      </tr>
      </table>


</body>

</html>

</body>

</html>

J
Jan te Pas
29-09-2017 14:25
Je zou moeten beginnen met een <FORM> en </Form> te declareren en in het document toe te voegen. Dan weet HTML tenminste dat op enter gedrukt is en dat er iets moet gebeuren. Daarna kun je de variabelen via de functions vullen met de berekeningen. Kijk maar eens naar dit voorbeeld:

<!DOCTYPE html>
<html>
<body>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

<p><strong>let op:</strong> Werkt niet in alle browsers.</p>

</body>
</html>
P
Paul Groenewegen
29-09-2017 16:40
Het gaat eigenlijk om het volgende:
Als de value al bekend is kom ik er wel uit met dat script.
In dit geval is de value nog niet bekend waardoor ik effe niet weet hoe ik dit moet aanpassen
Vandaar deze vraag :-)


@- Ariën -:
Bedankt voor je reactie!
Zal volgende keer rekening houden met de code
Helaas kon ik niet de juiste info vinden voor dit script.


@Jan te Pas
Bedankt voor je reactie!
Bij dit script hoeft er niets verzonden te worden alleen optellen waardoor onderaan direct te zien is hoeveel ze (ongeveer) kwijt zijn aan de activiteiten.
Thomas van den Heuvel
29-09-2017 20:03
Het inputveld mist in ieder geval een sluitingshaak (>).

Verder: alle data die in een formulier zit is van het type string. Als je hier in JavaScript mee wilt rekenen zul je dit om moeten zetten in een getal of breuk (zie code @Jan, hier al een voorbeeld hoe je een ingevoerd bedrag omzet in een geheel getal (parseInt())).

Dan is er nog de bijkomstigheid dat mensen mogelijk hun bedrag opgeven met een komma (,) als scheidingsteken. Het decimale scheidingsteken in JavaScript en scriptingtalen is doorgaans standaard een punt (.), tenzij er op een of andere manier ondersteuning is voor een dergelijke localisatie (van de vorm van bedragen, datums, et cetera).

Als je wilt dat hier geen verwarring over kan bestaan zou je op voorhand twee velden kunnen introduceren: een voor euro's, en een voor centen. Of alles in eurocenten kunnen opgeven, maar dat is mogelijk minder gebruiksvriendelijk / gebruikelijk.

Waar je dus waarschijnlijk naar op zoek bent zijn functies als parseInt(), parseFloat() et cetera, om waarden uit formulieren geschikt te maken (conversie van string naar een waarde) om hiermee te kunnen rekenen.
P
Paul Groenewegen
30-09-2017 16:09 gewijzigd op 30-09-2017 16:10
@Thomas
Bedankt voor je uitleg!
Graag zou ik dit gelijk willen toepassen maar het probleem ligt bij mij dat ik hier niets van begrijp. :-(

Het script heb ik jaren terug een keer gekregen en pas deze aan d.m.v kopieren en plakken.
Ik heb helaas niet de kennis om het stukje script waar ik momenteel naar op zoek ben zelf te schrijven.

Reageren

Inloggen om te reageren