[JavaScript] Velden uitrekenen met pulldown menu!

[schumi2004]

Min of meer gejat uit ander topic hier op GoT omdat dit precies bij mijn probleem/oplossing hoort.
Echter wil ik ipv een textfield een pulldown/selection menu hebben waar vaste aangegeven waardes in vermeld staan.
Maar om een of andere reden wil dit niet lukken.

Origineel:

<form name="form1">
<input type="text" name="txt1" size=10 onkeyup="document.forms['form1'].txt2.value = (parseInt(document.forms['form1'].txt1.value, 10) + 2)">
<input type="text" name="txt2" size=10>
</form>

Veld 2 = veld 1 + 2

Aangepast: (niet werkend)

<form name="form1">
<select name="txt1a" onkeyup="document.forms['form1'].txt2a.value = (parseInt(document.forms['form1'].txt1a.value, 10) * 11.50)">
<option selected>Aantal</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<input type="text" name="txt2a" size="8">
</form>

Deze constructie herhaald zich 3 keer en uiteindelijk is het de bedoeling dat de 3 subwaardens weer opgeteld worden naar een totaal en dus mogen de subwaarden (txt2a, b, c) eigenlijk niet 0 worden of beter gezegd de txt1a, b, c waardens mogen niet leeg zijn maar dat is voor latere zorg dat ik eerst maar die selectionmenu voor elkaar krijg maar wat ik ook probeer het wil niet werken.

Over een andere boeg gegooid en dat was proberen te zorgen dat wanneer textfield txt1a niet gevuld was deze default 0 zou geven maar da liep helemaal uit op een drama

misschien iemand hier met een schop in de juiste richting?

[Koppensneller]

Ik zie dat je option elementen geen value attribute hebben. Haal je de waarden nu uit de tekst in de elementen?

[schumi2004]

KoppenSneller schreef op woensdag 02 mei 2007 @ 11:42:
Ik zie dat je option elementen geen value attribute hebben. Haal je de waarden nu uit de tekst in de elementen?

Ik was in de veronderstelling dat wanneer een selection box gemaakt wordt hij automatisch de waarde uit de de gegeven options pakt wanneer deze geselecteerd wordt maar dat is verkeerd gedacht dan?

Moet zeggen dat JavaScript ook niet mijn sterkste kant is

[Koppensneller]

HTML:

<select id="voorbeeld" name="voorbeeld">
<option value="0" selected>1</option>
</select>

JavaScript:

selectbox = document.getElementById("voorbeeld");
waarde = selectbox.getAttribute("value");
alert(waarde);

Bovenstaande code zal een alert geven met de waarden "0". Hij pakt dus de waarde in het value attribute van de geselecteerde option.

[RM-rf]

bij een select-element kun je niet zomaar de 'value' opvragen.

zoals je zelf kunt zien aan de code heeft het select-element zelf nl. geheel geen 'value'-attribuut , maar bevat meerdere 'option'-childelementen die dan weer wel een value bevatten...

als je de waarde van een geselecteerd option wilt vinden moet je de selectedIndex gebruiken (die het geselecteerde option-element bevat)

JavaScript:

var selectedIndex = document.forms['form1'].elements['txt1a'].selectedIndex
var waarde = document.forms['form1'].elements['txt1a'].options[ selectedIndex  ].value

tevens denk ik dat je beter geen 'onkeyup', omdat je bij een select geen toets indrukt (meestal), de beste event die het veranderen van de warde afvangt is waarschijnlijk eerder de 'onchange'

[ Voor 14% gewijzigd door RM-rf op 02-05-2007 12:35 ]

[schumi2004]

RM-rf schreef op woensdag 02 mei 2007 @ 12:32:
bij een select-element kun je niet zomaar de 'value' opvragen.

zoals je zelf kunt zien aan de code heeft het select-element zelf nl. geheel geen 'value'-attribuut , maar bevat meerdere 'option'-childelementen die dan weer wel een value bevatten...

als je de waarde van een geselecteerd option wilt vinden moet je de selectedIndex gebruiken (die het geselecteerde option-element bevat)

JavaScript:

var selectedIndex = document.forms['form1'].elements['txt1a'].selectedIndex
var waarde = document.forms['form1'].elements['txt1a'].options[ selectedIndex  ].value

tevens denk ik dat je beter geen 'onkeyup', omdat je bij een select geen toets indrukt (meestal), de beste event die het veranderen van de warde afvangt is waarschijnlijk eerder de 'onchange'

De door jouw gegeven oplossing heeft als resultaat dat ik een functie maken moet denk ik of heb ik het verkeerd?
Kan het gehele plaatje zoals code eruit zou moeten zien niet plaatsen

[RM-rf]

schumi2004 schreef op woensdag 02 mei 2007 @ 13:59:
[...]

De door jouw gegeven oplossing heeft als resultaat dat ik een functie maken moet denk ik of heb ik het verkeerd?
Kan het gehele plaatje zoals code eruit zou moeten zien niet plaatsen

eventueel zou :

code:

<select name="txt1a"  
   onchange="this.form.elements['txt2a'].value = parseInt( this.options[ this.selectedIndex ].value, 10 )">

ook moeten gaan, een function ervan maken kan voor hergebruik en de overzichtelijkheid soms handig zijn

[schumi2004]

Thx voor de snelle replies, hier moet ik wel uitkomen nu

[schumi2004]

RM-rf schreef op woensdag 02 mei 2007 @ 14:33:
[...]


eventueel zou :

code:

<select name="txt1a"  
   onchange="this.form.elements['txt2a'].value = parseInt( this.options[ this.selectedIndex ].value, 10 )">

ook moeten gaan, een function ervan maken kan voor hergebruik en de overzichtelijkheid soms handig zijn

Ben er nog even mee aan het stoeien geweest en veel Google maar valt nog niet mee.

Mijn inziens leek het allemaal zo simpel maar kom er niet uit.

Dit is wat ik op moment heb:

code:

<script language = "javascript" type="text/javascript">
var selectedIndex1 = document.forms['form1'].elements['txt1a'].selectedIndex 
var waarde1 = document.forms['form1'].elements['txt1a'].options[selectedIndex1].value
var selectedIndex2 = document.forms['form1'].elements['txt2a'].selectedIndex 
var waarde2 = document.forms['form1'].elements['txt2a'].options[selectedIndex2].value
var selectedIndex3 = document.forms['form1'].elements['txt3a'].selectedIndex 
var waarde3 = document.forms['form1'].elements['txt3a'].options[selectedIndex3].value
</script>

<form name="form1">
<select name="txt1a" onchange="this.form.elements['txt1b'].value = parseInt(this.options[this.selectedIndex1].value,10) * 10)">
<option selected>Aantal</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<input type="text" name="txt1b" size="8">
<select name="txt2a" onchange="this.form.elements['txt2b'].value = parseInt(this.options[this.selectedIndex2].value,10) * 20)">
<option selected>Aantal</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<input type="text" name="txt2b" size="8">
<select name="txt3a" onchange="this.form.elements['txt3b'].value = parseInt(this.options[this.selectedIndex3].value,10) * 5)">
<option selected>Aantal</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<input type="text" name="txt3b" size="8">

<input type="text" name="document.write(txt1b() + txt2b + txt3b)">
</form>

Bovenstaande ben ik op verder gegaan maar het wordt alleen maar erger

Misschien toch te makkelijk gedacht over javascript

[SchizoDuckie]

HTML:

<option value='1'>1</option>

eerst je html netjes schrijven en dan klagen over javascript

[ Voor 6% gewijzigd door SchizoDuckie op 08-05-2007 10:22 ]

[RM-rf]

schumi2004 schreef op dinsdag 08 mei 2007 @ 10:14:


Dit is wat ik op moment heb:

code:

<script language = "javascript" type="text/javascript">
var selectedIndex1 = document.forms['form1'].elements['txt1a'].selectedIndex 
var waarde1 = document.forms['form1'].elements['txt1a'].options[selectedIndex1].value
</script>

Wat denk je hier precies te doen?

je creert een variabele 'selectedIndex1', die echter gegenereert wordt bij het renderen van de pagina en dan nog wel op een moment dat het hele Select-element zelf nog lang niet bestaat...

selectedIndex1 is dus per definitie 'false', ook al spreek je hem ölater aan als het select-element wél gerenderd is en ook een 'selectedIndex' heeft ....

gooi die hele 'tussen-variabele' ''selectedIndex1' eruit en spreek direkt het element zélf aan

offtopic:
SchizoDuckie, bemoei je er liever niet mee als je niks zinnigs te melden hebt,
niet alleen is het geen enkel probleem en veroorzaakt jouw gevonden 'opmerking' geen enkele fout, uitgaande van het gebruik van HTML4.01 is het zelfs domweg toegestaan de 'value'-attribuut weg te laten... die code is gewoon valide HTML4.01 (als dat dan wel in de doctype staat)

[ Voor 17% gewijzigd door RM-rf op 08-05-2007 10:41 ]

[schumi2004]

SchizoDuckie schreef op dinsdag 08 mei 2007 @ 10:22:

HTML:

<option value='1'>1</option>

eerst je html netjes schrijven en dan klagen over javascript

Ja inderdaad mijn fout, heb het hele geheel aangepast nu

RM-rf schreef op dinsdag 08 mei 2007 @ 10:38:
[...]


Wat denk je hier precies te doen?

je creert een variabele 'selectedIndex1', die echter gegenereert wordt bij het renderen van de pagina en dan nog wel op een moment dat het hele Select-element zelf nog lang niet bestaat...

selectedIndex1 is dus per definitie 'false', ook al spreek je hem ölater aan als het select-element wél gerenderd is en ook een 'selectedIndex' heeft ....

gooi die hele 'tussen-variabele' ''selectedIndex1' eruit en spreek direkt het element zélf aan

offtopic:
SchizoDuckie, bemoei je er liever niet mee als je niks zinnigs te melden hebt,
niet alleen is het geen enkel probleem en veroorzaakt jouw gevonden 'opmerking' geen enkele fout, uitgaande van het gebruik van HTML4.01 is het zelfs domweg toegestaan de 'value'-attribuut weg te laten... die code is gewoon valide HTML4.01 (als dat dan wel in de doctype staat)

Meende dat dat de bedoeling was van jouw eerder voorgestelde suggestie
Een groot nadeel wat ik ondervindt om het probleem te vinden is dat ik niet kan zien wat er nu werkelijk gebeurt, zijn er geen tools die dit wel zichtbaar maken?

[ Voor 5% gewijzigd door schumi2004 op 08-05-2007 11:10 ]

[SchizoDuckie]

RM-rf schreef op dinsdag 08 mei 2007 @ 10:38:
[...]

offtopic:
SchizoDuckie, bemoei je er liever niet mee als je niks zinnigs te melden hebt,
niet alleen is het geen enkel probleem en veroorzaakt jouw gevonden 'opmerking' geen enkele fout, uitgaande van het gebruik van HTML4.01 is het zelfs domweg toegestaan de 'value'-attribuut weg te laten... die code is gewoon valide HTML4.01 (als dat dan wel in de doctype staat)

Excusez moi Ik was in de veronderstelling dat value toch echt een required property was wil je deze in javascript weer aanspreken, maar ik hou m'n mond wel

edit:
ik had wel gelijk. de value is gewoon leeg op het moment dat je element.options[element.selectedIndex] aanspreekt en er is geen option.value gedefinieerd. Element.text werkt dan namelijk wél.

Werkend voorbeeld. (Ik neem aan dat je dit bedoelt iig)

HTML:

<script type="text/javascript">
function recalculate(element, multiplier)
{   
    element.form.elements[element.name+'b'].value = parseInt(element.options[element.selectedIndex].text, 10) * multiplier;
}
</script>

<form name="form1">
<select name="txt1" onchange="recalculate(this, 10);">
<option selected>Aantal</option>
<option value='1'>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<input type="text" name="txt1b" size="8">
<select name="txt2" onchange="recalculate(this, 20)">
<option selected>Aantal</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<input type="text" name="txt2b" size="8">
<select name="txt3" onchange="recalculate(this, 5)">
<option selected>Aantal</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<input type="text" name="txt3b" size="8">
<!-- Wat deed die document.write nou ineens hier :? -->
</form>

Voor debuggen kan je in firefox trouwens gebruik maken van Firebug icm console.log()

[ Voor 53% gewijzigd door SchizoDuckie op 08-05-2007 11:52 ]

[RM-rf]

schumi2004 schreef op dinsdag 08 mei 2007 @ 11:07:
[...]


Ja inderdaad mijn fout, heb het hele geheel aangepast nu

[...]
Meende dat dat de bedoeling was van jouw eerder voorgestelde suggestie
Een groot nadeel wat ik ondervindt om het probleem te vinden is dat ik niet kan zien wat er nu werkelijk gebeurt, zijn er geen tools die dit wel zichtbaar maken?

Firefox heeft een develloper toolbar die een groot aantal tools biedt, onder meer een mogelijkheid de Form-gegevens zichtbaar te maken, het DOM te doorlopen en een uitgerebdie fout-console ...

de basis die je echter al moet begrijpen is wat wanneer gebrut ...

gewone code tussen <script>-tags wordt tijdens het redeneren direkt al uitgevoerd, terwijl code bij onEvent-attibuten pas bij dat betreffende event gebeuren...


vraag je bij iedere regel eens af wat dat precies doet:

JavaScript:

var selectedIndex1 = document.forms['form1'].elements['txt1a'].selectedIndex 
   // deze variabele {selectedIndex1} is 'false' het betreffende formulier is nog niet gerenderd
var waarde1 = document.forms['form1'].elements['txt1a'].options[selectedIndex1].value
   // deze variabele  {waarde1} is 'false' het betreffende formulier is nog niet gerenderd en {selectedIndex1}  is ook al false

// ... later in code
// onchange-attribuut
// <select name="txt1a" onchange="this.form.elements['txt1b'].value = parseInt(this.options[this.selectedIndex1].value,10) * 10)">

this.form.elements['txt1b'].value = parseInt(this.options[this.selectedIndex1].value,10) * 10)
// hier maak je twee fouten in het tweede deel van de conditie..
// de 'this.selectedIndex1' heeft de verkeerde scope, het is geen lokale variabele van het select-element maar een globale variabele
// én bovendien is die globale variabele {selectedIndex1} nog altijd 'false'

wat ik je zou aanraden is gewoon een function te creeeren:

iets van

JavaScript:

function val2Input( elm, myname ) {
   var myvalue = elm.options[elm.selectedIndex].value
   elm.form.elements[ myname ].value = parseInt( myvalue, 10 )
}

en dan in de onchange

HTML:

<select name="txt1a" onchange="val2Input( this, 'txt1b')">

[schumi2004]

@SchizoDuckie
Die docWrite was om de 3 uitkomsten weer op te tellen, was een snelle copy past actie waar ik nog steeds niet helemaal uit ben nu.
Je gegeven script is wel het geen wat het moet doen, nu moet ik die subwaardens nog laten optellen

@RM-rf & SchizoDuckie,

Beide bedankt voor de hulp
Hoe meer je je er in gaat verdiepen hoe mooier het wordt

[schumi2004]

Even voor mijn beeldvorming, de gebruikte variabelen txt1b, 2b en 3b zijn geen global variabelen toch?

Wil ik deze waardens hergebruiken dan zal ik er iets om heen moeten bouwen?

[RM-rf]

schumi2004 schreef op dinsdag 08 mei 2007 @ 13:44:
Even voor mijn beeldvorming, de gebruikte variabelen txt1b, 2b en 3b zijn geen global variabelen toch?

Wil ik deze waardens hergebruiken dan zal ik er iets om heen moeten bouwen?

'txt1b' is geen variabele maar de naam van het element in het formulier:
die je dan weer aanspreekt met

code:

document.forms['form1'].elements['txt1b']

of vanuit een event kun je soms ook 'this.form' gebruiken om hetzelfde formulier aan te spreken

[ Voor 10% gewijzigd door RM-rf op 08-05-2007 13:51 ]

[schumi2004]

Voor de geintereseerde, ik ben er zo'n beetje uit denk.
Een klein beetje fine tuning en ik ben er klaar mee

code:

<script type="text/javascript"> 
function recalculate(element, multiplier) 
{     
    element.form.elements[element.name+'b'].value = parseInt(element.options[element.selectedIndex].text, 10) * multiplier; 
} 
function sum(){
var uitkomst;
uitkomst = parseInt(document.forms['form1'].elements['txt1b'].value) + parseInt(document.forms['form1'].elements['txt2b'].value) + parseInt(document.forms['form1'].elements['txt3b'].value);
document.forms['form1'].elements['totaal'].value = uitkomst;
}
</script> 

<form name="form1"> 
<select name="txt1" onchange="recalculate(this, 10);"> 
<option selected>Aantal</option> 
<option value='1'>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
</select> 
<input type="text" name="txt1b" size="8"><br> 
<select name="txt2" onchange="recalculate(this, 20)"> 
<option selected>Aantal</option> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
</select> 
<input type="text" name="txt2b" size="8"><br> 
<select name="txt3" onchange="recalculate(this, 5)"> 
<option selected>Aantal</option> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
</select> 
<input type="text" name="txt3b" size="8"><br> 
<input type="text" name="totaal" size="8" onclick="sum()">
</form>

[SchizoDuckie]

very netjes Glad we could help

[schumi2004]

SchizoDuckie schreef op dinsdag 08 mei 2007 @ 16:50:
very netjes Glad we could help

Thx, Zit nog wel met een klein detail en dat is dat het totaal veld alleen changed op een onclick, mooier zou zijn dat deze via een onchange veranderd maar dit veld wordt nergens door getriggerd is mij vertelt en als ik er lang naar kijk klopt da wel.

ff uitzoeken hoe dit makkelijkste kan, alle suggesties zijn welkom

[RM-rf]

<input type="text" name="txt1b" size="8" onchange="sum()">

<input type="text" name="txt2b" size="8" onchange="sum()">

<input type="text" name="txt3b" size="8" onchange="sum()">

[schumi2004]

RM-rf schreef op donderdag 10 mei 2007 @ 16:21:
<input type="text" name="txt1b" size="8" onchange="sum()">

<input type="text" name="txt2b" size="8" onchange="sum()">

<input type="text" name="txt3b" size="8" onchange="sum()">

Die had ik ook geprobeert maar werkte dus niet
Wat wel werkte was deze onchange actie op het pulldown menu te plaatsen, zo dus

<select name="txt1" onchange="recalculate(this, 10); sum()">

<select name="txt2" onchange="recalculate(this, 20); sum()">

<select name="txt3" onchange="recalculate(this, 5); sum()">

Nadeel is dat ik ff die NaN nog moet afvangen maar is een logisch gevolg

[ Voor 33% gewijzigd door schumi2004 op 10-05-2007 16:42 ]

[schumi2004]

Iemand een idee waarom hij geen decimalen mee neemt in optelling althans met parseFloat doet hij het wel maar laat hij .5 teveel of te weinig achter in totaal .

[ Voor 4% gewijzigd door schumi2004 op 10-05-2007 22:28 ]