Problem disabling a button

[coldkill]

On my new site i've added a Terms of Service agreement. I've got a checkbox below it which i want people to check if they agree to the TOS. If it is checked then the button should activate and be clickable but if it isn't it should be disabled. Only problem is when the checkbox is ticked the button doesn't activate and stays disabled.

Any ideas?

Heres the JS.
[code]
<script language="javascript" type="text/javascript">
                    function validate()
                    {
                        if( document.sign_up.tos.checked=="true" )
                        {
                            document.sign_up.signed.disabled="false"
                        }
                        else
                        {
                            document.sign_up.signed.disabled="true"
                        }
                    }
                    
                    setInterval( "validate()", 100 )
                </script>[/code]

Thanks,
Cold

[azuka]

You could use

if( document.sign_up.tos.checked== true ) instead of if( document.sign_up.tos.checked=="true" )

Then, why's there a need to use setInterval?

we know tos is a checkbox

I'd suggest you don't use the name 'submit' for a button because submit() is a method of forms.

let's suppose our submit button is called x_submit

you could simply modify the html code for your checkbox to

[code]<input type="submit" onclick="if (this.checked == true) this.form.x_submit.disabled = false; else  this.form.x_submit.disabled = true;" value="Submit" />[/code]

[coldkill]

the setInterval is so it automatically changes the button instead of on a click. But i'l try changing the button name.

[coldkill]

It didn't work. Although i updated the JS code because i looked at it and it was actually saying "When the checkbox IS ticked disabled the button else disable the button" ¬¬.

[kharbat]

try this clue

[code]
<script language="javascript">
    function Activate()
        {
            check_box = document.getElementById('checkbox');
            button = document.getElementById('Submit');
            
            if ( check_box.value == '0' )
                {
                    check_box.value='1';
                    button.disabled = false;
                }
                    


        }

</script>
<form id="form1" name="form1" method="post" action="">
  <label>
  <input type="checkbox" name="checkbox" id="checkbox" value="0" onClick="Activate()"/>
  <br />
  <input type="submit" name="Submit" id='Submit' value="Submit" disabled />
  </label>
</form>
[/code]

[kharbat]

i think this is exactly what you were asking for


[code]
<script language="javascript">
    function Activate()
        {
            check_box = document.getElementById('checkbox');
            button = document.getElementById('Submit');
            
            if ( check_box.checked == true )
                {
                    button.disabled = false;
                }
            else
                button.disabled = true;
        }

</script>


<form id="form1" name="form1" method="post" action="">
  <label>
  <input type="checkbox" name="checkbox" id="checkbox" value="0" onClick="Activate()"/>
  <br />
  <input type="submit" name="Submit" id='Submit' value="Submit" disabled />
  </label>
</form>

[/code]

try it and tell me what happens

[coldkill]

Nope didn't work.

Just fyi. xHTML doesn't use capitals for onClick etc it's just onclick.

[kharbat]

my last post, is tested on IE and FireFox..

i understood that you have a checkbox and a disabled button..
when the checkbox is checked the button becomes enabled.

when the checkbox is not checked the button becomes disabled..

in case i am describing your problem correctly.. the code above does this operation..

[azuka]

[!--quoteo(post=383191:date=Jun 13 2006, 06:27 AM:name=coldkill)--][div class=\'quotetop\']QUOTE(coldkill @ Jun 13 2006, 06:27 AM) [snapback]383191[/snapback][/div][div class=\'quotemain\'][!--quotec--] It didn't work. Although i updated the JS code because i looked at it and it was actually saying "When the checkbox IS ticked disabled the button else disable the button" ¬¬. [/quote]

I'm assuming your form code looks something like

[code]<form name="sign_up" id="sign_up" action="#####" method="post">
<!-- Other content goes here -->
<input type="checkbox" name="tos" id="tos" onclick="validate_tos(this)" />
<input type="submit" name="x_submit" value="x_submit" disabled="disabled" />
</form>[/code]

Add this function to your script in your head tag
[code]
function validate_tos(theCheckBox){
    if (theCheckBox.checked == true) theCheckBox.form.x_submit.disabled = false;
    else theCheckBox.form.x_submit.disabled = true;
}[/code]

I tried it myself.

[nogray]

This should be just one line of JS, and always use document.getElementById() when you accessing objects in JS.
[code]
<input type="checkbox" id="tos" name="tos" onclick="document.getElementById('signed').disabled = this.checked;" /><br />
<input type="submit" id="signed" name="signed" value="submit" />
[/code]

[Guest Russel]

I have the code you provided and it works perfectly in my php file except for one small thing.

i have a form that autogenerates rows as needed based on the query results.  So, if i have 3 records that pull, my table creates three rows and puts the data in it.  i added your code and now at the end of each row is a check box and a "submit" button.

the problem is when i select the checkbox for the 1st row, the cancel button becomes activated.  if i select the checkbox for the 2nd or 3rd row, the submit button does NOT become activated.

Any ideas?

[nogray]

If you have more than one button, you gotta make sure they all have unique ids (like signed_1, signed_2, signed_3)

You can set a counter to assign the different ids for each button. But this is a guess since I don't have your HTML output.

If you can post the output for three rows, I can pin point the issue.