[JS] 2 Dropdown boxen koppelen

[Verwijderd]

Ik ben bezig om wat aanpassingen te doen in een bestaand Joomla script, maar nu loop ik tegen een probleem aan met dropdown boxen. Origineel stonden er 2 invoervelden voor product en prijs, maar hiervoor in de plaats heb ik nu 2 dropdown boxen gemaakt met standaard producten en prijzen.

Er is echter een probleem waardoor het niet werkt, mijn velden hebben namelijk de namen pname[] en price[] en dat pakt javascript niet goed op. Ik heb al wel kunnen achterhalen waar de fout zit, namelijk in het eerste stuk van de code:

code:

<script language="javascript">
 function setOptions(chosen) {
var selbox = document.adminForm.price[];

Javascript kan niet omgaan met de benaming price[], is er een manier om dit te omzeilen? Als ik de naam verander in price en dit hetzelfde doe bij de dropdown box werkt het wel, maar kan ik het niet meer opslaan naar de database...

Ik heb maar beperkte kennis van programmeren dus ik hoop dat iemand me kan helpen. Als je de volledige code nodig hebt dan zal ik die ook even posten.

[RobIII]

[] is een array notatie

[Verwijderd]

Dat had ik al begrepen...maar die naam wordt meegegeven vanuit php, dus ik moet hem zo aanhouden anders krijg ik niets meer ingevoerd in mijn database

[MueR]

Je bent bekend met het id attribuut?

Oh ja, <script language="javascript"> is al jaren geleden vervangen door <script type="text/javascript">

[Verwijderd]

Dit is mijn dropdown box:

code:

<select name="price[]" id="<?php echo $priceid ?>" value="<?php echo $productprice[$i]; ?>"
 onkeyup="total2(this.value,'<?php echo $priceid ?>')" style="width: 150px;">

Zoals je ziet is is de id variabel, maar in de javascript moet ik de name invullen...ik dacht dat het wel redelijk eenvoudig op te lossen was, maar dat is dus niet zo?

<script language="javascript">...foutje van de programmeur, maar thnx, had het nog niet gezien

[MueR]

Als ik de aanname mag maken dat $priceid een numerieke waarde bevat ben je een hoop kunstjes aan het uithalen die niet mogen. Een ID mag nooit numeriek zijn. Het value attribuut op een select doet niets en is ook niet toegestaan. Ik denk dat je dus wel meer "foutjes van de programmeur" maakt.

[crisp]

Ben ik nu echt zo'n dinosaurus dat ik als enige nog weet dat een form een elements collectie heeft die je zo kan gebruiken:

JavaScript:

document.forms['adminForm'].elements['price[]']

Vroeger was dit standaard kost als je je ging verdiepen in javascript...

[Verwijderd]

Met foutjes van de programmeur bedoel ik dus foutjes van de maker van het script, niet van mij

@ crisp: thnx voor je code, maar ik heb het nog niet werkend gekregen. De fout heb ik ook al gevonden, namelijk in de 'onchange' van mijn productveld, daar staat:

code:

<select name="pname[]" id="<?php echo $productid; ?>" value="<?php echo $productname[$i]; ?>" onchange="setOptions(document.adminForm.pname[].options[document.adminForm.pname[].selectedIndex].value);" style="width: 150px;">

Hoe moet ik de pname[] hier noteren? Ik heb het geprobeerd als ['pname[]'] maar dat levert niets op, net zoals onderstaande code:

code:

<select name="pname[]" id="<?php echo $productid; ?>" value="<?php echo $productname[$i]; ?>" onchange="setOptions(document.forms['adminForm'].elements['price[]'].options[document.forms['adminForm'].elements['price[]'].selectedIndex].value);" style="width: 150px;">

[MueR]

crisp schreef op zaterdag 25 september 2010 @ 13:07:
Ben ik nu echt zo'n dinosaurus

Ja

Maar TS: Het is me nog steeds behoorlijk onduidelijk wat je nou wil doen? Wanneer je price[] aanroept, ga je een array terugkrijgen met de elementen die matchen op die naam, wat dus twee boxen zijn.. Voor mijn begrip, maak eens een kale testcase met je form en een duidelijke uitleg wat je nu precies wil doen.

[Verwijderd]

Ik heb de javascript code op deze website gebruikt: http://javascript.about.com/library/bldydrop1.htm.

Het komt er dus op neer dat wanneer ik in box 1 product A selecteer, in box 2 prijs A verschijnt. Als ik product B selecteer, verschijnt prijs B etc. Het script van bovenstaande website werkt prima als ik het 1 op 1 kopieer, maar omdat mijn namen een array bevatten werkt het niet.

Ik heb de code van crisp gebruikt, maar nu werkt het nog niet. En dat komt doordat de onchange functie van box 1 fout is, maar ik weet niet hoe ik die regel wel goed moet schrijven. Heb al heel wat afgezocht, maar ik kan niet vinden hoe ik zo'n array moet schrijven in een onchange functie.

Dit moet dus anders:

onchange="setOptions(document.adminForm.pname[].options[document.adminForm.pname[].selectedIndex].value);"

Snap je me nu?

[Manuel]

Indien je wilt dat je wordt geholpen met dit probleem is een testcase toch wel op zijn plaats. Verder als je even Firebug installeerd en daarin je Javascript code test (hint: console), dan zul je zien dat je een syntax error krijgt omdat [] in Javascript gelijk staat aan een array zoals RobIII ookal heeft gezegd.

Furthermore heeft de select tag geen attribuut genaamd 'value', indien je daar waarden aan toe wilt voegen maak je gebruik van de option tag. Kleine testcase wat hier toch echt werkt:

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" value="text/html; charset=utf-8" />
    <title>Testcase?</title>
</head>
<body>
<form name="adminForm">
    <select name="pname[]" id="a01" onchange="setOptions(document.forms['adminForm'].elements['pname[]'].options[document.forms['adminForm'].elements['pname[]'].selectedIndex].value)">
        <option value="0">Zero</option>
        <option value="1">One</option>
    </select>
</form>

<script type="text/javascript">
function setOptions(opt)
{
    (console) ? console.log('Result:'+opt) : alert('Result:'+opt);
};
</script>
</body>
</html>

Ik mag hopen dat je hier wel mee verder komt aangezien ik het al voor 90% voor je heb voorgekauwt (net als de rest).

[crisp]

Furthermore heeft de select tag geen attribuut genaamd 'value'

Toch wel hoor

Maar in dit geval zou ik in de onchange gewoon gebruik maken van 'this'

[Manuel]

crisp schreef op zaterdag 25 september 2010 @ 17:29:
[...]

Toch wel hoor

Je hebt gelijk, heb blijkbaar over "attribute DOMString value;" heen gelezen.