optel formulier - Forum

Thijs X

10-10-2005 13:19

Ah ik zie het al. Ergens in de code verwijst hij naar een extern javascriptje. ( was jan denkik vergeten te zegge :P )
download deze ook nog ff en zet hem in dezelfde map

http://www.jankoehoorn.nl/phphulp/microapi.js

s

samet

10-10-2005 13:25

ik moet die toch als js opslaan want dat heb ik namelijk gedaan nu maar er gebeurd nog steeds nix

s

samet

10-10-2005 13:31

yes!!!!!!!!!!!!!!!!!!

hij is geluktt

hartelijk bedankt Thijs

T

Thijs X

10-10-2005 13:34 gewijzigd op 10-10-2005 13:34

Ok kopier dit allemaal en sla hem op

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">;

<html lang="nl">

<head>
<title> Optel Script </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language="javascript" type="text/javascript">
// JavaScript Document
// met dank aan Peter Paul Koch - http://www.quirksmode.org
function getObj (name)
{
if (document.getElementById) {
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all) {
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers) {
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
</script>
<script language="javascript" type="text/javascript">
// koppel een functie aan het onload event van het window
window.onload = init;

var eerste_formveld;
var art1_aantal, art2_aantal, art3_aantal, art4_aantal;
var art1_prijs, art2_prijs, art3_prijs, art4_prijs;
var art1_kosten, art2_kosten, art3_kosten, art4_kosten;

var aantal, totaal;

function init () {
eerste_formveld = new getObj ('aantal1');

eerste_formveld.obj.focus ();
eerste_formveld.obj.select ();

art1_aantal = new getObj ('aantal1');
art2_aantal = new getObj ('aantal2');
art3_aantal = new getObj ('aantal3');
art4_aantal = new getObj ('aantal4');

art1_prijs = new getObj ('prijs1');
art2_prijs = new getObj ('prijs2');
art3_prijs = new getObj ('prijs3');
art4_prijs = new getObj ('prijs4');

art1_kosten = new getObj ('kosten1');
art2_kosten = new getObj ('kosten2');
art3_kosten = new getObj ('kosten3');
art4_kosten = new getObj ('kosten4');

aantal = new getObj ('totaalaantal');
totaal = new getObj ('totaalkosten');

art1_aantal.obj.onkeyup = bereken_totaal;
art2_aantal.obj.onkeyup = bereken_totaal;
art3_aantal.obj.onkeyup = bereken_totaal;
art4_aantal.obj.onkeyup = bereken_totaal;
}

function bereken_totaal () {
aantal.obj.value = parseInt (art1_aantal.obj.value)
+ parseInt (art2_aantal.obj.value)
+ parseInt (art3_aantal.obj.value)
+ parseInt (art4_aantal.obj.value);

kosten1 = parseInt (art1_aantal.obj.value) * parseFloat (art1_prijs.obj.value);
kosten2 = parseInt (art2_aantal.obj.value) * parseFloat (art2_prijs.obj.value);
kosten3 = parseInt (art3_aantal.obj.value) * parseFloat (art3_prijs.obj.value);
kosten4 = parseInt (art4_aantal.obj.value) * parseFloat (art4_prijs.obj.value);

art1_kosten.obj.value = kosten1.toFixed (2);
art2_kosten.obj.value = kosten2.toFixed (2);
art3_kosten.obj.value = kosten3.toFixed (2);
art4_kosten.obj.value = kosten4.toFixed (2);

tot = kosten1 + kosten2 + kosten3 + kosten4;
totaal.obj.value = tot.toFixed (2);
}
</script>
</head>

<body>
<form method="post" action="">

<table>
<tr>
<th>naam</th>
<th>prijs (€)</th>
<th>aantal</th>
<th>kosten (€)</th>
</tr>

<tr>
<td>artikel 1:</td>
<td><input id="prijs1" name="prijs1" type="text" class="small right" readonly="true" value="1.30"></td>
<td><input id="aantal1" name="aantal1" type="text" class="small right" value="2" tabindex="1"></td>
<td><input id="kosten1" name="kosten1" type="text" class="small right" readonly="true" value="2.60"></td>
</tr>

<tr>
<td>artikel 2:</td>
<td><input id="prijs2" name="prijs2" type="text" class="small right" readonly="true" value="1.00"></td>
<td><input id="aantal2" name="aantal2" type="text" class="small right" value="1" tabindex="2"></td>
<td><input id="kosten2" name="kosten2" type="text" class="small right" readonly="true" value="1.00"></td>
</tr>

<tr>
<td>artikel 3:</td>
<td><input id="prijs3" name="prijs3" type="text" class="small right" readonly="true" value="4.00"></td>
<td><input id="aantal3" name="aantal3" type="text" class="small right" value="1" tabindex="3"></td>
<td><input id="kosten3" name="kosten3" type="text" class="small right" readonly="true" value="4.00"></td>
</tr>

<tr>
<td>artikel 4:</td>
<td><input id="prijs4" name="prijs4" type="text" class="small right" readonly="true" value="4.00"></td>
<td><input id="aantal4" name="aantal4" type="text" class="small right" value="1" tabindex="4"></td>
<td><input id="kosten4" name="kosten4" type="text" class="small right" readonly="true" value="1.00"></td>
</tr>

<tr>
<td>totalen:</td>
<td> </td>
<td><input id="totaalaantal" name="totaalaantal" type="text" class="small right" readonly="true" value="7"></td>
<td><input id="totaalkosten" name="totaalkosten" type="text" class="small right" readonly="true" value="8.60"></td>
</tr>
</table>
</form>
</body>
</html>

s

samet

10-10-2005 13:44

ok alles is gelukt nou heb ik een echte pittige vraag:

je heb in de eerste kolom een waarde zodat wanneer je in de tweede kolom een cijfer intikt dat hij die waarde gaat vermenigvuldigen met de waarde van de eerste kolom , maar vraag is alsvolgt :

hoe kan je ervoor zorgen dat de eerste kolom ook een invulveld word en dat wanneer ik 2 intik in de eerste kolom en 3 intik in de tweede dat het die 2 gaat vermenigvuldigen en dat je bij de derde kolom een vaste waarde heb (de prijs dus ) waarmee die nog word vermenig vuldigt

dus je krijgt dan :

2x3x €1,50

T

Thijs X

10-10-2005 13:56

Dus je wilt dat de 1ste kolom ook te varieen is?

s

samet

10-10-2005 13:56

ik maak wel een tabel is meer overzichtelijker

aantal zakken fruit per zak totaal

(invul) (invul) banaan €2
(invul) peer €1

dus je stelt je eigen fruitzak bijelkaar
dus als ik 2 zakken wil met in per zak 5 bananen en 6 peren dan krijg je een som : 5 x €2 + 6 x €1 =€ 16 per zak en dan dat 2x omdat je 2 zakken heb gekozen.

s

samet

10-10-2005 14:18

nog een ding vergete als je invult dat je 5 bananen wil dan moet er in de 3e kolom genaamd totaal €10 staan en dan helemaal aan de onderkant van heel het tabel het subtotaal.

T

Thijs X

10-10-2005 14:40 gewijzigd op 10-10-2005 14:42

Weer wat dingen bijgeleerd kweet namelijk niet egt veel van javascript :P

hier:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">;

<html lang="nl">

<head>
<title> Optel Script </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language="javascript" type="text/javascript">
// JavaScript Document
// met dank aan Peter Paul Koch - http://www.quirksmode.org
function getObj (name)
{
if (document.getElementById) {
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all) {
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers) {
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
</script>
<script language="javascript" type="text/javascript">
// koppel een functie aan het onload event van het window
window.onload = init;

var eerste_formveld;
var art1_zakken, art2_zakken, art3_zakken, art4_zakken;
var art1_aantal, art2_aantal, art3_aantal, art4_aantal;
var art1_prijs, art2_prijs, art3_prijs, art4_prijs;
var art1_kosten, art2_kosten, art3_kosten, art4_kosten;

var aantal, totaal;

function init () {
eerste_formveld = new getObj ('aantal1');

eerste_formveld.obj.focus ();
eerste_formveld.obj.select ();

art1_zakken = new getObj ('zakken1');
art2_zakken = new getObj ('zakken2');
art3_zakken = new getObj ('zakken3');
art4_zakken = new getObj ('zakken4');

art1_aantal = new getObj ('aantal1');
art2_aantal = new getObj ('aantal2');
art3_aantal = new getObj ('aantal3');
art4_aantal = new getObj ('aantal4');

art1_prijs = new getObj ('prijs1');
art2_prijs = new getObj ('prijs2');
art3_prijs = new getObj ('prijs3');
art4_prijs = new getObj ('prijs4');

art1_kosten = new getObj ('kosten1');
art2_kosten = new getObj ('kosten2');
art3_kosten = new getObj ('kosten3');
art4_kosten = new getObj ('kosten4');

aantal = new getObj ('totaalaantal');
totaal = new getObj ('totaalkosten');

art1_aantal.obj.onkeyup = bereken_totaal;
art2_aantal.obj.onkeyup = bereken_totaal;
art3_aantal.obj.onkeyup = bereken_totaal;
art4_aantal.obj.onkeyup = bereken_totaal;

art1_zakken.obj.onkeyup = bereken_totaal;
art2_zakken.obj.onkeyup = bereken_totaal;
art3_zakken.obj.onkeyup = bereken_totaal;
art4_zakken.obj.onkeyup = bereken_totaal;
}

function bereken_totaal () {
aantal.obj.value = parseInt (art1_aantal.obj.value)
+ parseInt (art2_aantal.obj.value)
+ parseInt (art3_aantal.obj.value)
+ parseInt (art4_aantal.obj.value);

kosten1 = parseInt (art1_aantal.obj.value) * parseInt (art1_zakken.obj.value) * parseFloat (art1_prijs.obj.value);
kosten2 = parseInt (art2_aantal.obj.value) * parseInt (art2_zakken.obj.value) * parseFloat (art2_prijs.obj.value);
kosten3 = parseInt (art3_aantal.obj.value) * parseInt (art3_zakken.obj.value) * parseFloat (art3_prijs.obj.value);
kosten4 = parseInt (art4_aantal.obj.value) * parseInt (art4_zakken.obj.value) * parseFloat (art4_prijs.obj.value);

art1_kosten.obj.value = kosten1.toFixed (2);
art2_kosten.obj.value = kosten2.toFixed (2);
art3_kosten.obj.value = kosten3.toFixed (2);
art4_kosten.obj.value = kosten4.toFixed (2);

tot = kosten1 + kosten2 + kosten3 + kosten4;
totaal.obj.value = tot.toFixed (2);
}
</script>
</head>

<body>
<form method="post" action="">

<table>
<tr>
<th>Naam</th>
<th>Aantal Zakken</th>
<th>Fruit per zak</th>
<th>Prijs p/s (€)</th>
<th>Kosten (€)</th>
</tr>

<tr>
<td>Artikel 1:</td>
<td><input id="zakken1" name="zakken1" type="text" class="small right" tabindex="1" value="1"></td>
<td><input id="aantal1" name="aantal1" type="text" class="small right" value="1" tabindex="2"></td>
<td><input id="prijs1" name="prijs1" type="text" class="small right" readonly="true" value="1.60"></td>
<td><input id="kosten1" name="kosten1" type="text" class="small right" readonly="true" value="1.60"></td>
</tr>

<tr>
<td>Artikel 2:</td>
<td><input id="zakken2" name="zakken2" type="text" class="small right" tabindex="3" value="1"></td>
<td><input id="aantal2" name="aantal2" type="text" class="small right" value="1" tabindex="4"></td>
<td><input id="prijs2" name="prijs2" type="text" class="small right" readonly="true" value="1.00"></td>
<td><input id="kosten2" name="kosten2" type="text" class="small right" readonly="true" value="1.00"></td>
</tr>

<tr>
<td>Artikel 3:</td>
<td><input id="zakken3" name="zakken3" type="text" class="small right" tabindex="5" value="1"></td>
<td><input id="aantal3" name="aantal3" type="text" class="small right" value="1" tabindex="6"></td>
<td><input id="prijs3" name="prijs3" type="text" class="small right" readonly="true" value="1.78"></td>
<td><input id="kosten3" name="kosten3" type="text" class="small right" readonly="true" value="1.78"></td>
</tr>

<tr>
<td>Artikel 4:</td>
<td><input id="zakken4" name="zakken4" type="text" class="small right" tabindex="7" value="1"></td>
<td><input id="aantal4" name="aantal4" type="text" class="small right" value="1" tabindex="8"></td>
<td><input id="prijs4" name="prijs4" type="text" class="small right" readonly="true" value="1.45"></td>
<td><input id="kosten4" name="kosten4" type="text" class="small right" readonly="true" value="1.45"></td>
</tr>

<tr>
<td>totalen:</td>
<td> </td>
<td><input id="totaalaantal" name="totaalaantal" type="text" class="small right" readonly="true" value="4"></td>
<td> </td>
<td><input id="totaalkosten" name="totaalkosten" type="text" class="small right" readonly="true" value="5.83"></td>
</tr>
</table>
</form>
</body>
</html>

s

samet

10-10-2005 15:10

ik zal je de link geven waar ik de tabel al heb hoe het eruit moet zien.
http://stageverslag.mzoem.nl/test/bereken3.php

we zijn er bijna uit jongens komop :)