[javascript] verkrijgen ID op naam

[Verwijderd]

Ik heb een formulier met een aantal checkboxes die ik onload wil laten aanvinken.
De boxes hebben een id in de vorm van: area1, area2, area3 enz omdat een ander script hier gebruikt van moet maken. Echter de waardes zijn anders en afhankelijk van deze waardes dient er gecheck te worden of niet.

Ik verkrijg de waardes vanuit een database en roep deze onload aan:

JavaScript:

document.onload = setPrefs(new Array('lokaal','provenciaal','landelijk','benelux','flyeren','enqueteren','promotie','straat','concert','festivals','za','zo','ma','di','wo','do','vr','ochtend','middag','avond','nacht','1-10'));

de functie dient dus per array waarde kijken of een element met deze name bestaat en deze vervolgens aanvinken.
de code die ik geschreven hebt geeft geen fouten, maar doet echter ook niets. Hopelijk kan iemand me de juiste kant op wijze om dit op te lossen.

JavaScript:

function setPrefs(dataArray)
    {
    var arr = new Array()
    for(i = 0; i< dataArray.length; i++)
        {
        arr = document.getElementsByName(dataArray[i]);
        }
    for(i = 0; i< dataArray.length; i++)
        {
        for(var o = 0; o < arr.length; o++)
            {
            var obj = document.getElementsByName(dataArray[i]).item(o);
            document.getElementById(obj.id).checked = true;
            alert(obj.id + " =  " + obj.value);
            }
        }
    }

de alert zit er in voor het testen, maar zelfs deze werkt niet.

[Mental]

Doe eens een output van dataArray in de eerste for-loop,als die invoer leeg is zal de uitvoer ook leeg zijn he.
En aangezien de arr.length dan 0 is zal de 2e for-loop nooit afgetrapt worden.

[Amras]

Houd er rekening mee dat na het uitvoeren van de eerste loop de variabele arr de elementen bevat met de naam van de laatst meegegeven string (in dit geval dus '1-10'). Dat lijkt me niet de bedoeling.

[crisp]

de functie dient dus per array waarde kijken of een element met deze name bestaat en deze vervolgens aanvinken.

Dan kom je logischerwijs toch op een dergelijke functie uit:

JavaScript:

function setPrefs(dataArray)
{
    var form = document.forms['formid'];
    if (form)
    {
        for (var i = 0, l = dataArray.length, cb; i < l; i++)
        {
            if ((cb = form.elements[dataArray[i]]))
                cb.checked = true;
        }
    }
}

(eventueel nog een stukje branching indien form.elements[] meerdere elementen teruggeeft met dezelfde naam, maar je kan zelf het beste bepalen of dat kan voorkomen in jouw geval).

Je bent in je eigen functie wel heel erg aan het goochelen, en dit:

JavaScript:

document.getElementById("'"+obj.id+"'")

geeft sowieso niet wat je wilt; dat zou dan minstens gewoon document.getElementById(obj.id) moeten zijn, maar geeft als het goed is dan gewoon weer dezelfde pointer terug als waar 'obj' al naar verwijst. En inderdaad, 'arr' is in de tweede loop altijd een collectie van het laatste item uit je dataArray...

[ Voor 26% gewijzigd door crisp op 22-01-2010 11:46 ]

[NMe]

Ehm, WTF?

JavaScript:

document.getElementById("'"+obj.id+"'")

Ik neem aan dat je nergens een veld hebt met het dit soort id?

HTML:

<input id="'blaat'" .... />

Zelfs onze highlighter geeft al aan dat dat verkeerd is.

Afgezien van dat: Waar hoort mijn topic?
PRG>>WEB

[ Voor 10% gewijzigd door NMe op 22-01-2010 11:44 ]

[Verwijderd]

crisp schreef op vrijdag 22 januari 2010 @ 11:41:
[...]

Dan kom je logischerwijs toch op een dergelijke functie uit:

JavaScript:

function setPrefs(dataArray)
{
    var form = document.forms['formid'];
    if (form)
    {
        for (var i = 0, l = dataArray.length, cb; i < l; i++)
        {
            if ((cb = form.elements[dataArray[i]]))
                cb.checked = true;
        }
    }
}

Je bent in je eigen functie wel heel erg aan het goochelen, en dit:

JavaScript:

document.getElementById("'"+obj.id+"'")

De bovenste functie gaat toch uit van ID's en niet van de name="" tag?

En ja ik ben aan het goochelen geweest

[Verwijderd]

Mental schreef op vrijdag 22 januari 2010 @ 11:29:
Doe eens een output van dataArray in de eerste for-loop,als die invoer leeg is zal de uitvoer ook leeg zijn he.
En aangezien de arr.length dan 0 is zal de 2e for-loop nooit afgetrapt worden.

een alert op dataArray.length geeft undefined aan. Ik begrijp echter niet waarom.

[NMe]

Omdat, no offense, je Javascript verre van logisch is. Ik zie met de beste wil van de wereld niet wat je denkt dat die code moet doen.

Wat voldoet er precies niet aan de code die crisp geeft?

[Verwijderd]

NMe schreef op vrijdag 22 januari 2010 @ 11:58:
Omdat, no offense, je Javascript verre van logisch is. Ik zie met de beste wil van de wereld niet wat je denkt dat die code moet doen.

Wat voldoet er precies niet aan de code die crisp geeft?

non taken

Het doel is om aan de hand van de name tag een checkbox aan te vinken en niet per ID want die heb ik niet in de database. De code van Crips geeft geen fouten maar voert ook niets uit, omdat deze volgens mij naar ID's zoekt en niet name tags. (kan het fout hebben, zie nu even door de bomen het bos niet meer).

[gvdh]

Bestaan de form-elementen überhaupt wel op het moment dat de functie uitgevoerd wordt?

document.onload = setPrefs(...);

doet niet wat je op het eerste zicht denkt dat het doet. Dit zal op het moment dat het Javascript-bestand uitgevoerd wordt, de functie setPrefs uitvoeren. Maar, op dit moment is de pagina misschien nog niet helemaal opgebouwd.
Daarna zal aan document.onload de returnvalue van setPrefs toegewezen worden.
Ik denk dat je beter de functie aanroept helemaal onderaan de html-pagina.

[Verwijderd]

de document.onload functie staat onderaan de pagina, al het HTML is geladen.

[Verwijderd]

Ik heb het script van crips naar wat aanpassingen in de html werkende gekregen.
Bedankt voor het geduld en de kennis.

[NMe]

Verwijderd schreef op vrijdag 22 januari 2010 @ 12:19:
de document.onload functie staat onderaan de pagina, al het HTML is geladen.

De HTML is sowieso al geladen als de onload wordt uitgevoerd.

Trouwens, ik ben zelf niet goed met Javascript, maar document heeft toch helemaal geen event handlers? Moet je niet een onload op de window/body zetten in plaats van op de document?

[Amras]

NMe schreef op vrijdag 22 januari 2010 @ 12:27:
[...]
Trouwens, ik ben zelf niet goed met Javascript, maar document heeft toch helemaal geen event handlers? Moet je niet een onload op de window/body zetten in plaats van op de document?

En daarbij, moet je geen verwijzing naar een functie in het event stoppen, i.p.v. het result van een void functie? Dus zoiets:

JavaScript:

body.onload = function()
{
    setPrefs(...);
}

[crisp]

Je onload handler is inderdaad ook fout; dat moet meer zoiets zijn:

JavaScript:

window.onload = function()
{
    setPrefs([
        'lokaal','provenciaal','landelijk','benelux','flyeren',
        'enqueteren','promotie','straat','concert','festivals',
        'za','zo','ma','di','wo','do','vr',
        'ochtend','middag','avond','nacht','1-10'
    ]);
}

(meteen maar even onload op het juiste object gezet en gewoon een array literal gebruikt ipv onnodig gebruik maken van de Array constructor)

[NMe]

En dan nog een laatste dingetje: "1-10" is absoluut geen geldige name voor een element in welke programmeertaal dan ook, inclusief HTML.

[crisp]

NMe schreef op vrijdag 22 januari 2010 @ 12:35:
En dan nog een laatste dingetje: "1-10" is absoluut geen geldige name voor een element in welke programmeertaal dan ook, inclusief HTML.

Nee hoor, name-attributes zijn van type CDATA en mogen dus van alles bevatten

[Bosmonster]

crisp schreef op vrijdag 22 januari 2010 @ 12:42:
[...]

Nee hoor, name-attributes zijn van type CDATA en mogen dus van alles bevatten

Uit diezelfde link (onder het kopje cdata):

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

[crisp]

Bosmonster schreef op vrijdag 22 januari 2010 @ 12:50:
[...]


Uit diezelfde link (onder het kopje cdata):


[...]

Lees de spec nog eens goed door; een name-attribuut is geen NAME token (zie de DTD)

Het beste voorbeeld is denk ik wel dit wat veelvuldig gebruikt wordt en dus invalid zou zijn als het name-attribuut geen CDATA maar een NAME token zou zijn:

HTML:

<input type="checkbox" value="1" name="foo[]">
<input type="checkbox" value="2" name="foo[]">
<input type="checkbox" value="2" name="foo[]">

[ Voor 36% gewijzigd door crisp op 22-01-2010 13:19 ]

[Bosmonster]

Maar krijg je dan niet hele rare verschijnselen met een name als "5" en je bijvoorbeeld de elements-array aan zou roepen?

Ik heb er nooit mee gespeeld, want het leek me altijd wel logisch dat het potentiele problemen op kon leveren gezien JS' weakly typed eigenschap.

[ Voor 6% gewijzigd door Bosmonster op 22-01-2010 13:35 ]

[crisp]

Bosmonster schreef op vrijdag 22 januari 2010 @ 13:34:
Maar krijg je dan niet hele rare verschijnselen met een name als "5" en je bijvoorbeeld de elements-array aan zou roepen?

Ik heb er nooit mee gespeeld, want het leek me altijd wel logisch dat het potentiele problemen op kon leveren gezien JS' weakly typed eigenschap.

Jep, net als een form-element een name="submit" geven levert dat inderdaad problemen op; het is dan ook niet verstandig (maar wel valide) om puur numerieke name-attributen te gebruiken als je die elementen ook via de elements collectie wil kunnen benaderen:

HTML:

<!doctype html>
<script>

window.onload = function()
{
    alert(document.forms['foo'].elements['5'].value);
    alert(document.getElementsByName('5')[0].value);

    alert(document.forms['foo'].elements['1-10'].value);
    alert(document.getElementsByName('1-10')[0].value);
}

</script>
<form id="foo">
<input type="text" name="1" value="1">
<input type="text" name="2" value="2">
<input type="text" name="3" value="3">
<input type="text" name="4" value="4">
<input type="text" name="5" value="5">
<input type="text" name="1-10" value="1-10">
</form>

[NMe]

Goed, dan mág het in HTML wel, maar dan mag het van mij nog niet. 't Is hoe dan ook geen verstandige keuze.

[driaker]

Wat dacht je van server-side logica en dan gewoon het checked attribuut gebruiken.

code:

<input name="area1" id="area1" type="checkbox" checked="checked" value="foo" />