[HTML/JS] radio button met extra velden

[vmsw]

Om vraag te versimpelen (nee, het is NIET simpeler om één veld voor alle 3 de dingen te gebruiken):

De bedoeling is dat de klant 3 opties heeft: rondje_a, rondje_b, rondje_c
Bij optie a dient het formulier veld_a, optie b veld_b en optie c veld_c te weergeven.

Dit doe ik momenteel als volgt:

Met onclick geef je dan aan:
rondje_a: veld b & c weghalen, a weergeven
rondje_b: veld a & c weghalen, b weergeven
rondje_c: veld a & b weghalen, c weergeven

n.b. ik gebruik onclick vanwege IE die goed werkt met onchange, omdat hij dan pas aangeeft zodra je juist weg gaat uit een rondje...

Omdat ik het formulier automatisch laat genereren door een eigengemaakte formulier-class, wil ik de code zo goed mogelijk hier gebruiken, en ik wil eigenlijk dat er NIET staat "veld a & b weghalen" indien rondje_c. Hoe kan je zorgen dat velden automatisch worden verborgen als er een ander rondje gekozen wordt?

Simpelweg een functie om de 'onchange' ongedaan te maken van het vorige rondje.

Uiteraard kan zoiets ook met ajax, maar hier heb ik niet echt de tijd voor momenteel.

[ Voor 13% gewijzigd door vmsw op 22-06-2009 20:48 ]

[TeeDee]

vmsw schreef op maandag 22 juni 2009 @ 20:44:
Uiteraard kan zoiets ook met ajax, maar hier heb ik niet echt de tijd voor momenteel.

Ga eerst maar eens doornemen wat 'AJAX' nu exact is. * TeeDee denkt dat 'AJAX' behoorlijke overkill is.

Anyway, alles verbergen en alleen het gekozen 'rondje / formulier veld' tonen is geen optie?

Pseudo code:

code:

function ShowField(elemToShow)
{
    var fieldtoShow = document.getElementById(elemToShow);
    foreach(formfield field in document.forms[])
    {
        if(!(field == fieldtoShow)
        {
            field.style.visibility = 'hidden'
        }
    }
}

[ Voor 5% gewijzigd door TeeDee op 22-06-2009 21:10 ]

[vmsw]

TeeDee schreef op maandag 22 juni 2009 @ 21:07:
[...]

Ga eerst maar eens doornemen wat 'AJAX' nu exact is. * TeeDee denkt dat 'AJAX' behoorlijke overkill is.

Ik weet wat AJAX is, ik gebruik het veelvuldig, maar het is een prima methode om aan te roepen, en te laten checken (met php) welk vakje gekozen is, en dus dat de velden erbij moeten komen in code ipv via display of document.write van JS.
En omdat ajax prettig qua werking is, gezien t feit er niet onnodige info ingeladen hoeft te worden die eventueel later met javascript uitgevoerd moet worden, is het een aardige methode. Vandaar.

Anyway, alles verbergen en alleen het gekozen 'rondje / formulier veld' tonen is geen optie?

Pseudo code:

code:

function ShowField(elemToShow)
{
    var fieldtoShow = document.getElementById(elemToShow);
    foreach(formfield field in document.forms[])
    {
        if(!(field == fieldtoShow)
        {
            field.style.visibility = 'hidden'
        }
    }
}

Deze code bedoelde ik totaal niet? Deze heb ik uiteraard al, en dan zelfs in 1 regel .

Ik bedoel het volgende:
Je klikt op rondje_a, en krijgt veld a te zien. Echter besluit je toch voor rondje_b te gaan, dan moet veld_a verdwijenen, en veld_b komen. Echter wil ik niet bij de onchange/onclick van rondje_b zetten dat a moet verdwijnen, want dat maakt rommelig/onhandig. Hoe kan ik dat voorkomen.

[Bosmonster]

Standaard allemaal hiden en alleen degene die ja aanklikt zichtbaar maken? Zo blijft het flexibel en kun je eenvoudig opties toevoegen.

Had je zelf ook wel kunnen bedenken volgens mij, maar goed.

Ik weet wat AJAX is, ik gebruik het veelvuldig, maar het is een prima methode om aan te roepen, en te laten checken (met php) welk vakje gekozen is, en dus dat de velden erbij moeten komen in code ipv via display of document.write van JS.

Sorry, maar uit wat je hier zegt blijkt dat je niet echt een idee hebt waar je mee bezig bent.. en dat is helemaal geen probleem, maar ga dan niet doen of je alles al weet

[ Voor 6% gewijzigd door Bosmonster op 22-06-2009 21:32 ]

[TeeDee]

vmsw schreef op maandag 22 juni 2009 @ 21:21:
[...]

Ik weet wat AJAX is, ik gebruik het veelvuldig, maar het is een prima methode om aan te roepen, en te laten checken (met php) welk vakje gekozen is, en dus dat de velden erbij moeten komen in code ipv via display of document.write van JS.
En omdat ajax prettig qua werking is, gezien t feit er niet onnodige info ingeladen hoeft te worden die eventueel later met javascript uitgevoerd moet worden, is het een aardige methode. Vandaar.
[...]

Over het 'overkill' gedeelte heen gelezen?

Deze code bedoelde ik totaal niet? Deze heb ik uiteraard al, en dan zelfs in 1 regel .

Pseudo code... En als je die 'code al op 1 regel' hebt waarom vermeld je dat dan niet? Kant-en-klare code krijg je hier (in ieder geval van mij) niet.

Ik bedoel het volgende:
Je klikt op rondje_a, en krijgt veld a te zien. Echter besluit je toch voor rondje_b te gaan, dan moet veld_a verdwijenen, en veld_b komen. Echter wil ik niet bij de onchange/onclick van rondje_b zetten dat a moet verdwijnen, want dat maakt rommelig/onhandig. Hoe kan ik dat voorkomen.

Nogmaals, alles via Javascript (en dus niet via 'AJAX') hiden en alleen het relevante veld laten zien is imo een prima oplossing.

HTML:

<input type='radio' onclick='ShowField(this);' id='rondjea' />
<input type='radio' onclick='ShowField(this);' id='rondjeb' />
<input type='radio' onclick='ShowField(this);' id='rondjec' />

Prima leesbaar en niet rommelig imo. Ongetwijfeld doen de grotere 'AJAX' / JS goden hier nog een plasje overheen, maar goed.

[vmsw]

Sorry, misschien ben ik onduidelijk, maar ik bedoel toch echt dat het vak weer moet verdwijnen zodra een ander rondje gekozen is. Daar zit de moeilijkheid. Het weghalen of weergeven ZELF gaat prima...

TeeDee schreef op maandag 22 juni 2009 @ 21:32:
[...]

Over het 'overkill' gedeelte heen gelezen?

Nope, het is alsnog een prima methode, want soms gaat het om complete extra formulieren met uitgebreide afbeeldingen die ingeladen moet worden. Dan is het wel zo prettig als dit live geladen wordt ipv voorgeladen.

[ Voor 70% gewijzigd door vmsw op 22-06-2009 21:47 ]

[tonyisgaaf]

Wat is er mis met een beetje verbose zijn in je code? Je kunt toch vrij simpel een generieke functie schrijven welke door alle te verbergen elementen loopt, bijvoorbeeld een class of style verwijdert en de juiste class of style toekent aan het te tonen element?

Vanwaar de neiging om het met "pure magic" te doen? Ik ben verward, aan de ene kant lijkt het alsof je weet wat je doet, aan de andere kant wil je dat alles automagisch gaat.

[TeeDee]

vmsw schreef op maandag 22 juni 2009 @ 21:40:
Sorry, misschien ben ik onduidelijk, maar ik bedoel toch echt dat het vak weer moet verdwijnen zodra een ander rondje gekozen is. Daar zit de moeilijkheid.

Wil je dat het vak helemaal uit de source weg gaat? Dus niet alleen hiden?
Dat zal je zo met JS niet lukken, tenzij je je hele formulier gaat opbouwen met JS.
Ik vermoed dat je issues hebt met het serverside parsen van je formulier.

Simpel op te lossen: set een hidden field met de value van het zojuist gekozen 'rondje'. Serverside kan je hierop checken.

[André]

Volgens mij wil vmsw de inhoud van de vakken pas inladen met AJAX als de bijbehorende radio is aangeklikt. Dit omdat de vakken nogal een grote inhoud kunnen hebben.

Toch?

[FragFrog]

vmsw schreef op maandag 22 juni 2009 @ 21:21:
en dus dat de velden erbij moeten komen in code ipv via display of document.write van JS.

In plaats van document.write kun je beter een node genereren en die middels document.addChild toevoegen aan de parent node van waar je veld_x moet komen. Op die manier is die node ook simpel weer te verwijderen.

Als alternatief kun je ook een functie maken die alle velden verbergt (danwel door er automatisch overheen te loopen, danwel elk handmatig verbergt) - vervolgens doe je wat TeeDee bijvoorbeeld al postte en activeer je enkel de node die je moet hebben. In pseudo-code krijg je dan iets als:

code:

function changeField (source) {
  hideAllFields();
  showField (source);
}

//edit 'k ben weer lekker snel

Wat betrefd al dan niet voorladen: in mijn ervaring vinden users het een stuk fijner om even een halve seconde langer te wachten terwijl je op de achtergrond extra gegevens inlaadt dan om continue een seconde of wat te moeten wachten na elke keuze. Zie het als een youtube filmpje kijken: je hebt liever dat'ie even wat langer doorbuffert dan dat je om de tien seconden een hapering ziet. Daar zit natuurlijk een afweging in, maar als je formulieren zoveel extra gegevens moeten laden vraag ik me af of het sowieso niet beter is deze over verschillende pagina's te spreiden.

[ Voor 27% gewijzigd door FragFrog op 22-06-2009 21:56 ]

[vmsw]

FragFrog schreef op maandag 22 juni 2009 @ 21:50:
[...]
Als alternatief kun je ook een functie maken die alle velden verbergt (danwel door er automatisch overheen te loopen, danwel elk handmatig verbergt) - vervolgens doe je wat TeeDee bijvoorbeeld al postte en activeer je enkel de node die je moet hebben. In pseudo-code krijg je dan iets als:

code:

function changeField (source) {
  hideAllFields();
  showField (source);
}

Zoiets bedoel ik ... dit is dan ook ongeveer waar ik eindigde, echter hoopte ik beter te bedenken, gezien het feit de functie "hideAllFields" natuurlijk niet zo netjes is,omdat je teveel laat doen. Dus ik hoopte dat iemand een idee had hoe dit beter kon.
Dus, de vraag: kan dit netter? Je moet nu immers in de functie hideAllFields de namen van alle velden die (eventueel) getoond worden definiëren. En het mooiste zou zijn als hij dat automatisch zou weten aan de hand van de ander gekozen rondjes. Dus eigenlijk het onthouden van welke velden reeds weergeven worden.

En ja, het gaat dus gewoon om efficiënt met code werken, manieren verzinnen lukt meestal wel, maar netjes met code omgaan is nog een kunst.

En voor mensen die me voorheen hielpen: excuses voor de onduidelijkheid in mijn vraag (die blijkbaar verkeerd laat denken...), toch dank voor hulp tot dusver in ieder geval

[ Voor 30% gewijzigd door vmsw op 22-06-2009 21:59 ]

[TeeDee]

Ik geef het op. Echt waar...

[Bosmonster]

vmsw schreef op maandag 22 juni 2009 @ 21:53:
[...]
Dus, de vraag: kan dit netter? Je moet nu immers in de functie hideAllFields de namen van alle velden die (eventueel) getoond worden definiëren.

Nee en nee. Je hide alle elementen, die hoef je niet te definieren. Je hebt vast wel eens van iets als query-selectors gehoord.

Als je dat wilt verbeteren (wat niet echt een verbetering is overigens), zou je een class kunnen zetten zoals 'visible' en alleen dat element weer onzichtbaar maken. Komt overigens zo goed als op hetzelfde neer in re praktijk.

[vmsw]

TeeDee schreef op maandag 22 juni 2009 @ 21:56:
Ik geef het op. Echt waar...

Wel bedankt voor de moeite, en excuses voor onduidelijkheid of vergezochtheid.

Bosmonster schreef op maandag 22 juni 2009 @ 23:17:
[...]
Als je dat wilt verbeteren (wat niet echt een verbetering is overigens), zou je een class kunnen zetten zoals 'visible' en alleen dat element weer onzichtbaar maken. Komt overigens zo goed als op hetzelfde neer in re praktijk.

Dat lijkt me eigenlijk wel wat, aangezien je dan geen onnodige dingen laat doen, al zal het in praktijk wel weer wat uitgebreidere code opleveren..

Tnx allemaal in ieder geval , ik ga het zo doen.

[Bosmonster]

vmsw schreef op dinsdag 23 juni 2009 @ 12:01:
[...]

Dat lijkt me eigenlijk wel wat, aangezien je dan geen onnodige dingen laat doen, al zal het in praktijk wel weer wat uitgebreidere code opleveren..

Tnx allemaal in ieder geval , ik ga het zo doen.

Als je een library als jQuery gebruikt heb je dan geen extra code. Alleen maakt het in de praktijk niet uit zoals gezegd. Je doet ook eigenlijk geen extra dingen als je een element dat al onzichtbaar is onzichtbaar maakt

Je zult als je op classname wilt filteren waarschijnlijk toch eerst alle elementen op moeten halen om vervolgens de classes te gaan checken. Dat zorgt voor meer overhead dan ze gewoon allemaal even te hiden

[H004]

vmsw schreef op maandag 22 juni 2009 @ 21:53:
[...]

Zoiets bedoel ik ... dit is dan ook ongeveer waar ik eindigde, echter hoopte ik beter te bedenken, gezien het feit de functie "hideAllFields" natuurlijk niet zo netjes is,omdat je teveel laat doen. Dus ik hoopte dat iemand een idee had hoe dit beter kon.
Dus, de vraag: kan dit netter? Je moet nu immers in de functie hideAllFields de namen van alle velden die (eventueel) getoond worden definiëren. En het mooiste zou zijn als hij dat automatisch zou weten aan de hand van de ander gekozen rondjes. Dus eigenlijk het onthouden van welke velden reeds weergeven worden.

Kijk nog eens even heel goed naar de code in de eerste reactie van dit topic. Dat is toch PRECIES wat jij wil? Zodra je op een rondje klikt worden alle velden verborgen, op het veld na waar je op geklikt hebt.

JavaScript:

function ShowField(elemToShow) {
    var fieldtoShow = document.getElementById(elemToShow);
    // Je moet alleen de volgende regel wat aanpassen zodat de juiste radio-buttons worden aangesproken...
    foreach(formfield field in document.forms[]) {
        if(!(field == fieldtoShow) ) {
            field.style.visibility= 'hidden'
        }
        else {
            field.style.visibility= 'visible'
        }
    }
}

HTML:

<input type='radio' onclick='ShowField(this);' id='rondjea' />
<input type='radio' onclick='ShowField(this);' id='rondjeb' />
<input type='radio' onclick='ShowField(this);' id='rondjec' />