Toon posts:

[JS] Form validatie gebaseerd op style Display*

Pagina: 1
Acties:

Verwijderd

Topicstarter
Ik gebruik in een script een aantal formchecks om er voor te zorgen dat bezoekers alles van een formulier in gevuld hebben.

Ik doe dit door middel van een Warning Window gebruikmakend van Javascript omdat me dit het meest duidelijke lijkt. Ik gebruik ook document.getElementById('naam').style.display om wat formfields tevoorschijn te laten komen wanneer dit gewenst is door middel van een radiobutton.

Het probleem is dat de formcheck ook toegepast wordt op de hidden formfields wanneer deze niet benodigd zijn en dus hidden zijn. Ik vroeg mij dus af of ik de style.display op een of andere manier kon toepassen op het javascript zodat deze in het geval van

code:
1
style="display:none;"


Op een div waar de desbetreffende formfields in staan.

Het zou op die manier zo kunnen zijn dat de checks op die hidden forms dan niet toegepast zullen worden en dus geen struikelblok voor het script zullen zijn.

Verwijderd

gewoon kijken of het geen hidden field is?
inputFields = getElementByTagName("input")
for(...
if(inputField[i].getAttribute("type") != "hidden")

Verwijderd

Topicstarter
Ik moet dus in het javascript gaan kijken of het een hidden field is om hem "aan" of "uit" te zetten ?

Ik weet niet zeker of je de vraag goed begrijpt

  • RuudBurger
  • Registratie: Oktober 2003
  • Laatst online: 26-11 11:04
waarom maak je niet gewoon een if statement voor die radio button?

if radiobutton == checked {
controlle uitvoeren
}

zoiets :P

Verwijderd

Topicstarter
Sillymidget schreef op maandag 14 mei 2007 @ 01:38:
waarom maak je niet gewoon een if statement voor die radio button?

if radiobutton == checked {
controlle uitvoeren
}

zoiets :P
Dat is geen slecht idee alleen zal ik de hele pagina moeten refreshen wanneer ik dit in PHP doe en dat wil ik niet.

Dat is namelijk met de hidden layer op dit moment ook niet noodzakelijk.

  • Janoz
  • Registratie: Oktober 2000
  • Laatst online: 02:32

Janoz

Moderator Devschuur®

!litemod

Verwijderd schreef op maandag 14 mei 2007 @ 01:34:
Ik moet dus in het javascript gaan kijken of het een hidden field is om hem "aan" of "uit" te zetten ?

Ik weet niet zeker of je de vraag goed begrijpt
Ik denk dat je je vrag erg onduidelijk gesteld hebt. Bij hidden formfields denk je in eerste instantie aan <input type="hidden" ... en niet aan formuliervelden die op een hidden div staan oid.

Verder zie ik het probleem niet zo. Ik neem aan dat je weet welk element gehidden is (tov het formfield). Je moet het immers ook aan en uit kunnen zetten. Je kunt dat toch gewoon met get parent en style.display makkelijk controleren of het formfield verborgen is?
Dat is geen slecht idee alleen zal ik de hele pagina moeten refreshen wanneer ik dit in PHP doe en dat wil ik niet.
Hoezo dat? Het stukje psuedo code wat daar geplaatst is heeft toch helemaal niks met php en/of serverside code te maken?

[ Voor 15% gewijzigd door Janoz op 14-05-2007 08:16 ]

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'


Verwijderd

Topicstarter
Janoz schreef op maandag 14 mei 2007 @ 08:14:
[...]


Ik denk dat je je vrag erg onduidelijk gesteld hebt. Bij hidden formfields denk je in eerste instantie aan <input type="hidden" ... en niet aan formuliervelden die op een hidden div staan oid.
Zit wat in met die hidden formfields, echter ze staan dus in een div waarmee ik ook aangeef dat ze tevoorschijn komen of verdwijnen.
Verder zie ik het probleem niet zo. Ik neem aan dat je weet welk element gehidden is (tov het formfield). Je moet het immers ook aan en uit kunnen zetten. Je kunt dat toch gewoon met get parent en style.display makkelijk controleren of het formfield verborgen is?


[...]
Ja ik kan het controleren, maar waarom ? Ik kan toch beter iets met een document.getElementById('MyRadioButtoName').selected { } doen en je javascript hierin opsluiten ?

Ik heb dat alleen nog niet werkend gekregen.
Hoezo dat? Het stukje psuedo code wat daar geplaatst is heeft toch helemaal niks met php en/of serverside code te maken?
Blijkbaar niet maar er werd ook niet vermeld dat dit in Javascript moest, PHP enzo is een ander forum, ik kon er even niets mee.

  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Wat is nu concreet je probleem? Moet zeggen dat je wel uitblinkt in het wazig vertellen van je probleem ;)

Zoals ik het nu begrijp doe je form controle (met JS?) en dat wil je graag uitschakelen voor inputs die je niet zichtbaar hebt gemaakt met CSS?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


Verwijderd

Topicstarter
BtM909 schreef op maandag 14 mei 2007 @ 11:45:
Wat is nu concreet je probleem? Moet zeggen dat je wel uitblinkt in het wazig vertellen van je probleem ;)
Mijn welgemeende excuus ;) Ik probeer het zo duidelijk mogelijk voor iedereen uit te leggen zodat iemand anders er straks ook nog wat aan heeft.
Zoals ik het nu begrijp doe je form controle (met JS?) en dat wil je graag uitschakelen voor inputs die je niet zichtbaar hebt gemaakt met CSS?
Helemaal goed. Ik heb het dus geprobeerd met bovenstaande oplossingen, werkt helaas niet echt met if {} in een javascript.

  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Waarom check je dan niet in je form validatie wat de display style is van je element. Is het none, dan sla je die over :?

En je loopt al een tijdje rond, dus je moet weten dat wij niet van afhaalscripts houden ;)

Je hebt welgeteld twee regels code (1 CSS en 1 deel JS) geplaatst. Zet je code zoals jij denkt dat het zou moeten werken tussen de bijbehorende tags [code=html][/] [code=css][/] [code=js][/] en vertel erbij wat er niet werkt en waarom je denkt dat het niet werkt. Iets meer zelf inzet verwachten we wel van je :)

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11 15:46

OkkE

CSS influencer :+

Dit zou gewoon moeten werken...
code:
1
2
3
if (document.getElementById('theID').style.display != 'none') {
doCheck();
}

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


Verwijderd

Topicstarter
BtM909 even voor de duidelijkheid, ik vraag niet om kant en klare code, maar ik kom echt echt niet uit om javascript opzich te disabelen, divs enzo werken prima, dit alleen niet en ik probeer legio verschillende manieren. Ik probeer er alleen uit te komen waarom de meeste varianten wel werken op divs maar niet op javascript of binnen javascript zelf.

Dit is dus wat ik probeer ongeveer:

JavaScript:
1
2
3
4
 <script language="JavaScript" type="text/javascript"><!--
  if (document.getElementById('radiobuttonname').checked == true) { hie de rest van mijn javascript }

</script>


Ik heb dit onderandere ook geprobeerd met:

code:
1
if (document.getElementById('div die ik hide waarin de formfieldstaat + deze javascript').style.display != 'none')



En zo nog echt legio varianten.

Het lijkt erop dat ik
code:
1
if (document.getElementById()


gewoon niet kan gebruiken binnen een javascript om deze aan of uit te zetten, om gek van te worden |:(

  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Kijk eens goed wat OkkE typt ;)

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


  • --MeAngry--
  • Registratie: September 2002
  • Laatst online: 30-11 21:13

--MeAngry--

aka Qonstrukt

Sowieso hoef je == true al niet te gebruiken omdat het al naar true evalueert. Daarnaast moet je ook niet vergeten dat het name en id attribuut twee verschillende zaken zijn. ;)

Tesla Model Y RWD (2024)


Verwijderd

Topicstarter
BtM909 schreef op zaterdag 19 mei 2007 @ 02:48:
Kijk eens goed wat OkkE typt ;)
Hier heb ik echt uren, letterlijk uren mee gestoeid, maar het werkt niet... vraag me niet waarom... maar "hij doet het gewoon niet".

Ik ben al bezig (geweest) een simpele formcheck in elkaar te zetten om het zo simpel mogelijk na te bootsen, ik geloof zijn code absoluut trouwens.

Ik heb niet uit kunnen vinden of iets anders in de huidige code dit beïnvloed, daar de hidden divs wel prima werken.
--MeAngry-- schreef op zaterdag 19 mei 2007 @ 02:49:
Sowieso hoef je == true al niet te gebruiken omdat het al naar true evalueert. Daarnaast moet je ook niet vergeten dat het name en id attribuut twee verschillende zaken zijn. ;)
Ik heb ze beide geprobeerd en er veel naar gezocht, ik moet het gewoon op de juiste manier gebruiken.. ik gebruik sowiezo de Id variant omdat dit handiger is om 2 buttons in een groep individueel te checken.

[ Voor 31% gewijzigd door Verwijderd op 19-05-2007 02:56 ]


  • --MeAngry--
  • Registratie: September 2002
  • Laatst online: 30-11 21:13

--MeAngry--

aka Qonstrukt

Kun je geen simpele versie online gooien. En heb je al eens gekeken of je niet gewoon domweg javascriipt errors krijgt. Kan ook altijd nog gewoon een typefout zijn oid.

Tesla Model Y RWD (2024)


Verwijderd

Topicstarter
--MeAngry-- schreef op zaterdag 19 mei 2007 @ 02:58:
Kun je geen simpele versie online gooien. En heb je al eens gekeken of je niet gewoon domweg javascriipt errors krijgt. Kan ook altijd nog gewoon een typefout zijn oid.
Ik kan misschien wel even wat online gooien als ik er met een simpele versie ook niet uit kom.

Ik krijg juist geen javascript errors, dat is zo vreemd, anders was het makkelijker geweest.

Omdat de div die ik laat zien standaard op

code:
1
display:none;


staat gaat het fout denk ik.

Als ik:

code:
1
if (document.getElementById('id-van-div').style.display == 'none') {}


Doe werkt het uiteraard wel, met != gewoon niet.

Met een == 'none' reageert deze uiteraard niet meer op of de div wel of niet naar voren komt op de pagina, maar dat deed hij bij != toch ook al niet.

Ik zie dus de formcheck met een == 'none' terug in mijn warning bericht, met een != niet, ook niet als ik de div wel of niet zie in de pagina gebruikmakend van de radiobuttons.

Mhh, lastig.

[ Voor 39% gewijzigd door Verwijderd op 19-05-2007 03:38 ]


  • BikkelZ
  • Registratie: Januari 2000
  • Laatst online: 24-11 23:24

BikkelZ

CMD+Z

Voor zover ik het begrepen heb heb je een formulier waarbij je de ene keer die, en de andere weer een andere groep van invulvelden verplicht wil laten invullen bijvoorbeeld doordat iemand eerder een bepaalde radiobutton heeft aangeklikt.

Right?

Ik zou een array maken met alle elementen en dan dynamisch die in je pagina zetten, dan heb je meteen een referentie naar al je input-objecten. Ik ben er zelf altijd voor om op het moment dat ik echt dynamisch aan de slag ga met de opmaak van mijn pagina dan eigenlijk al meteen te beginnen in javascript, zodat ik meteen alle objecten in mijn hand heb in plaats van dat ik ze eerst moet gaan 'zoeken'.

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var inputsToCheck = Array();
inputsToCheck['naam'] = document.createElement('input');
inputsToCheck['adres'] = document.createElement('input');
inputsToCheck['actiecode'] = document.createElement('input');
// etc

function initForm()
{
parentDiv = document.getElementById('formdiv'); // het object waaraan de inputs gehangen worden
for (var inp in inputsToCheck)
{
parentDiv.appendChild(inputsToCheck[inp]);
}
}


Als je op submit drukt, dan moet hij dus die array doorlopen en kijken wat hun display of visibility status is (ik ben voor het geval dat er dingen op gaan duiken en weer verdwijnen altijd voor visibility, omdat je er dan voor kunt zorgen dat het beeld niet op en neer springt).

Overigens heb ik niet in het eerste stuk bij alle objecten gelijk de visibility of display en de name ingesteld, wat je natuurlijk wel netjes moet doen. Ook moet je in je body tag een onload='initForm()' zetten anders zie je niks. Bedenk zelf ook even de functie waarbij je door de array loopt en checkt op visibility of display. Aangezien je die zelf van te voren altijd expliciet gezet hebt, geeft hij altijd een waarde terug.

[ Voor 13% gewijzigd door BikkelZ op 19-05-2007 13:51 ]

iOS developer


Verwijderd

Topicstarter
Je zit helemaal goed met wat ik bedoel.

Dank je voor je voorbeeld, ik kwam dergelijke code ook tegen via google tijden mijn zoektocht, ik heb er alleen 1 probleem mee.

Omdat ik nu het javascript per formfield zet moet ik mijn gehele code om gaan bouwen. Dit moet redelijk te doen zijn aangezien de manier die jij aangeeft volgens mij vele malen overzichtelijker is.

Ik moet even kijken hoe ik implementeer dat ik ook email-adressen aan de hand van de schrijfwijze valideer, dit moet ook wel te doen zijn.

Ik ben er van overtuigd dat jouw manier de beste is, wat ik alleen echt niet uit kan staan is dat de manier zoals OkkE hem aangeeft niet werkt, dit zou toch echt out of the box moeten werken.

Ik heb ook nog gezocht naar een manier om een heel stuk code in the HTML uit te schakelen wanneer ik een div niet zou willen laten zien, Javascript zou het dan ook niet moeten doen.

^^ is alleen wel een dirty way.

  • BikkelZ
  • Registratie: Januari 2000
  • Laatst online: 24-11 23:24

BikkelZ

CMD+Z

Waarschijnlijk is het qua performance niet zo goed te doen om iedere webpage compleet helemaal dynamisch in het geheugen van de browser te hebben, maar alleen die zaken die direct voor het renderen van de pagina van belang zijn.

iOS developer


  • user109731
  • Registratie: Maart 2004
  • Niet online
Verwijderd schreef op zaterdag 19 mei 2007 @ 14:21:
wat ik alleen echt niet uit kan staan is dat de manier zoals OkkE hem aangeeft niet werkt, dit zou toch echt out of the box moeten werken.
Late reactie maar dat is toch gewoon een kwestie van debuggen? Even extreem:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
alert('start');

var el = document.getElementById('theID');
alert('el: ' + el);
el.style.backgroundColor = 'blue';

var display = el.style.display;
alert('display: ' + display);

if (display == 'none') alert('display == none');
else alert('display != none');

Verwijderd

Topicstarter
BikkelZ schreef op zaterdag 19 mei 2007 @ 21:28:
Waarschijnlijk is het qua performance niet zo goed te doen om iedere webpage compleet helemaal dynamisch in het geheugen van de browser te hebben, maar alleen die zaken die direct voor het renderen van de pagina van belang zijn.
Dus jij zou het met een array doen ?

  • BikkelZ
  • Registratie: Januari 2000
  • Laatst online: 24-11 23:24

BikkelZ

CMD+Z

Verwijderd schreef op maandag 21 mei 2007 @ 00:04:
[...]


Dus jij zou het met een array doen ?
Nee, ik bedoel dat het een keuze is van de makers van de browser om niet altijd alle mogelijke parameters paraat te hebben staan van ieder object in een pagina.

iOS developer


Verwijderd

Topicstarter
BtM909 schreef op woensdag 16 mei 2007 @ 10:25:
Waarom check je dan niet in je form validatie wat de display style is van je element. Is het none, dan sla je die over :?
Dit wil ik graag nog even verifiëren.

Ik kan dus checken op de div, maar dit geeft een probleem en dat is dat deze standaard op none staat, dit werkt dus niet goed.

Ik kan de radiobutton controleren op wat hij als value heeft met een document.GetElemetentsById() maar dit blijkt niet zo handig te werken.

Een array wil ik even als laatste oplossing gebruiken, maar de vraag wat wijsheid is om te getten van het document, dus het element, de radiobutton of de layer die ik laat verdwijnen.

Verwijderd

Topicstarter
OK, even een frisse update, ik ben een nieuwe weg ingeslagen :9

Het blijkt dat ik een functie nodig ga hebben, waarom:

Ik zet natuurlijk wel de check, maar voer deze niet uit wanneer ik de pagina submit.

Wat OkkE zet werkt dus wel, maar wordt niet uitgevoerd in de pagina als ik deze submit.

Voorbeeld:

JavaScript:
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
    function doRadio(){
        // get radio button
        var el = document.getElementById('hiddenDivButton');
        if(el.checked){
            Rest van mijn javascript dat moet werken komt hier;
            }
        }
</script>


Ik kan dit natuurlijk runnen (volgens mij gebeurt dit voordat de formaction echt gedaan wordt) door onsubmit="doRadio()" toe te voegen aan mijn submitbutton.

Het probleem is alleen dat de form niet meer uitgevoerd wordt maar alleen de functie, welke nu niet werkt zo, en ik doorgestuurd wordt naar de volgende pagina.

Is dit een slimme oplossing ?


Ik geef niet zo maar op ;)

  • BikkelZ
  • Registratie: Januari 2000
  • Laatst online: 24-11 23:24

BikkelZ

CMD+Z

Met .submit() kun je een form met JS submitten. En dat kun je dus vanaf alle soorten events triggeren, eventueel met je checks er voor. Dan zit er dus geen submit <INPUT> meer op je pagina.

iOS developer


Verwijderd

Topicstarter
BikkelZ schreef op maandag 21 mei 2007 @ 22:15:
Met .submit() kun je een form met JS submitten. En dat kun je dus vanaf alle soorten events triggeren, eventueel met je checks er voor. Dan zit er dus geen submit <INPUT> meer op je pagina.
OK, dus een dergelijke submit zou het hele form opnieuw doorlopen en aan het eind van het form kan ik hem dan verzenden.

Ik weet redelijk wat je bedoelt... ik zal er eens wat bij zoeken, ik heb het vaag wel eens gezien ergens.

  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11 15:46

OkkE

CSS influencer :+

BikkelZ schreef op maandag 21 mei 2007 @ 22:15:
Met .submit() kun je een form met JS submitten. En dat kun je dus vanaf alle soorten events triggeren, eventueel met je checks er voor. Dan zit er dus geen submit <INPUT> meer op je pagina.
Ik zou een formulier op een website altijd via een gewone input-button versturen, anders sluit je alle mensen zonder javascript uit.

---

Als ik het goed begrijp wil je een check uitvoeren bij het versturen van een formulier?
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
fuction doChecks(){
    // Checks...
    if (noErrors) { 
        return true; 
    }
    else { 
        return false; 
        alert("Formulier kon niet verstuurd worden."); 
    }
}
</script>

<form action="" method="post" onsubmit="return doChecks()">
...
</form>

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • BikkelZ
  • Registratie: Januari 2000
  • Laatst online: 24-11 23:24

BikkelZ

CMD+Z

Tja het is voor de ene toepassing wat kritischer dan de andere natuurlijk, maar ik denk dat door dynamisch formulierelementen te laten verdwijnen en op te laten komen je de grens al gepasseerd bent.

Kortom:

Hoeveel krijgt een blinde mee van een pagina waarop dingen dynamisch verschijnen, verdwijnen of veranderen? Waarschijnlijk moet je dit hele concept laten vervallen op het moment dat je daar aan gaat denken.


Verder mag je volgens het W3C in de huige HTML-standaard nog steeds NOSCRIPT gebruiken, daar kun je altijd nog je submit INPUT in rossen. Server-side checken moet sowieso altijd.

[ Voor 18% gewijzigd door BikkelZ op 22-05-2007 09:48 ]

iOS developer


  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11 15:46

OkkE

CSS influencer :+

BikkelZ schreef op dinsdag 22 mei 2007 @ 09:46:
Tja het is voor de ene toepassing wat kritischer dan de andere natuurlijk, maar ik denk dat door dynamisch formulierelementen te laten verdwijnen en op te laten komen je de grens al gepasseerd bent.
Zolang je het verdwijnen door javascript laat doen, en standaard alles wél laat zien, is er in mijn ogen niets mis mee. :)
Kortom:

Hoeveel krijgt een blinde mee van een pagina waarop dingen dynamisch verschijnen, verdwijnen of veranderen? Waarschijnlijk moet je dit hele concept laten vervallen op het moment dat je daar aan gaat denken.
Het gaat in ook niet zo zeer om of een blinde het wel of niet mee krijgt, maar dat iemand zonder javascript (en dat zijn meer mensen als alleen blinden met een screen reader) het formulier kan gebruiken. Dat sommige velden misschien overbodig zijn, sja so be it. Maar velden toevoegen door javascript, die belangrijk zijn, zou ik nooit doen. Tenzij je javascript verplicht kunt stellen, maar dat is eigenlijk alleen in een intranet. :)
Verder mag je volgens het W3C in de huige HTML-standaard nog steeds NOSCRIPT gebruiken, daar kun je altijd nog je submit INPUT in rossen. Server-side checken moet sowieso altijd.
Klopt. Maar waarom met <noscript> en dat soort dingen werken, als je op een redelijk eenvoudige manier unobstructive javascript toevoegingen kunt doen, die --wanneer je javascript wel hebt-- het gebruik makkelijker maken, maar waarbij alles ook nog gewoon werkt zonder. :) Kleine moeite, veel plezier. Of iedergeval een, in mijn ogen, betere website.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • BikkelZ
  • Registratie: Januari 2000
  • Laatst online: 24-11 23:24

BikkelZ

CMD+Z

Ik denk dat de TS alleen weet wat in dit geval precies het doel is.....

iOS developer


Verwijderd

Topicstarter
BikkelZ schreef op dinsdag 22 mei 2007 @ 10:45:
Ik denk dat de TS alleen weet wat in dit geval precies het doel is.....
Je bedoelt dat javascript niet geaccepteerd zou worden door iemand die het uit heeft staan in zijn browser ?

Dit is ook wel op te lossen.

Het uiteindelijke doel is een formulier dat ik wil laten vullen en waar checks op de formfields gedaan moeten worden.

De checks moeten alleen op de zichtbare delen gedaan worden, dus niet op de hidden divs.

Ik dacht dat dit redelijk duidelijk was :)

Ik ben er wel uit dat met een functie werken waarschijnlijk het handigste is, alleen een functie in bestaande code bouwen... lastiger vind ik.

  • BikkelZ
  • Registratie: Januari 2000
  • Laatst online: 24-11 23:24

BikkelZ

CMD+Z

Nee, de reden dat je ze in de eerst plaats hide en niet meer wil checken, ik denk dus dat jij ook helemaal niet wil dat bepaalde velden ingevuld worden en misschien zelfs het erg onduidelijk is om ze zo op een rijtje te zien.

iOS developer


Verwijderd

Topicstarter
BikkelZ schreef op dinsdag 22 mei 2007 @ 12:08:
Nee, de reden dat je ze in de eerst plaats hide en niet meer wil checken, ik denk dus dat jij ook helemaal niet wil dat bepaalde velden ingevuld worden en misschien zelfs het erg onduidelijk is om ze zo op een rijtje te zien.
Ik hide formfiles inderdaad omdat ik ze niet ingevuld wil hebben, eigenlijk hoeven ze niet ingevuld te worden als de radiobutton op nee staat.

Wat wil je hier mee zeggen, ik moet een andere methode kiezen ?

  • BikkelZ
  • Registratie: Januari 2000
  • Laatst online: 24-11 23:24

BikkelZ

CMD+Z

Verwijderd schreef op dinsdag 22 mei 2007 @ 12:55:
[...]


Ik hide formfiles inderdaad omdat ik ze niet ingevuld wil hebben, eigenlijk hoeven ze niet ingevuld te worden als de radiobutton op nee staat.

Wat wil je hier mee zeggen, ik moet een andere methode kiezen ?
Wat mij betreft niet maar als je wil dat iemand die visueel gehandicapt is je formulier nog een beetje normaal kan invullen, dan is dit niet de manier. Javascript en een braillereader :N

iOS developer


Verwijderd

Topicstarter
BikkelZ schreef op dinsdag 22 mei 2007 @ 13:12:
[...]


Wat mij betreft niet maar als je wil dat iemand die visueel gehandicapt is je formulier nog een beetje normaal kan invullen, dan is dit niet de manier. Javascript en een braillereader :N
Nee, daar heb je gelijk in... maar dat is de volgende stap dan wel.

Komt goed !

Had jij nog werkende voorbeelden toevallig ? Mijn voorbeeld met de functie werkt wel, maar niet als ik daar weer javascript met functies in ga zetten...

  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11 15:46

OkkE

CSS influencer :+

Hier is even een kleine test, om een idee te geven van hoe ik het zou doen. Natuurlijk kan het allemaal nog netter, en kan het zeker nog algemener, zodat het makkelijker te hergebruiken is, maar het gaat om 't idee.

Evt. kan er nog een tekstje bij Test 2 opgenomen worden dat aangeeft dat het alleen ingevuld hoeft als vraag 1 "Ja" is. :)

(Alleen in FF getest btw... geen tijd voor verdere tests of het netter maken.)


HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Unobstructive Javascript test</title>
    <script type="text/javascript">
    function init() {
        document.getElementById('q02').style.display = 'none';
    }
    
    function toggle(id, obj) {
        if (obj.value=='Ja' && obj.checked) {
            document.getElementById(id).style.display = 'block';
        }
        else {
            document.getElementById(id).style.display = 'none';
        }
    }
    
    function validate() {
        obj = document.getElementById('q02');
        if (obj.style.display != 'none') {
            if (document.getElementById('test2').value == '') {
                alert('Veld "test2" mag niet leeg zijn.');
                return false;
            }
            else {
                return true;
            }
        }
    }
    </script>
</head>
<body onload="init();">

<p>Eigenlijk zou het nog mooier zijn om ook de <code>onload=""</code> en <code>onclick=""</code> te vervangen, en deze later toe te voegen, maar het gaat om 't idee.</p>

<form action="" method="POST" onsubmit="return validate();">

<p id="q01">Dit is een test.<br>
<input type="radio" id="test-ja" name="test" value="Ja" onclick="toggle('q02',this);"><label for="test-ja"> Ja</label>
<input type="radio" id="test-nee" name="test" value="Nee" onclick="toggle('q02',this);"><label for="test-nee"> Nee</label>
</p>

<p id="q02">
    <label for="test2">Test 2</label>
    <input type="text" name="test2" id="test2" value="">
</p>

<button>OK</button>

</form>

</body>
</html>

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


Verwijderd

Topicstarter
OkkE, dat is echt ideaal om een dergelijk voorbeeld te zien, ik dank je zeer hartelijk !

In IE werkt hij niet, wel in FF, maar dit is op te lossen.

Ik ga hier eens flink mee aan de stoei, dit maakt het erg aangenaam om er verder mee te gaan !

  • Mei
  • Registratie: Juni 2005
  • Laatst online: 17-10-2024

Mei

BikkelZ schreef op dinsdag 22 mei 2007 @ 09:46:
Hoeveel krijgt een blinde mee van een pagina waarop dingen dynamisch verschijnen, verdwijnen of veranderen? Waarschijnlijk moet je dit hele concept laten vervallen op het moment dat je daar aan gaat denken.
Gewoon een standaard HTMLform maken en dat met PHP checken. Als dat werkt maak je pas een JScrippie dat client-sided de boel kan checken voor usability. De submit button kan je met JS wel overriden.

Kortom: Altijd je websites ontwerpen _zonder_ JS. Als je dat werkend hebt, dan kan je met JS bezig gaan om de boel wat gebruiksvriendelijker te maken.

Verwijderd

Topicstarter
Een PHP check is misschien wel het mooiste.

Van PHP naar JS moet ik eens gaan bekijken want dit is me redelijk onbekend.

  • Mei
  • Registratie: Juni 2005
  • Laatst online: 17-10-2024

Mei

Hoezo van PHP naar JS? Je zorgt gewoon dat ook de JS uitgevoerd wordt als dat kan (want zonder PHP check kan iemand je nog beduvelen). Je maakt dus eerst een versie die met een normale submitbutton werkt en via PHP de boel laat checken. Daarna maak je een JScrippie die de submitbutton moet overriden (dus ipv submitten het script uitvoeren) en die op een onclick van de button zelf een korte check uitvoert en als het goed is het formulier verstuurt met form.submit().

Verwijderd

Topicstarter
omdat dit toch allemaal wat complex aan het worden is ga ik denk ik deze formcheck maar met PHP doen en terug sturen naar de "form-pagina" waarbij ik doormiddel van CSS duidelijk maak wat niet ingevuld is.

Ik kan namelijk met $_POST op een veel makkelijkere manier bepalen wat er gechecked moet worden met bepaalde geselecteerde radiobuttons

  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11 15:46

OkkE

CSS influencer :+

Verwijderd schreef op donderdag 31 mei 2007 @ 14:37:
omdat dit toch allemaal wat complex aan het worden is ga ik denk ik deze formcheck maar met PHP doen en terug sturen naar de "form-pagina" waarbij ik doormiddel van CSS duidelijk maak wat niet ingevuld is.

Ik kan namelijk met $_POST op een veel makkelijkere manier bepalen wat er gechecked moet worden met bepaalde geselecteerde radiobuttons
Een PHP (nouja server-side) check is sowieso een must, in mijn ogen. Vertrouw nooit de invoer van gebruikers. De Javascript oplossing is (mits goed toegepast) alleen maar om het gebruiksvriendelijker te maken. :) Ik gebruik zelf dan ook altijd JS én PHP checks.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


Verwijderd

Topicstarter
OkkE schreef op donderdag 31 mei 2007 @ 15:18:
[...]

Een PHP (nouja server-side) check is sowieso een must, in mijn ogen. Vertrouw nooit de invoer van gebruikers. De Javascript oplossing is (mits goed toegepast) alleen maar om het gebruiksvriendelijker te maken. :) Ik gebruik zelf dan ook altijd JS én PHP checks.
Ja, ik gebruik het normaal gesproken ook omdat het gewoon goed werkt.

Ik moet alleen even een manier zien te vinden dat ik de error's niet met een header terug moet zetten naar de "vorige" pagina en dat op dat moment de error-variabele in de adresbalk staat.

Vaak doe ik zoiets met een if() waarbij ik variabelen controleer, staan deze er niet in of is er iets niet juist dan post ik terug naar de vorige pagina met een header en de variabelen erin welke niet huist zijn.

Staat alleen niet zo netjes en is in dit geval wel een hele complexe if-statement.

Daar moet ik dus een oplossing voor zien te vinden.
Pagina: 1