Jump to content

Archived

This topic is now archived and is closed to further replies.

coldkill

Problem disabling a button

Recommended Posts

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

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
the setInterval is so it automatically changes the button instead of on a click. But i'l try changing the button name.

Share this post


Link to post
Share on other sites
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" ¬¬.

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
Nope didn't work.

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

Share this post


Link to post
Share on other sites
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..

Share this post


Link to post
Share on other sites
[!--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.

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.