-
29-07-2007, 16:02 #1
xHTML/JS: input velden weergeven door keuze via select form
Hey
Ik zou graag het volgende willen maken.
Ik heb een form, met daarin een select tag met aantal getallen.
Nu als men een getal selecteert , moeten er inputvelden gemaakt worden.
m.a.w., selecteert men het getal '2', dan moeten er 2 inputvelden weergegeven worden.
Iemand enig idee hoe ik dit doe in javascript?
PHP wil ik hier niet voor gebruiken, beetje overkill als het via clientzijde zeker zonder problemen kan denk ik.
mvgMayday - The Religion,
In music & dance I express myself as a ember of a higher community.... I have forgotten how to walk and speak and I am towards flying in the air. Raving.
http://www.djseth.beno votes
-
-
29-07-2007, 23:54 #2
Je zou hier zelf een hele js voor kunnen schrijven, maar het gemakkelijkste is om jquery te downloaden en dan $('#combobox').click(function(){laatInputsZien(thi s.value);}); te schrijven tussen wat scripttags (#combobox is je keuzeveld voor aantal inputvelden). En dan schrijf je nog laatInputsZien(aantal):
function laatInputsZien(aantal) {
$('#formulier input').hide(); // eerst allemaal wegdoen (display:none; in feite)
$('#formulier input').lt(aantal).show(); // lt = 'less than', pakt er minder dan index=aantal
}
En dat is het zowat
, op 5 regels code. Je zit wel met de overhead van jquery zelf ntk (rond de 20kB), maar dat zou ik er wel bij nemen, je kan er immers nog wel wat meer mee dan alleen dat. Of je schrijft je eigen js library ntk 
EDIT
Sorry had even de jquery syntax niet juist, kan zijn dat er nog syntaxfouten instaan, indien dat het geval is bezoek je best even http://docs.jquery.com/.Last edited by L0|2|23; 30-07-2007 at 00:02.
no votes
-
30-07-2007, 10:54 #3Crew Member
- Registered
- 01/09/02
- Location
- Peutie
- Posts
- 7,664
- iTrader
- 0
- Mentioned
- 4 Post(s)
- Reputation
- 13/105
Zoveel code is er nu ook niet nodig hoor. Je voorziet een drop down en als die geselecteerd is roep je de volgende code op ofzo:
En dan voorzie je in je html code een div die inputs heet:Code:function addInput(var nbr) { var x = document.getElementById("inputs"); for (i = 1; i <= nbr; i++) { x.innerHTML += "<input type=\"text\" id=\"field_" + i +"\" />"; } }Alle input fields zullen dan worden toegevoegd.Code:<div id="inputs"></div>
no votes
-
30-07-2007, 11:23 #4
idd, ik snap niet wrm je een library van 20k moet downloaden voor 1 functionaliteit...
Anyway, I gave it a shot:
http://joggink.be/snippets/js/selectInputs/
Iets wat meer code dan hierboven, maar hey, you can't have it all.Code:function handleChange(){ var oSel = document.getElementById('aantal'); var oFrm = document.getElementById('extraInputs'); var a = parseInt(oSel.options[oSel.selectedIndex].value), n = 0; oFrm.innerHTML = ''; for (;n<a;n++){ // een label én een input aanmaken var oLbl = document.createElement('label'); oLbl.setAttribute('for', 'input' + n); var tLbl = document.createTextNode('Waarde ' + n); oLbl.appendChild(tLbl); var oInp = document.createElement('input') oInp.type = 'text'; oInp.id = 'input' + n; oInp.name = 'input' + n; oFrm.appendChild(oLbl); oFrm.appendChild(oInp); } }no votes
-
30-07-2007, 11:35 #5Approved 9liver
- Registered
- 28/11/03
- Location
- Drongen
- Posts
- 6,665
- iTrader
- 5 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 6/28
document.getElementById is dacht ik, niet zo een goed idee als je het voor form elementen wil gebruiken. Sommige browsers kunnen daar problemen mee hebben. Ik denk dat ik zo iets al heb tegengekomen maar weet niet precies meer hoe..
het best wat je doet is:
var oSel = document.forms["naamForm"].aantal
denk dat dit beter is...no votes
-
30-07-2007, 13:26 #6
Het enigste dat ik kan bedenken is dat dit soms een probleem kan opleveren:
id = document.getElementById('id');
Omdat de variabele naam gelijk is aan de "id naam van het element". Ik heb dit echter alleen nog maar tegengekomen in IE.no votes
-
30-07-2007, 17:57 #7
Opmerkingen:
* Je moet je inputs genummerde id's geven (ze elk een id geven is op zich al niet echt proper).
* En hoe zou jij de event dan registeren bij de <select>? Een crossbrowser addEvent() functie zou nog eens 10 regels code zijn, en inline event registering is alles behalve dynamisch.
Ik zeg niet dat jquery perfect is, 20kbyte lijkt mij ook eerlijk gezegd ook veel, maar als je meer dan alleen deze "showInputVelden" functie gaat realiseren kan jquery misschien wel zijn bestandsgrootte rechtvaardigen. Anders zou ik de addEvent() functie er nog bijnemen
De implementatie van jquery, hoewel ze volledig is, is alles behalve optimaal of leesbaar. Ik ben een eigen js library aan het schrijven die max 5kbyte zal zijn en vergelijkbare functionaliteit gaat bieden als jquery (gelijkaardige syntax en features), alleen cleaner en optimaler geimplementeerd (jquery's selector engine is niet van de snelste).Last edited by L0|2|23; 30-07-2007 at 18:03.
no votes
-
30-07-2007, 18:47 #8
1) hoe zou jij je inputs een genummerde id meegeven als je ze niet 1 per 1 een id meegeeft?
2) de onchange event registreren bij de select is wat mij betreft niet echt heel moeilijk, ofwel doe je het inline, en als je echt je code en opmaak gescheiden wil houden kan het met document.getElementById('selectid').onchange = placeInputs;
Jquery is verre van perfect, de slickspeed test toont dit redelijk goed aan... En de addEvent functie? Toch nie die van PPK en Dean Edwards? De enige die volgens mij met een goede addEvent functie kwam was Tino Zijdel.
Anyway, zoals hierboven, de onchange method wordt ondersteund door:
Internet explorer 3.0+
Mozilla 1.0+
Netscape 2.0+
Oper 7.0+
Safara 1.0+
Dus, waarom in godsnaam een addEvent handler schrijven voor een niet geavanceerde functie?
Als iemand een fuckin' 2pk'tje komt kopen, smeer je hem toch ook geen Range rover sport full option aan...no votes
-
30-07-2007, 19:00 #9
merci voor de replies :-).
Ik ga er mij eens in verdiepen, want javascript is voor mij nog redelijk chinees. Bestaan er eigenlijk goede tutorials daarvoor?Mayday - The Religion,
In music & dance I express myself as a ember of a higher community.... I have forgotten how to walk and speak and I am towards flying in the air. Raving.
http://www.djseth.beno votes
-
30-07-2007, 20:17 #10
Ik zou zeggen, neem de basis eens door, en van daaruit zie je wel hoe het evolueert.
http://www.w3schools.com/js/default.aspno votes
-
30-07-2007, 20:21 #11Member
- Registered
- 12/10/02
- Location
- mars
- Posts
- 14,319
- iTrader
- 2 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
http://w3schools.com/htmldom/default.asp is ook wel nuttig om bij de hand te hebben (dom is een boom structuur van uw html-code waar java extensief gebruik van maakt).
no votes
-
30-07-2007, 23:02 #12
Dit begint lichtjes offtopic te gaan (ik denk dat de persoon in kwestie zijn probleem ondertussen al in het tienvoud opgelost is). Maar ik wou toch even hier nog op ingaan:
Ik ben in de eerste plaats *helemaal niet* voor het idee om elke input een eigen id te geven, dus heb ik ook geen antwoord op die vraag. Het vertroebelt de html imo, maar anderzijds kan je wel het argument maken dat een 20kbyte javascript implementatie van css selectoren daar niet tegen opweegt.
Ah, mijn favoriet onderwerp. PPK is zelf fan van wat je hier als voorbeeldcode geeft. Het nadeel daarvan is dat op die manier de <select> maar één changeevent kan hebben. Toegegeven in dit geval zal er ook maar één zijn, maar in het algemeen is dat niet zo.2) de onchange event registreren bij de select is wat mij betreft niet echt heel moeilijk, ofwel doe je het inline, en als je echt je code en opmaak gescheiden wil houden kan het met document.getElementById('selectid').onchange = placeInputs;
Jquery is verre van perfect, de slickspeed test toont dit redelijk goed aan... En de addEvent functie? Toch nie die van PPK en Dean Edwards? De enige die volgens mij met een goede addEvent functie kwam was Tino Zijdel.
Hij zag de problemen van deze methode en van de simpele addEvent van Scott Andrew LePera wel in en organiseerde een wedstrijd om de functie op een korte en efficiente manier te laten voldoen aan de belangrijkste eisen:
* Er kunnen meerdere verschillende functies gebind worden aan elke combinatie van object en event.
* Die functies moeten ook terug geremoved worden van de event.
* De betekenis van het this keyword gaat niet verloren.
* Eénzelfde functie kan voor elke combinatie van object en event slechts éénmaal geregistreerd worden.
* Bij voorkeur wordt ineens het juiste event object meegegeven.
De winnaar werd John Resig (bekend van jquery), omwille van het goede idee en relatief korte implementatie. Zijn oplossing heeft echter nog een aantal problemen, opgemerkt door PPK's vele lezers en ongetwijfeld teleurgestelde deelnemers:
* Het steunt op de toString() methode van functies voor zijn unieke keys, wat traag is aangezien de functie daarvoor gedecompiled moet worden.
* Het is nog steeds mogelijk om in IE de functie verschillende keren te attachen.
* Er zaten oorspronkelijk wat memory leaks in.
Dit wordt allemaal mooi samengevat op deze pagina, waarin de auteur voorstelt om een aangepaste versie van Dean Edwards oplossing te gebruiken. Zijn oplossing lost de voorgaande problemen op, maar imo te lang en ook gebaseerd op een globale counter (bleh).
Ik ben zelf aan het werk geslagen omdat ik John's concept beter vond dan die van Dean, alleen mankeerde hij een deftige keygenerator en een manier om meervoudig toevoegen van dezelfde functie aan eenzelfde object/event te voorkomen. Het is bijna even compact als John's wedstrijdinzending, maar lost wel de resterende problemen op:Code:function addEvent(o, type, fn) { if(o.addEventListener) o.addEventListener(type, fn, false); else { for(var key=-1, i=1; (key=!o['e1'+i]||(key<0&&!o['e0'+i])?i:key) && o['e0'+i]; ++i) if(o['e0'+i]===type && o['e1'+i]===fn) return 0; o['e0'+key] = type; o['e1'+key] = fn; o.attachEvent('on'+type, o['e2'+key]=function(){o['e1'+key](window.event);}); } } function removeEvent(o, type, fn) { if(o.removeEventListener) o.removeEventListener(type, fn, false); else { for(var i=1; o['e0'+i]; ++i) if(o['e0'+i]===type && o['e1'+i]===fn) { o.detachEvent('on'+type, o['e2'+i]); delete o['e1'+i]; delete o['e2'+i]; break; } } }Nee je hebt gelijk, tenzij die persoon in de toekomst nog goed gebruik zou kunnen maken van die Range RoverAls iemand een fuckin' 2pk'tje komt kopen, smeer je hem toch ook geen Range rover sport full option aan...
.
Ik heb die van Tino nog niet gezien, heb je een link?Last edited by L0|2|23; 31-07-2007 at 13:03.
no votes
-
30-07-2007, 23:27 #13
Tino Zijdel = Crisp.
Om toch nog even verder offtopic te blijven:
De methode van John Resig was buggy, en de oplossing die PPK gebruikte trekt eerlijk gezegd op geen zak. PPK mag dan wel gigantisch veel zaken op z'n quirksmode pagina gezet hebben (die zelf niet ééns volgens z'n 'verplicht' regels is opgesteld), Tino Zijdel (crisp) heeft zich al veel meer bewezen op het gebied van javascript, google anders eens op dhtml Lemmings, een contest van 2003 op GOT.
We kunnen blijven oeverloos discussiëren over het gebruik van id's en of het semantisch verantwoord is, en of het gebruik van jquery in dit geval een handige oplossing was naar de toekomst toe, maar imho is een simpele oplossing meer gepast aangezien de threadstarter niet zo thuis is in de javascript wereld.
Anyway, over javascript kan je blijven discussiëren, het gebruik van libraries, object prototypen verboten is...no votes
-
30-07-2007, 23:51 #14
Ah, wel, hierboven heb ik nog naar hem gelinked, dus ik kende hem onrechtstreeks wel, albeit niet bij naam. Zijn aangepaste oplossing gebaseerd op die van Dean is imo ook te lang, en zoals je zelf al aangeeft is knoeien met Object.prototype ook niet echt aangeraden. Ik blijf voorstander van mijn eigen oplossing, die voor zover ik zie geen nadelen heeft en toch de breviteit van John's oplossing erft.
no votes
-
31-07-2007, 11:15 #15
Imo doet de lengte van een script er niet echt toe, de functionaliteit wel... Er moet natuurlijk wel een evenwicht zijn tussen de functionaliteit en de filesize...
Object.prototype kan wel een oplossing zijn naar bepaalde functies toe die 'oudere' browsers niet ondersteunen, maar dat zijn keuzes die je maakt. (Les goûts et les couleurs, ça ne se dispute pas)no votes

