Jump to content

Problem disabling a button


coldkill

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

  • 3 weeks later...
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?
Link to comment
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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.