[JS] Submit button enable na scrollen textarea.
Zoals jullie in het andere topic al lezen ben ik bezig met een website. Nu wil ik dat voordat mensen zich registreren de algemene voorwaarden lezen. Om dit te kunnen verplichten wil ik dat er een checkbox onder de textarea staat en dat die pas enabled wordt als je helemaal tot aan de bodem gescrolled hebt. En als je deze dan hebt aangevinkt wil ik pas dat de submit button enabled wordt.
Ik heb zelf geen idee wat ik hiervoor moet gebruiken aangezien ik nog geen javascript functie heb gevonden die dit als resultaat heeft.
Wie 0 wie heeft een idee?
Mvg,
nivek
PHP Newbie schreef op 15.12.2007 22:24:
maar wel in een div met een witte achtergrond waar scrollen op enabled is.. ;-)
Klopt helemaal, maar toch zou ik graag de checkbox weergeven ookal heeft hij nog niet gescrolled... Ik dacht echt dat er wel een oplossing voor zou zijn, maar blijkbaar niet.
Je moet het dan denk ik zoeken in Javascript's
Mitchelp schreef op 15.12.2007 23:34:
Er is denk ik wel een oplossing maar niet in de vorm php,
Je moet het dan denk ik zoeken in Javascript's
Je moet het dan denk ik zoeken in Javascript's
Dit snapte ik natuurlijk zelf ook wel en kijk is naar de titel en mijn startbericht. Hierin zeg ik zelf ook dat het in JavaScript zal moeten zitten, maar dat ik zelf geen idee heb hoe dit aan te pakken.
Code (php)
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
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
<div align="center">
<div style="width:400px; height:150px; padding: 2px; overflow:auto; border:2px inset" align="left">
1 <b>Voorwaarden:</b><br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
<br>
<div align="center">
<b>Vink aan als u accoord gaat met deze voorwaarden:</b>
<input type="checkbox"
onClick="if(this.checked == true) { document.getElementById('button').disabled=false; }
if(this.checked == false) { document.getElementById('button').disabled=true; }">
<br>
</div>
</div>
<br><input type="button" value="Volgende" id="button" onclick="location.href='volgende_pagina.php'" disabled>
</div>
<div style="width:400px; height:150px; padding: 2px; overflow:auto; border:2px inset" align="left">
1 <b>Voorwaarden:</b><br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
<br>
<div align="center">
<b>Vink aan als u accoord gaat met deze voorwaarden:</b>
<input type="checkbox"
onClick="if(this.checked == true) { document.getElementById('button').disabled=false; }
if(this.checked == false) { document.getElementById('button').disabled=true; }">
<br>
</div>
</div>
<br><input type="button" value="Volgende" id="button" onclick="location.href='volgende_pagina.php'" disabled>
</div>
Deze <div> lijkt redelijk op een <textarea> en heeft onderin een checkbox die de button activeerd of deactiveerd. De button kan uiteraard ook een submit-knop worden in plaats van een onclick-href zoals het nu is, zolang deze maar het ID "button" krijgt (of iets anders zolang je dit bij de checkbox ook maar veranderd).
Ik zou op het moment niet weten hoe je door alleen naar beneden te scrollen dit voor elkaar zou kunnen krijgen, zoals het nu is lijkt me een mooie tussenoplossing.
Een erg groot voorstander van dit soort voorwaarden teksten ben ik niet, over het algemeen worden ze toch niet gelezen, of er nu een checkbox of scroll-beveiliging is of niet.
Ik hoop dat ik je met dit script heb kunnen helpen,
grz. Johan.
Gewijzigd op 01/01/1970 01:00:00 door Johan M
ik dat er een checkbox onder de textarea staat en dat die pas enabled wordt als je helemaal tot aan de bodem gescrolled hebt. En als je deze dan hebt aangevinkt wil ik pas dat de submit button enabled wordt.
wat later dit
Klopt helemaal, maar toch zou ik graag de checkbox weergeven ookal heeft hij nog niet gescrolled...
in het eerste geval kan je onderaan een witte foto achtergrond zetten met de checkbox, bij mouseover wordt deze checkbox actief.. in het 2de geval kan je de checbox in een kader weergeven die gelijk met het hele script mee scrold
groeten
Hij bedoelt volgens mij dit:
Ik wil een Algemenen voorwaarden maken voordat iemand zich registreet op mijn website maar die persoon moet eerst het tekst vak met daarin de algemenen voorwaarden naar beneden scrolllen voordat het Vakje waar je in moet aanvinken dat ik de algemenen voorwaarden accepteer anebled word dus dat je hem kan aanvinken.
Ik hoop dat het zo een beetje duidelijker is..
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<form id="form1" name="form1" method="post" action="">
<textarea name="Algemene Voorwaarden" id="Algemene Voorwaarden" cols="45" rows="5"></textarea>
<p>
<input type="checkbox" name="alg" id="alg" />
Ik heb de algemene voorwaarden gelezen en ga er mee akkoord</p>
<p>
<input type="submit" name="Sumit" id="Sumit" value="Submit" />
</p>
</form>
<textarea name="Algemene Voorwaarden" id="Algemene Voorwaarden" cols="45" rows="5"></textarea>
<p>
<input type="checkbox" name="alg" id="alg" />
Ik heb de algemene voorwaarden gelezen en ga er mee akkoord</p>
<p>
<input type="submit" name="Sumit" id="Sumit" value="Submit" />
</p>
</form>
Nu wil ik dus dat als de pagina laad:
- De checkbox disabled is
- De submit knop disabled is
Als ik dan op de textarea klik en deze naar helemaal naar beneden heb gescrolled dat de checkbox enabled word.
Als deze dan is aangevinkt zou ik graag willen dat dan pas de submit button enabled word en hij dan pas verder naar de volgende pagina kan gaan.
Quote:
Om dit te kunnen verplichten wil ik dat er een checkbox onder de textarea staat...
Textarea is nu een div die er uit ziet als een textarea.
Quote:
... en dat die pas enabled wordt als je helemaal tot aan de bodem gescrolled hebt.
Scriptechnisch is het lastig dit te realiseren door scrollen alleen, maar lees de volgende zin:
Quote:
En als je deze dan hebt aangevinkt wil ik pas dat de submit button enabled wordt.
Er moet dus iets aangevinkt worden, en dat staat ook in mijn scriptje.
Deze versie is misschien nog iets leuker, in ieder geval duidelijker voor de gebruikers (dan weten ze tenminste dat ze in de algemene voorwaarden moeten zijn).
Code (php)
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
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
<div align="center">
<div style="width:400px; height:150px; padding: 2px; overflow:auto; border:2px inset" align="left">
1 <b>Voorwaarden:</b><br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
<br>
<div align="center">
<b>Vink aan als u accoord gaat met deze voorwaarden:</b>
<input type="checkbox"
onClick="if(this.checked == true) { document.getElementById('button').disabled=false;
document.getElementById('button').value='Volgende'; }
if(this.checked == false) { document.getElementById('button').disabled=true;
document.getElementById('button').value='Lees eerste de algemene voorwaarden'; }">
<br>
</div>
</div>
<br><input style="width: 250px" type="button" value="Lees eerste de algemene voorwaarden" id="button" onclick="location.href='volgende_pagina.php'" disabled>
</div>
<div style="width:400px; height:150px; padding: 2px; overflow:auto; border:2px inset" align="left">
1 <b>Voorwaarden:</b><br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
<br>
<div align="center">
<b>Vink aan als u accoord gaat met deze voorwaarden:</b>
<input type="checkbox"
onClick="if(this.checked == true) { document.getElementById('button').disabled=false;
document.getElementById('button').value='Volgende'; }
if(this.checked == false) { document.getElementById('button').disabled=true;
document.getElementById('button').value='Lees eerste de algemene voorwaarden'; }">
<br>
</div>
</div>
<br><input style="width: 250px" type="button" value="Lees eerste de algemene voorwaarden" id="button" onclick="location.href='volgende_pagina.php'" disabled>
</div>
Johan schreef op 16.12.2007 12:04:
bla bla bla
Misschien heb je wel gelijk... Ik zal het eens gaan uitproberen en als ik er nog niet helemaal tevreden mee ben zal ik het hier posten...
Bedankt allemaal voor de reacties
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<form id="form1" name="form1" method="post" action="">
<textarea name="Algemene Voorwaarden" id="Algemene Voorwaarden" cols="45" rows="5"></textarea>
<p>
<input type="checkbox"
onClick="if(this.checked == true) { document.getElementById('button').disabled=false;
document.getElementById('button').value='Submit'; }
if(this.checked == false) { document.getElementById('button').disabled=true;
document.getElementById('button').value='Ga accoord met dede algemene voorwaarden'; }">
Ik heb de algemene voorwaarden gelezen en ga er mee akkoord</p>
<p>
<input type="submit" name="Sumit" id="button" value="Ga accoord met de algemene voorwaarden" disabled />
</p>
</form>
<textarea name="Algemene Voorwaarden" id="Algemene Voorwaarden" cols="45" rows="5"></textarea>
<p>
<input type="checkbox"
onClick="if(this.checked == true) { document.getElementById('button').disabled=false;
document.getElementById('button').value='Submit'; }
if(this.checked == false) { document.getElementById('button').disabled=true;
document.getElementById('button').value='Ga accoord met dede algemene voorwaarden'; }">
Ik heb de algemene voorwaarden gelezen en ga er mee akkoord</p>
<p>
<input type="submit" name="Sumit" id="button" value="Ga accoord met de algemene voorwaarden" disabled />
</p>
</form>