[javascript] Dynamische 'formfield' name

[pim]

Ik heb een javascript functie, waarbij het wat gedeelte variabel moet zijn:

window.document.formulier.wat.value

Ik zit een beetje dingen te proberen met de eval functie zonder resultaat:

code:

<form name=formulier>
<input type=text name=tekst value="het werkt">
</form>

<script>
function controle(wat){
    var wat = eval(wat);
    alert(window.document.formulier.wat.value);
}
controle('tekst');
</script>

Weet iemand hoe dit moet?

[MueR]

Allereerst moet je beginnen met consequent HTML kloppen, verder zou ik gewoon gebruik maken van document.getElementById(), die is stukken betrouwbaarder dan name.

Maar ik mis eigenlijk wat je geprobeerd hebt en waarom dat niet lukte, wat je op je zoektocht oa op Google bent tegengekomen aan form validation scripts en waarom die niet voldoen aan wat je wilt, en nog meer van dat spul.

[Noork]

Zoiets? Of bedoel je wat anders met 'variabel'?

HTML:

<form name=formulier>
<input type="text" id="tekst" value="het werkt">
</form>

<script>
function controle(wat){
    var xyz=document.getElementById(wat);
    alert(xyz.value);
}
controle("tekst");
</script>

[418O2]

Als je hier serieus meer mee wil doen, kijk dan even naar mootools, jQuery etc, maken het leven makkelijker.

[crisp]

extra id's gaan opgeven is ook weer zoiets, een form heeft gewoon een elements property die je als een hashmap kan benaderen: form.elements[elementName]

vroeger, voordat mensen meteen een compleet javascript framework aanraadden, was dat gewoon algemene kennis...

[ Voor 29% gewijzigd door crisp op 27-08-2009 16:58 ]

[Bosmonster]

crisp schreef op donderdag 27 augustus 2009 @ 16:55:
extra id's gaan opgeven is ook weer zoiets, een form heeft gewoon een elements property die je als een hashmap kan benaderen: form.elements[elementName]

vroeger, voordat mensen meteen een compleet javascript framework aanraadden, was dat gewoon algemene kennis...

Heb je helemaal gelijk in natuurlijk, maar jQuery maakt het werken met formulieren wel een stuk eenvoudiger. Maar dan gaat het wel wat verder dan bovenstaand voorbeeldje uiteraard

[pim]

Het ging om 200 van dit soort if vergelijkingen, dus ik in een functie wil stoppen.
Ik ga eens wat spelen met de elements property benaderen.

Muer, wat bedoel je met consequent HTML kloppen?

JavaScript:

if(window.document.formulier.Waterfietsen.checked){
        window.document.formulier.campingkeuzevars.value += 'Waterfietsen=1&';
        document.getElementById('Waterfietsen').style.display = '';
} else {
        document.getElementById('Waterfietsen').style.display = 'none';
}

if(window.document.formulier.Jetski.checked){
        window.document.formulier.campingkeuzevars.value += 'Jetski=1&';
        document.getElementById('Jetski').style.display = '';
} else {
        document.getElementById('Jetski').style.display = 'none';
}

if(window.document.formulier.Kajaks.checked){
        window.document.formulier.campingkeuzevars.value += 'Kajaks=1&';
        document.getElementById('Kajaks').style.display = '';
} else {
        document.getElementById('Kajaks').style.display = 'none';
}

if(window.document.formulier.Kano_s.checked){
        window.document.formulier.campingkeuzevars.value += 'Kano_s=1&';
        document.getElementById('Kano_s').style.display = '';
} else {
        document.getElementById('Kano_s').style.display = 'none';
}

if(window.document.formulier.Surfplanken.checked){
        window.document.formulier.campingkeuzevars.value += 'Surfplanken=1&';
        document.getElementById('Surfplanken').style.display = '';
} else {
        document.getElementById('Surfplanken').style.display = 'none';
}

if(window.document.formulier.Duikuitrusting.checked){
        window.document.formulier.campingkeuzevars.value += 'Duikuitrusting=1&';
        document.getElementById('Duikuitrusting').style.display = '';
} else {
        document.getElementById('Duikuitrusting').style.display = 'none';
}

if(window.document.formulier.Restaurant.checked){
        window.document.formulier.campingkeuzevars.value += 'Restaurant=1&';
        document.getElementById('Restaurant').style.display = '';
} else {
        document.getElementById('Restaurant').style.display = 'none';
}

if(window.document.formulier.Snackbar.checked){
        window.document.formulier.campingkeuzevars.value += 'Snackbar=1&';
        document.getElementById('Snackbar').style.display = '';
} else {
        document.getElementById('Snackbar').style.display = 'none';
}

if(window.document.formulier.Pizzeria.checked){
        window.document.formulier.campingkeuzevars.value += 'Pizzeria=1&';
        document.getElementById('Pizzeria').style.display = '';
} else {
        document.getElementById('Pizzeria').style.display = 'none';
}

if(window.document.formulier.Afhaalmaaltijden.checked){
        window.document.formulier.campingkeuzevars.value += 'Afhaalmaaltijden=1&';
        document.getElementById('Afhaalmaaltijden').style.display = '';
} else {
        document.getElementById('Afhaalmaaltijden').style.display = 'none';
}

[R4gnax]

crisp schreef op donderdag 27 augustus 2009 @ 16:55:
extra id's gaan opgeven is ook weer zoiets, een form heeft gewoon een elements property die je als een hashmap kan benaderen: form.elements[elementName]

vroeger, voordat mensen meteen een compleet javascript framework aanraadden, was dat gewoon algemene kennis...

Vroeger, toen hoger dan Level 0 DOM nog niet bestond, bedoel je? Lijkt me niet echt aan te raden om mensen nog met die ad-hoc 'standaard' te leren werken. Er is geen officiele W3 recommendation van en de enige 'saving grace' waarmee dat kreng nog als een ondode actief gehouden wordt in huidige browsers is backwards compatibility met oude scripts die nooit bijgewerkt zijn. Zo'n beetje hetzelfde argument als waarom IE6 nog steeds niet dood is.

Tegenwoordig gaat dat inderdaad via getElementById, getElementsByTagName, etc. Oftewel: Level 1 DOM en hoger. Tja, dat is inderdaad wat complexer. Dan kan het inderdaad lonen om iets als jQuery te pakken, wat het leven wat makkelijker maakt wanneer je veel geneste DOM nodes hebt.

JavaScript:

$("form[name='formulier'] input").each(function(){
  if ($(this).attr("name") == "tekst")
  {
    alert($(this).value());
  }

  if ($(this).attr("name") == "foo")
  {
    /* ... */
  }

 /* ... */
});

Voor de bandbreedte hoef je het niet te laten, want het is maar ca. 20KB groot en een éénmalige download voor de client (mits je server goed ingesteld staat mbt tot caching hints en de eindgebruiker niet met caching instellingen heeft lopen klooien).

[crisp]

R4gnax schreef op vrijdag 28 augustus 2009 @ 13:55:
[...]


Vroeger, toen hoger dan Level 0 DOM nog niet bestond, bedoel je? Lijkt me niet echt aan te raden om mensen nog met die ad-hoc 'standaard' te leren werken. Er is geen officiele W3 recommendation van en de enige 'saving grace' waarmee dat kreng nog als een ondode actief gehouden wordt in huidige browsers is backwards compatibility met oude scripts die nooit bijgewerkt zijn. Zo'n beetje hetzelfde argument als waarom IE6 nog steeds niet dood is.

HTMLFormElement.elements is gewoon gedefinieerd in DOM level 1, en verder doelt die specificatie ook op de beschikbaarheid van named input elements als property van het form element:

quote: http://www.w3.org/TR/REC-...one-html.html#ID-40002357

The FORM element encompasses behavior similar to a collection and an element. It provides direct access to the contained input elements as well as the attributes of the form element.

HTML5 definieert het nog verder:

quote: http://www.w3.org/TR/html5/forms.html#the-form-element

element = form . namedItem(name)
form[name]
form(name)

Returns the form control in the form with the given ID or name (excluding image buttons for historical reasons).

[R4gnax]

crisp schreef op vrijdag 28 augustus 2009 @ 16:09:
[...]

HTMLFormElement.elements is gewoon gedefinieerd in DOM level 1, en verder doelt die specificatie ook op de beschikbaarheid van named input elements als property van het form element:

[...]

HTML5 definieert het nog verder:

[...]

Verrek, je hebt gelijk: HtmlFormElement definieert inderdaad expliciet een HtmlCollection 'elements'.

Uit het commentaar in de HTML5 standaard (met name de vele 'for historical reasons') is alleen wel redelijkerwijs af te leiden dat die properties opgenomen zijn om backwards compatible met het oude DOM level 0 te blijven. Persoonlijk zou ik dan ook nog steeds die oude DOM 0 restanten niet gebruiken, maar ik moet toegeven dat (ten minste een deel van) DOM 0 inderdaad wèl in DOM 1 en hoger opgenomen is.

Chapeau voor de exacte referenties, crisp.

[crisp]

R4gnax schreef op vrijdag 28 augustus 2009 @ 19:54:
[...] maar ik moet toegeven dat (ten minste een deel van) DOM 0 inderdaad wèl in DOM 1 en hoger opgenomen is.

Inderdaad, zie ook de introductie van de DOM level 1 spec:

quote: http://www.w3.org/TR/REC-...e-html.html#ID-1176245063

The term "DOM Level 0" refers to a mix (not formally specified) of HTML document functionalities offered by Netscape Navigator version 3.0 and Microsoft Internet Explorer version 3.0. In some cases, attributes or methods have been included for reasons of backward compatibility with "DOM Level 0".