Scrolling term of agreement in registration page

[grannyloc]

Hi I am trying to (or looking for the code that does this) add my term of agreement in the resgitration process of my site. Similar to what you can see on some shareware where the visitor needs to scroll all the way down the page before the I accept and I refuse button can be displayed on the page (From being grey-out to being clickable).

I hope it can be done in Javascript. If not maybe php. ?


Thank you very much for your help.

G.

[Jona]

<input type="checkbox" name="accept" value="true" onclick="if(this.checked){this.form.submit.disabled=false;} else {this.form.submit.disabled=true;}" /> I accept <br/>
<button type="submit" name="submit">Submit</button>

[grannyloc]

thanks.Sorry but where do I put my text. Shouldn't I put a Textarea tag somewhere. ?

Thanks a lot

G.

[Jona]

Originally posted by grannyloc
thanks.Sorry but where do I put my text. Shouldn't I put a Textarea tag somewhere. ?

Yes.

[grannyloc]

could you tell me where plz ;-) i am new at this.

thanks.

[Jona]

Maybe you should try learning HTML before trying to make a site? Put the textarea tag before the checkbox.


<textarea readonly rows="15" cols="30">
Terms of Service message.
</textarea>

[grannyloc]

Thanks for the patronizing comment. I know how to use the <textarea tag but want to know how to blend it with the earlier code as part of the same code.

Tanks

G.

[Jona]

Do you want to put the checkbox/button inside the textarea?

[grannyloc]

Yes as one block. You read the TOA within the Texeara and you have to scroll down to the end of the TOA to have the Accept and Refuse button showing up. All is part of the same area.

Thank you

G.

[Jona]

You can't include any HTML code in a textarea; your best bet would be use paragraphs and a DIV with an scrolling overflow.

[grannyloc]

That's sound complicated. As you probably noticed I am not too kmowledgeable . How would that translate ? mixing both codes :-(

Thank you

G.

[Jona]

Okay, what I'm saying is you can use the following, instead of a textarea (assuming the headings are the fourth in your document structure, and you're using an HTML 4.01 DTD).


<form action="accept.php" method="post">
<fieldset style="width:100%; height: 450px; overflow: auto;">
<legend>Accept the Terms</legend>
<h4>Terms of Service</h4>
<p>Terms of service information goes here...</p>
<label><input type="checkbox" name="tos_accept" value="true" onclick="if(this.checked){this.form.sub.disabled=false;}
else{this.form.sub.disabled=true;}"> I accept the terms of service.</label>
<label><button type="submit" name="sub" disabled>Accept</button></label>
</fieldset>
</form>

[grannyloc]

Thank you for your great help.

G.

[grannyloc]

Almost there. 2 things:

- I need to add the "I don't accept" option next to "I accept".
- I put the "I accept" selection outside the fieldset as I want those options to be seen right away But only goes out of grey when the scroll bar reach the bottom. How do I modify the code to do that ?

Thanks

[Jona]

Originally posted by grannyloc
- I need to add the "I don't accept" option next to "I accept".
- I put the "I accept" selection outside the fieldset as I want those options to be seen right away But only goes out of grey when the scroll bar reach the bottom. How do I modify the code to do that ?

Recreate the INPUT with a type of CHECKBOX and place it just after the "I accept" checkbox; modify the code to have a reverse effect (switch the false/true values after the equals signs).

You're making things way too complex. Perhaps you could illustrate what you want better, as I am not understanding your formatting questions very well.

[grannyloc]

Sorry but it's actually to follow a legal requirement. that the user needs to have gone through the botomm of the agreement before he can make his choice.

I reverse the Value for Refuse. Now How do I fit the Refuse Square box to appear clickable.

Thank you

G.

[Jona]

I'm working completely blindly. Can you upload a *.zip file with your the relevant files?

[grannyloc]

Yes Sorry:

This is what I tried:

Option 1


<form action="accept.php" method="post">
<fieldset style="width:100%; height: 200px; overflow: auto;">
<legend>Accept the Terms</legend>
<h4>Terms of Service</h4>
<p>Terms of service information goes here.fdssssssssssssssssssssssssssssssssssss
dfsddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddd..
</p>
<label><input type="checkbox" name="tos_accept" value="true" onclick="if(this.checked){this.form.sub.disabled=false;}
else{this.form.sub.disabled=true;}"> I accept the terms of service.</label>
<label><button type="submit" name="sub" disabled>Accept</button></label>
</fieldset>
</form>

Option 2 :

<textarea name="Terms" ROWS=15 COLS=50 WRAP=VIRTUAL READONLY>
ssssssssssss
dfsddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddd..
has the right to suspend or terminate
</p></textarea>
<label><input type="checkbox" name="tos_accept" value="true" onclick="if(this.checked){this.form.sub.disabled=false;}
else{this.form.sub.disabled=true;}"> I accept the terms of service.</label>
<label><button type="submit" name="sub" disabled>Accept</button></label>

What I need is something like this (http://www.cargillaghorizons.com/ca...signup?openform) . But I need to replace the button by Check boxes. One for "I accept" , one for "I refuse" and those 2 check boxes needs to be greyed out until the user has reach the bottom of the scroll.

Hope I'ts clearer now with a example.

Thank you

[Jona]

It sounds like what you're trying to do is impossible; the address you linked me to does not work.

[grannyloc]

Here is the link again.

I might not explain it right. But I am sure it is quite simple if you know what you're doing unlike me.

http://www.cargillaghorizons.com/cah/register.nsf/customer_signup?openform

thanks

[Jona]

I thought you wanted checkboxes. :confused:

[grannyloc]

That's why I said. Same format but yes with Check boxes.

[Jona]

Okay, if you have two checkboxes - one for accept, one for decline - doesn't that defeat the purpose? If the checkbox isn't checked, they are declining, if it is, they are accepting; there's no need for another one. If you want two different ones, maybe you should be looking into radio buttons.

[grannyloc]

You are right. Long day. So it is exactly like http://www.cargillaghorizons.com/ca...signup?openform

But the I accept / I decline box should be grey-out until the user scroll all the way day.

Sorry for the confusion.

Thank you

[Jona]

There's no way to tell if the textarea has been scrolled to the bottom. The site you showed doesn't do that, either.

[grannyloc]

I showed you the site as An example.And that's why I specified Same thing but with the button grey-out.
If it is not possible with a texarea, how is it possible: php ? DHTML ?

[Jona]

I see, well as far as I know there is absolutely no way to tell if you've scrolled to the bottom of the textarea. There is no "location" or "scrolledTo" property. You may be able to do it using a DIV element, though.

[grannyloc]

How would that look ? :(

[Jona]

The HTML would look something like the following. I don't know if it's possible yet, though, I'll have to research it. I will reply to this post again when I've figured it out.


<div id="terms">
<p>Terms of Agreement here....
etc. etc. etc.
etc. etc. etc.</p>
</div>
<label><input type="radio" name="accept" value="yes"> I accept</label>
<label><input type="radio" name="accept" value="no"> I decline</label>

[grannyloc]

Thanks a lot. Keep me posted as soon as you get the breakthrough.

:-)

G.

[HaganeNoKokoro]

try something like this maybe?

<html>
<head>
<title>Scrolled DIV Position</title>
<script type="text/javascript">
function checkScrollPosition(elem) {
if(elem.scrollHeight<(elem.scrollTop+elem.offsetHeight)) {
setInputs(false);
}
}
function setInputs(val) {
for(var i=0; i<document.getElementById("form1").elements.length; i++) {
document.getElementById("form1").elements[i].disabled=val;
}
}
</script>
</head>
<body onload="setInputs(true)">

<div id="di1"
style="word-wrap:break-word;border-style:solid;border-width:1;overflow:auto;width:100;height:150"
onscroll="checkScrollPosition(this)">
blahblahblahblah
blahblahblahblah
blahblahblahblah
blahblahblahblah
blahblahblahblah
blahblahblahblah
blahblahblahblah
blahblahblahblah
blahblahblahblah
blahblahblahblah
blahblahblahblah
blahblahblahblah
blahblahblahblah
blahblahblahblah
blahblahblahblah
</div>
<form id="form1">
<input type="radio" id="yes1" name="accept" value="yes"></input>Accept
<input type="radio" id="no1" name="accept" checked="true" value="no"></input> Decline<br/>
<input id="sub1" type="submit" value="Continue"></button>
</form>
</body>
</html>


Note that if a user has JavaScript disabled, they can still use the form.

[grannyloc]

Thank you... There seem to be some problem with the scrolling

http://www.lawyersinternationalassociation.com//join_step1.html

Almost there there.

G.

[HaganeNoKokoro]

What sort of problem with the scrolling? Your link doesn't work, so I can't see it.
Also, what browser has the problem with the scrolling (I only checked the code with IE6 and Netscape7.2 and I don't have any other browsers)

[grannyloc]

I have IE6 as well.

http://www.lawyersinternationalassociation.com/join_step1.html

I need to go back to the check box option as my form as other fields and a form that handles them so a Checkbox would go in the form directly. :(


See the final page. http://www.lawyersinternationalassociation.com/join1_step1.php?pack=1

I need to replace the agreement Pop-up box I have by the iframe, DIV or Textarea TOS section within the page. And selectable with a checkbox so the whole process goes smoothly.

I know it's a pain. Almost there now.

Thank you for this final push. :rolleyes:

Appreciatively,

G.

[grannyloc]

but I do need a I agree and a I don't agree option on the checkbox

G.

[HaganeNoKokoro]

your text is so short it doesn't need to scroll, so the code that activates the form from the onscroll handler never gets called.

change the onload handler in the body tag like:

<body onload="setInputs(true);checkScrollPosition(document.getElementById('di1'))">

[grannyloc]

it's not the size of the text as I have the whole agreement in it. :confused:

http://www.lawyersinternationalassociation.com/join_step1.html

Help

G

[grannyloc]

Hope you did not give up on me. ;-)

Let me know

Thanks